已安装chart.js仍出现Module not found: Can't resolve 'chartjs'问题求助

问题根源 #

1. 依赖导入拼写错误：错误提示中的chartjs是拼写错误，实际安装的依赖包名为chart.js（带点）。
2. react-chartjs-2 v5+的规则变化：从v5版本开始，react-chartjs-2不再自动包含chart.js核心模块，需要手动导入并注册chart.js所需组件。
3. 错误的导入方式：代码中直接导入整个react-chartjs-2包的方式不符合v5+规范，需导入具体图表组件。

解决步骤 #

1. 确认依赖安装正确 #

若不确定依赖是否正常安装，可重新执行安装命令：

npm install chart.js react-chartjs-2

2. 修正组件代码 #

按照react-chartjs-2 v5+规范，正确导入并注册所需模块，以下是可运行的柱状图示例：

import React from 'react';
// 从react-chartjs-2导入具体的Bar组件
import { Bar } from 'react-chartjs-2';
// 从chart.js导入需要的核心模块和插件
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

// 注册chart.js所需组件（必须步骤，否则图表无法渲染）
ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

const BarChart = () => {
  // 定义图表数据
  const data = {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [
      {
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)',
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)',
        ],
        borderWidth: 1,
      },
    ],
  };

  // 定义图表配置项
  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Bar Chart Example',
      },
    },
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-violet-400 via-white to-violet-400 py-12 px-4 sm:px-6 lg:px-8">
      <Bar data={data} options={options} />
    </div>
  );
};

export default BarChart;

3. 检查项目中的其他导入错误 #

遍历项目代码，确保没有其他地方错误使用import ... from 'chartjs'，所有涉及chart.js的导入都应写成chart.js（带点）。

内容的提问来源于stack exchange，提问作者Yedhu Krishnan