admin管理员组

文章数量:1334133

Up until release 2.9.4, I used ChartJS in bination with @types/chart.js to get all the types for TypeScript support. My working minimal example with Webpack and TypeScript looks as follows:

package.json:

{
  "devDependencies": {
    "@types/chart.js": "^2.9.31",
    "ts-loader": "^8.1.0",
    "typescript": "^4.2.3",
    "webpack": "^5.30.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "chart.js": "^2.9.4"
  }
}

tsconfig.json:

{
  "pilerOptions": {
    "esModuleInterop": true,
  },
}

webpack.config.json:

module.exports = {
  entry: {
    main: "./main.ts",
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
};

main.ts:

import Chart from "chart.js";

new Chart("chart", {
  type: 'line',
  data: {
    labels: ['Label 1', 'Label 2', 'Label 3'],
    datasets: [{
      label: "Dataset 1",
      data: [1, 2, 3],
    }]
  },
});

index.html:

<!DOCTYPE html>
<html>
  <body>
    <canvas id="chart"></canvas>
    <script src="main.js"></script>
  </body>
</html>

But after updating to version 3.0.0, this doesn't work anymore (I removed @types/chart.js because chart.js ships its own types since that release):

npx webpack serve --mode development

ERROR in [...]/chartjs/main.ts
./main.ts 3:4-9
[tsl] ERROR in [...]/chartjs/main.ts(3,5)
      TS2351: This expression is not constructable.
  Type 'typeof import("[...]/chartjs/node_modules/chart.js/types/index.esm")' has no construct signatures.

But since the inbuilt class Chart does in fact have a constructor, I don't really understand the problem and how to fix it. What is the intended way of using ChartJS version 3 in bination with Webpack and TypeScript?

Thanks in advance for any tip which leads me into the right direction here!

Up until release 2.9.4, I used ChartJS in bination with @types/chart.js to get all the types for TypeScript support. My working minimal example with Webpack and TypeScript looks as follows:

package.json:

{
  "devDependencies": {
    "@types/chart.js": "^2.9.31",
    "ts-loader": "^8.1.0",
    "typescript": "^4.2.3",
    "webpack": "^5.30.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "chart.js": "^2.9.4"
  }
}

tsconfig.json:

{
  "pilerOptions": {
    "esModuleInterop": true,
  },
}

webpack.config.json:

module.exports = {
  entry: {
    main: "./main.ts",
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
};

main.ts:

import Chart from "chart.js";

new Chart("chart", {
  type: 'line',
  data: {
    labels: ['Label 1', 'Label 2', 'Label 3'],
    datasets: [{
      label: "Dataset 1",
      data: [1, 2, 3],
    }]
  },
});

index.html:

<!DOCTYPE html>
<html>
  <body>
    <canvas id="chart"></canvas>
    <script src="main.js"></script>
  </body>
</html>

But after updating to version 3.0.0, this doesn't work anymore (I removed @types/chart.js because chart.js ships its own types since that release):

npx webpack serve --mode development

ERROR in [...]/chartjs/main.ts
./main.ts 3:4-9
[tsl] ERROR in [...]/chartjs/main.ts(3,5)
      TS2351: This expression is not constructable.
  Type 'typeof import("[...]/chartjs/node_modules/chart.js/types/index.esm")' has no construct signatures.

But since the inbuilt class Chart does in fact have a constructor, I don't really understand the problem and how to fix it. What is the intended way of using ChartJS version 3 in bination with Webpack and TypeScript?

Thanks in advance for any tip which leads me into the right direction here!

  • javascript
  • typescript
  • webpack
  • chart.js
  • chart.js3
Share Improve this question edited Apr 5, 2021 at 4:56 uminder 26.2k6 gold badges43 silver badges89 bronze badges asked Apr 4, 2021 at 22:43 user7390973user7390973 631 silver badge6 bronze badges 2
  • 1 Did you import and register the controllers, elements, scales and plugins? chartjs/docs/latest/getting-started/… – uminder Commented Apr 5, 2021 at 6:31
  • @uminder Thank you so much, that was exactly the problem. Considering how much time I spent reading the docs, I'm a bit embarrassed right now :) If you post your ment as answer, I will accept it. – user7390973 Commented Apr 5, 2021 at 12:33
Add a ment  | 

1 Answer 1

Reset to default 4

Chart.js 3 is tree-shakeable, so it is necessary to import and register the controllers, elements, scales and plugins you are going to use.

Please take a look at Bundlers (Webpack, Rollup, etc.) from the Chart.js documentation.

本文标签： javascriptUsage of ChartJS v3 with TypeScript and WebpackStack Overflow

版权声明：本文标题：javascript - Usage of ChartJS v3 with TypeScript and Webpack - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742349272a2458157.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。