RollupJS将UMD模块转为ESM时无default导出错误的解决方法咨询

问题根因 #

bn.js采用UMD/CommonJS规范编写，仅支持require('bn.js')的CommonJS导入方式，没有提供ESM规范的default导出，而ethers.js内部采用import _BN from "bn.js"的默认导入写法，@rollup/plugin-commonjs默认未自动适配该场景，导致导出匹配失败。

解决方案 #

按优先级依次尝试以下配置修改：

1. 调整@rollup/plugin-commonjs配置，手动指定bn.js的默认导出规则
   将你现有rollup配置中的commonjs()调用替换为以下内容：

commonjs({
  // 显式指定bn.js需要生成默认导出
  defaultExports: [/node_modules\/bn\.js\/lib\/bn\.js/],
  // 兼容命名导出场景，避免后续其他依赖引用bn.js时报错
  namedExports: {
    'bn.js': ['BN']
  },
  // 处理ESM模块中引用CommonJS模块的混合场景
  transformMixedEsModules: true
})

2. 调整@rollup/plugin-node-resolve的入口查找顺序，确保优先匹配CommonJS格式的依赖入口
   修改resolve配置：

resolve({
  browser: true,
  preferBuiltins: false,
  // 调整入口字段优先级，优先读取CommonJS格式的main入口
  mainFields: ['main', 'module', 'browser']
})

3. 清除缓存重试
   修改配置后执行以下操作避免缓存干扰：

• 删除node_modules/.cache目录
• 删除构建输出的dist目录
• 重新执行npm install后再运行构建/启动命令

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