无法解析“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;

安装的依赖项：

“chart.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+.

这是一个已安装最新版本的工作演示chart.js。

更多笔记

您正在使用 v2 的chart.js但 v3 的react-chartjs-2。

对react-chartjs-2 等依赖项指定使用chart.jsversion ^3.1.0。他们还在READMEchart.js中提到使用 v3 。

如果您可以使用最新版本的npm.yarnchart.js