React-chartjs-2报错：Cannot read properties of undefined (reading 'register')

安全阿岳

2026-8-5

解决React-chartjs-2 + Chart.js v4的"Cannot read properties of undefined (reading 'register')"错误

可能的原因及对应解决方案

1. ES模块导入方式不兼容

你的package.json配置了"type": "module"，Chart.js v4的ES模块导入有特定语法要求，推荐改用自动注册的导入方式，跳过手动注册步骤：

import ChartJS from 'chart.js/auto';
import { Bar } from 'react-chartjs-2';

chart.js/auto会自动注册所有图表所需的缩放组件、元素和插件，无需再调用ChartJS.register()，能直接避免导入未定义的问题。

2. 依赖安装异常

尽管你使用的chart.js@4.1.2和react-chartjs-2@5.2.0版本理论上兼容，但仍可能存在依赖缓存或安装不完整的问题：

删除项目根目录下的node_modules文件夹和package-lock.json（或yarn.lock）
重新执行安装命令：

npm install chart.js react-chartjs-2

3. 构建工具模块解析问题

若使用Webpack等构建工具，可能存在模块解析配置错误：

确保Webpack配置中未强制将ES模块转换为CommonJS
检查@babel/preset-env的配置，设置modules: false以适配type: module的项目

4. 代码执行时机错误

手动注册时，需确保注册逻辑在组件渲染前执行，可将注册代码放入useEffect钩子（仅初始化执行一次）：

import { useEffect } from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';

export default function MyBarChart() {
  useEffect(() => {
    ChartJS.register(
      CategoryScale,
      LinearScale,
      BarElement,
      Title,
      Tooltip,
      Legend
    );
  }, []);

  // 你的options、data定义...

  return <Bar options={options} data={data} />;
}