升级chart.js v4.1与react-chartjs-2 v5.1后遇register读取错误求助

为适配React 18，将组件库中的chart.js升级至v4.1、react-chartjs-2升级至v5.1。安装更新包后出现错误：TypeError: Cannot read properties of undefined (reading 'register')。升级前一切正常，且组件库内的Chart组件示例可正常运行。相关代码如下：

import { Chart as BaseChart } from 'react-chartjs-2'
import { Chart as ChartJS } from 'chart.js/auto'
import { CategoryScale, LinearScale, PointElement, LineElement, BarElement } from 'chart.js'

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement)

原因及解决方案 #

• 核心原因是同时使用chart.js/auto和手动注册插件的方式导致冲突。chart.js/auto会自动注册所有内置的刻度、元素和插件，此时导出的ChartJS对象并未暴露register方法，调用ChartJS.register()自然会触发未定义错误。
• 两种解决方案二选一：
  1. 手动控制注册组件：移除chart.js/auto的导入，改用基础chart.js导入，按需注册所需组件：

     import { Chart as BaseChart } from 'react-chartjs-2'
     import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, BarElement } from 'chart.js'
     
     ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement)
     

     也可以直接注册所有内置组件简化代码：

     import { Chart as BaseChart } from 'react-chartjs-2'
     import { Chart as ChartJS, registerables } from 'chart.js'
     
     ChartJS.register(...registerables)
     

  2. 依赖自动注册能力：删除手动注册代码，仅保留chart.js/auto的导入即可：

     import { Chart as BaseChart } from 'react-chartjs-2'
     import 'chart.js/auto'
     

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