无法解析“chart.js/auto”

问题描述

我正在尝试使用 chart-js 和 react-chartjs-2，但显示以下错误：

编译失败。

./node_modules/react-chartjs-2/dist/index.modern.js
Module not found: Can't resolve 'chart.js/auto' in 'C:\Users\An\chart-react\project-folder\client\node_modules\react-chartjs-2\dist'

我的代码：

import React from "react";
import { Bar } from "react-chartjs-2";

function ChartData() {
  const data = {
    labels: ["1","2","3","4","5","6"],datasets: [
      {
        label: "# of Votes",data: [12,19,3,5,2,3],fill: false,backgroundColor: "rgb(255,99,132)",borderColor: "rgba(255,132,0.2)",},],};

  const options = {
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,};

  return (
    <div>
      <Bar data={data} options={options} />
    </div>
  );
}

export default ChartData;

已安装的依赖项：

"chart.js": "^2.9.4","react-chartjs-2": "^3.0.3"

解决方法

安装最新版本的 chart.js 应该可以解决这个问题。

# with npm
npm install chart.js@latest

# with yarn
yarn add chart.js@latest

这会将 chart.js 更新为最新版本（当前为 3.3.0）。

我相信只要 chart.js 主要版本是 3+，它就会起作用。

---

这是安装了最新版本的 chart.js 的有效 Demo。

---

更多笔记

您使用的是 chart.js 的 v2，但 react-chartjs-2 的 v3。

react-chartjs-2 peer dependencies 指定使用 chart.js 版本 ^3.1.0。他们还提到在 README 中使用了 chart.js 的 v3。

如果您可以使用最新版本的 npm，上面的 yarn 或 chart.js 安装命令应该足够了。