react-chartjs-2 v4搭配Chart.js v3时Pie报错arc is not a registered element如何解决

错误根因 #

Chart.js 3.x 及后续版本默认采用 Tree Shaking 机制减少打包体积，不再自动全局注册所有图表元素、控制器、插件模块，需要开发者手动注册用到的对应组件。react-chartjs-2 v4 适配的是 Chart.js 3.x 版本，Pie图表依赖ArcElement元素，未提前注册就会触发该报错。

无需降级的解决方法 #

有两种注册方案可选：

方案1：按需注册（推荐生产环境使用） #

仅注册Pie图表用到的模块，打包体积最小。修改App.js开头的导入和注册逻辑即可，其余代码无需调整：

import React from 'react'
import { Pie } from 'react-chartjs-2'
// 导入需要的组件
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'

// 注册组件
ChartJS.register(ArcElement, Tooltip, Legend)

// 原有BarChart和App代码保持不变
const BarChart = () => {
  return (
    <Pie
      data={{
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [
          {
            label: '# of votes',
            data: [12, 19, 3, 5, 2, 3],
          },
        ],
      }}
      height={400}
      width={600}
    />
  )
}

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

export default App

方案2：全局注册所有组件（适合开发阶段快速调试） #

一次性注册所有Chart.js内置模块，无需针对不同图表单独查找依赖模块，缺点是打包体积会大于按需注册方案：

import React from 'react'
import { Pie } from 'react-chartjs-2'
import { Chart, registerables } from 'chart.js'

// 全局注册所有组件
Chart.register(...registerables)

// 原有业务代码保持不变

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