Chart.js v4升级后React组件库导入报错问题求助

核心原因 #

Chart.js 4.x版本启用了package.json的exports字段来严格限制合法的导入路径，而你的Rollup配置将chart.js标记为了外部依赖（external）——但实际上chart.js是组件库的直接依赖（而非peerDependency），这就导致：

• 组件库产物中没有打包chart.js代码，而是保留了对chart.js的导入语句
• 应用在解析这些导入语句时，无法匹配Chart.js 4.x严格的exports规则，从而抛出路径不存在的错误

你尝试的chart.js/auto导入报错，也是因为Rollup没有正确处理Chart.js的exports字段解析，同时外部依赖的设置导致导入路径无法被正确映射。

解决步骤 #

1. 修改Rollup的externals配置，排除chart.js #

因为chart.js是组件库的直接依赖，不需要将其作为外部依赖保留，应该让Rollup将其打包进组件库产物中。调整externals的生成逻辑：

// 原代码：const externals = [...Object.keys(dependencies), ...Object.keys(peerDependencies)];
// 修改为只保留peerDependencies作为外部依赖
const externals = [...Object.keys(peerDependencies)];

如果你的组件库还有其他需要保留为外部依赖的dependencies，可以单独列出，比如：

const excludedDeps = ['react', 'react-dom']; // 仅示例，根据实际情况调整
const externals = [...excludedDeps, ...Object.keys(peerDependencies)];

2. 增强Rollup resolve插件对exports字段的支持 #

显式配置@rollup/plugin-resolve以确保它能正确读取Chart.js的exports字段：

resolve({
  browser: true,
  exportsFields: ['exports'] // 强制读取package.json的exports字段
})

3. 调整组件库中Chart.js的导入方式 #

Chart.js 4.x推荐使用chart.js/auto来自动注册所有图表组件，修改你的导入语句：

// 替换原导入方式
import { Chart } from 'chart.js/auto';

4. 清理并重新构建 #

• 删除组件库的dist目录
• 重新执行Rollup构建命令
• 在React应用中重新安装组件库的最新构建产物

额外验证 #

检查组件库的package.json，确保chart.js处于dependencies而非peerDependencies中，避免版本冲突问题。

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