React-chart.js 2 模块出错，但已安装在 package.json 文件中

Question

我已经安装了 React Chart JS 2 但仍然有这种错误

./node_modules/react-chartjs-2/dist/index.modern.js 找不到模块：无法解析“chart.js”

这是我的 package.json 文件

BarChart.js

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

const state = {
  labels: ["Nausea", "Fever", "Muscle Pain"],
  datasets: [
    {
      label: "1st Dose",
      backgroundColor: "rgba(75,192,192,1)",
      borderColor: "rgba(0,0,0,1)",
      borderWidth: 2,
      data: [65, 59, 80],
    },
    {
      label: "2st Dose",
      backgroundColor: "red",
      borderColor: "rgba(0,0,0,1)",
      borderWidth: 2,
      data: [30, 20, 10],
    },
  ],
};

export default class Barchart extends React.Component {
  render() {
    return (
      <div>
        <Bar
          data={state}
          options={{
            title: {
              display: true,
              text: "Average ",
              fontSize: 20,
            },
            legend: {
              display: true,
              position: "right",
            },
          }}
        />
      </div>
    );
  }
}

还有主页：

从“../../Components/Charts/BarChart”导入条形图；

const Home = () => {
  return (
    <div>
      <BarChart />
    </div>
  );
};

export default Home;

Answer 1

您需要chart.js以及react-chartjs-2。

npm install chart.js

Answer 2

请按照以下步骤解决您的问题：

• 从项目和 package-lock.json 中删除“node_modules”文件夹

• npm 安装

• 如果问题仍然存在，则运行

• npm 我的react-chartjs-2 或npm 我的chart.js

• 或者从package.json中删除react-chartjs-2

• npm 我的react-chartjs-2 或npm 我的chart.js

Answer 3

对我来说，当我将节点版本从 v16.15.1 更改为 v16.15.0 时，问题就解决了。