reactjs - 无法解析 'chart.js/auto'

Question

我正在尝试使用 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, 99, 132, 0.2)",
      },
    ],
  };

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

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

export default ChartData;

已安装的依赖项:

"图表.js": "^2.9.4",“react-chartjs-2”:“^3.0.3”

Answer 1

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

# with npm
npm install chart.js@latest

# with yarn
yarn add chart.js@latest

这会将 chart.js 更新到最新版本(当前为 3.3.0)。

我相信只要 chart.js 主要版本是 3+，它就可以工作。

---

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

---

更多笔记

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

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

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