ES模块环境下Chart.js Doughnut图表datalabels插件报错解决

这个错误本质是插件的模块导入方式与构建环境不兼容，或是Chart.js和插件版本不匹配导致的，以下是几种可行的解决方法：

方法1：确保版本兼容性 #

chartjs-plugin-datalabels与Chart.js的版本必须严格对应：

• Chart.js v2 → 插件v1.x
• Chart.js v3 → 插件v2.x
• Chart.js v4 → 插件v2.x（最新稳定版）

如果版本不匹配，先卸载现有依赖再重装兼容版本：

npm uninstall chart.js chartjs-plugin-datalabels react-chartjs-2
# 以Chart.js v4为例，安装对应兼容版本组合
npm install chart.js@^4.4.0 chartjs-plugin-datalabels@^2.2.0 react-chartjs-2@^5.2.0

方法2：导入ES模块版本的插件 #

默认导入的是CommonJS版本插件，可能触发动态require问题，直接导入ES模块版本即可规避：

import { Chart , registerables } from 'chart.js';
import { Doughnut } from 'react-chartjs-2';
// 导入ES模块版本的插件
import ChartDataLabels from 'chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js';

Chart.register(...registerables, ChartDataLabels);

方法3：优化构建工具配置（针对Vite/ESBuild等） #

如果使用Vite这类构建工具，可在配置中提前预构建依赖，避免动态导入报错：

// vite.config.js
export default {
  optimizeDeps: {
    include: ['chart.js/helpers']
  }
}

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