Issue with "[Component] the type of property "onInit" is illegal"

[Boombaastical]

-->

• F2 Version: ^2.1.1
• Platform: WeChat miniprograms
• Mini Showcase(like screenshots): See below
• CodePen Link:

Hello! 中文回答也行,

I have this issue of "[Component] the type of property "onInit" is illegal".

The two issues I see are:
"[Component] the type of property "onInit" is illegal (when preparing "pages/studentprofile/studentprofile").

(anonymous) | @ | index.js? [sm]:16966 -- | -- | --   | (anonymous) | @ | index.js? [sm]:3   | (anonymous) | @ | index.js? [sm]:4   | (anonymous) | @ | studentprofile.js? [sm]:2   | (anonymous) | @ | VM978:8 "

And the error message:
"Component is not found in path "miniprogram_npm/@antv/wx-f2/index" (using by "pages/studentprofile/studentprofile").(env: Windows,mp,1.06.2501092; lib: 3.6.2)"

I've installed the wx-f2 with the npm installer and used the 建构npm. When doing so, I also get this error message:
"完成构建。耗时 5436 毫秒。

1. C:\Users\alexa\WeChatProjects\IB Toolbox\ibToolBox\ibtoolbox_Shared/node_modules/@babel/runtime/index.js: Npm package entry file not found
2. C:\Users\alexa\WeChatProjects\IB Toolbox\ibToolBox\ibtoolbox_Shared/node_modules/csstype/index.js: Npm package entry file not found
3. C:\Users\alexa\WeChatProjects\IB Toolbox\ibToolBox\ibtoolbox_Shared/node_modules/type-fest/index.js: Npm package entry file not found"

Now here is the part in my WXML:
"
Your graph will appear here



"

And the .js file that is a problem:
"const F2 = require('@antv/wx-f2')

(...)

Page({

/**

• Page initial data
  */
  data: {
  studentID: '',
  studentData: [],
  studentEvalData: [],
  classData: [],
  showDropdown: false,
  firstObject: null,
  secondObject: null,
  allObjectivesData: [],
  filteredItems: [],
  evaluationsPlaceholder: "Select an area to compare",
  longPressActivated: false,

onInitChart(F2, config) {
  const chart = new F2.Chart({
    el: config.canvas, // Get the canvas from F2 init config
    width: config.width,
    height: config.height
  });

  // Define your data
  const data = [
    { name: 'London', sales: 145 },
    { name: 'Berlin', sales: 190 },
    { name: 'New York', sales: 165 },
    { name: 'Tokyo', sales: 180 }
  ];

  // Configure the data source and the scale
  chart.source(data, {
    sales: {
      tickCount: 5
    }
  });

  // Configure the tooltip (optional)
  chart.tooltip({
    showItemMarker: false,
    onShow: function (e) {
      const { items } = e;
      items[0].name = items[0].title + ': ' + items[0].value;
    }
  });

  // Define the visual representation of the data
  chart.interval().position('name*sales').color('name');

  // Render the chart
  chart.render();

  return chart; // Important: return the chart instance for further use
}

},"

I tried just this as an example after seeing that the other function I used didn't work either, here is the original function:
"initChart: function(F2, config) {
const firstCategory = this.data.firstObject;
const secondCategory = this.data.secondObject;
let studentData = this.adaptStudentData(firstCategory, secondCategory);

const chart = new F2.Chart({
  el: config.canvas,
  width: config.width,
  height: config.height,
});

chart.source(studentData, {
  score: {
    min: 0,
    max: 4,
    tickCount: 5
  }
});

/*
chart.tooltip({
  custom: true
})*/

chart.scale('subject', {
  range: [0, 1],
  tickCount: 5,
  type: 'cat'
});

chart.axis('subject', {
  line: F2.Global._defaultAxis.line,
  grid: null
});
chart.axis('score', {
  grid: {
    stroke: '#d1d1d1'
  }
});

chart.interval().position('subject*score').color('type', ['#1890FF', '#FACC14']).adjust('dodge');

chart.render();

return chart;

},"