在Next.js中使用chartjs-plugin-zoom与chart.js时遇ERR_PACKAGE_PATH_NOT_EXPORTED错误求助

这个错误的核心原因是chart.js 4.x重构了包的导出结构，移除了旧的主入口导出规则，而chartjs-plugin-zoom 2.0.0是针对chart.js 3.x开发的，内部导入路径未适配4.x的新规范，导致Node.js无法找到正确的导出入口。

以下是三种可行的解决办法：

方案一：降级chart.js到兼容版本 #

直接将chart.js降级到3.x系列的稳定版，和chartjs-plugin-zoom 2.0.0完美兼容：

• 卸载当前版本：

  npm uninstall chart.js
  

• 安装3.x稳定版（以3.9.1为例）：

  npm install chart.js@3.9.1
  

• 重启Next.js项目即可恢复正常。

方案二：手动调整导入路径适配chart.js 4.x #

如果不想降级chart.js，可手动修改插件的导入路径，适配4.x的导出规则：

1. 确保chart.js的导入使用4.x的正确方式：

   import { Chart, registerables } from 'chart.js';
   Chart.register(...registerables);
   

2. 直接导入chartjs-plugin-zoom的ES模块文件，替代默认入口：

   import zoomPlugin from 'chartjs-plugin-zoom/dist/chartjs-plugin-zoom.esm.js';
   

3. 注册插件：

   Chart.register(zoomPlugin);
   

4. 若出现模块解析问题，在next.config.js中添加别名配置：

   module.exports = {
     webpack: (config) => {
       config.resolve.alias['chart.js'] = 'chart.js/dist/chart.esm.js';
       return config;
     },
   };
   

方案三：升级chartjs-plugin-zoom到适配版本 #

chartjs-plugin-zoom从3.0.0版本开始已全面支持chart.js 4.x，直接升级即可：

npm update chartjs-plugin-zoom@latest

升级后按照插件官方文档的标准方式导入和注册即可，无需额外调整路径。

额外注意事项（Next.js 13+ App Router） #

如果使用App Router，必须在使用Chart.js的组件顶部添加'use client'指令，因为Chart.js是客户端渲染库，无法在服务器组件中运行：

'use client';

import { Chart, registerables } from 'chart.js';
import zoomPlugin from 'chartjs-plugin-zoom';

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

// 图表渲染逻辑

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