NextJS应用中Chart.js适配器模块导出错误求助

问题根源 #

NextJS v13的模块解析策略对node_modules中CommonJS模块的ES导入语法校验严格，chartjs-adapter-date-fns内部使用命名导入_adapters的方式，但chart.js在CommonJS环境下未暴露该命名导出，导致报错。

可行解决方案 #

1. 配置NextJS转译目标包 #

在NextJS项目的next.config.js中添加transpilePackages配置，让NextJS转译相关依赖包，自动适配模块导入规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['chartjs-adapter-date-fns', 'chart.js'],
  // 保留原有其他配置
}

module.exports = nextConfig

2. 调整导入顺序（辅助优化） #

在组件文件中先加载chart.js核心模块，再导入适配器，确保模块初始化顺序正确：

import Chart from 'chart.js/auto';
import "chartjs-adapter-date-fns";

3. 升级依赖版本（可选） #

尝试将chart.js升级到^3.9.0及以上版本，新版本对CommonJS/ES模块兼容性做了优化，可能直接解决问题。修改package.json后重新安装依赖：

{
  "chart.js": "^3.9.0",
  "chartjs-adapter-date-fns": "^3.0.0",
  "date-fns": "^2.29.3"
}

验证方式 #

修改配置或依赖后，重启NextJS开发服务或重新构建项目，检查报错是否消失。组件包在Storybook中正常运行，说明核心逻辑无问题，问题源于NextJS与组件包的模块处理策略差异。

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