React组件集成react-chartjs-2柱状图时出现Invalid hook call报错

问题背景 #

尝试在React函数组件中引入react-chartjs-2实现柱状图，参考教程编写代码后图表无法渲染，控制台抛出大量Hook相关错误。
当前使用的依赖版本：

• react: ^18.2.0
• react-dom: ^18.2.0
• react-chartjs-2: ^4.2.0

问题复现代码 #

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

const Daily = () => {
 
  const [chartData, setChartData] = useState({
    datasets: [],
  })
  const [chartOptions, setChartOptions] = useState({
    datasets: [],
  })

  useEffect(() => {
    setChartData({
      labels: [1,2,3,4,5,6,7],
      datasets: [
        {
          label: 'e',
          data: [2,6,3,8,4,6,77],

        }
      ]
    });
    setChartOptions({
      responsive: true,
      plugins : {
        legend: {
          position: "top",
        },
        title: {
          display: true,
          text: 'eh'
        }
      }
    })
  }, [])

  return (
    <div className="Daily">
    <Bar data={chartData} options={chartOptions} />
    </div>
  );
};

export default Daily;

控制台报错信息 #

• 警告：Invalid hook call，提示三类可能触发原因：React与渲染器版本不匹配、违反Hooks调用规则、应用中存在多份React副本
• 未捕获类型错误：Cannot read properties of null (reading 'useRef')
• 错误栈指向<ForwardRef(ChartComponent)>组件

根因说明 #

组件逻辑本身符合react-chartjs-2@4.x的写法规范，这个报错和业务代码无关，核心原因是项目依赖树中存在多份React实例副本，导致react-chartjs-2内部调用Hook时指向了错误的React上下文。

修复步骤 #

1. 优先清理缓存重装依赖
   完全删除项目根目录下的node_modules文件夹，以及对应包管理器的锁文件：
   • npm用户删除package-lock.json
   • yarn用户删除yarn.lock
   • pnpm用户删除pnpm-lock.yaml
     重新执行依赖安装命令，安装完成后重启开发服务，80%以上的同类问题在这一步就能解决。
2. 重装未解决则校验依赖树中的React版本
   在项目根目录执行对应命令查看所有依赖引入的React版本：
   • npm用户执行npm ls react
   • yarn用户执行yarn list react
   • pnpm用户执行pnpm ls react
     如果输出结果中存在多个版本的React被加载，在package.json中增加版本强制统一配置：
     npm（v8.3.0及以上版本）添加overrides字段：

   {
     "overrides": {
       "react": "^18.2.0",
       "react-dom": "^18.2.0"
     }
   }
   

   yarn添加resolutions字段：

   {
     "resolutions": {
       "react": "^18.2.0",
       "react-dom": "^18.2.0"
     }
   }
   

   配置完成后重新执行依赖安装即可。
3. 特殊场景排查
   如果你通过npm link/yarn link方式本地引用外部组件，或者把当前Daily组件放在了项目src目录外被识别为独立依赖包，也会触发多React实例问题，把组件移到项目src目录下、取消link的外部依赖即可恢复。

额外优化点 #

代码中chartOptions的初始值误写了datasets字段（配置项中不存在这个字段），虽然不会触发本次的Hook报错，但会导致图表初次加载时读取空配置，把初始值改成空对象{}即可。

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