Rollup打包React组件导入Webpack5应用报Node核心模块解析错误

• 配置矛盾：构建目标是CommonJS规范组件库，但Rollup输出配置中format字段配置为esm，实际输出的是ES Module格式产物，和预期目标不符。
• 核心报错来源：第三方依赖未正确外置，Rollup将node_modules下依赖包的Node环境端代码打进了组件产物。这类代码引用了http/https/fs/path/crypto等Node.js内置模块，而Webpack 5默认不再自动注入这些Node核心模块的浏览器兼容polyfill，因此抛出模块找不到的错误。
• 其余../include/module.js、ajv-i18n/localize/fr类路径解析错误，是因为第三方依赖中存在动态导入语法，Rollup静态分析时无法识别对应路径，导致相关文件未被打包进产物。
• 编译阶段出现的@rjsf/core循环依赖警告是依赖包自身的已知问题，和本次运行时报错无关，不影响正常功能。

1. 修正Rollup核心配置 #

重点修正输出格式、增加全局第三方依赖外置规则，从根源避免把Node端代码打包进浏览器侧组件产物，参考配置如下：

import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image';
import json from '@rollup/plugin-json';

export default {
  input: ['./src/xxx.jsx'],
  // 所有node_modules下的第三方包全部外置，不打进组件产物
  external: [/node_modules/],
  output: [
    // 需要同时输出ESM和CommonJS两种格式则保留两个配置，不需要可删除对应项
    {
      dir: './public/build/lib/xxx/esm/',
      format: 'esm',
      sourcemap: true,
    },
    {
      dir: './public/build/lib/xxx/commonjs/',
      format: 'cjs', // 原配置此处错误写为esm，CommonJS对应格式值为cjs
      sourcemap: true,
      exports: 'named',
    },
  ],
  plugins: [
    peerDepsExternal(),
    resolve({
      browser: true,
      preferBuiltins: false,
      extensions: ['.mjs', '.js', '.json', '.node', '.jsx', '.ts', '.tsx'],
    }),
    babel({
      exclude: './node_modules/**',
      presets: ['@babel/preset-env', '@babel/preset-react'],
      plugins: ['@babel/plugin-transform-runtime'],
      babelHelpers: 'runtime',
    }),
    commonjs(),
    postcss({
      extensions: ['.css'],
    }),
    image(),
    json(),
  ],
  // 可选：过滤掉@rjsf/core的循环依赖警告
  onwarn(warn, warnFn) {
    if (warn.code === 'CIRCULAR_DEPENDENCY' && warn.message.includes('@rjsf/core')) {
      return;
    }
    warnFn(warn);
  }
};

2. 校验package.json配置 #

确保组件库的package.json中声明规则正确：

• React、ReactDOM等宿主环境必然会安装的包放在peerDependencies中
• 组件依赖的第三方工具包、组件包（比如@rjsf/core）放在dependencies中
• 配置main字段指向CommonJS产物入口，module字段指向ESM产物入口，方便应用构建工具识别正确的产物格式。

不推荐的兜底方案 #

如果因特殊需求必须把第三方依赖打包进产物，且确实需要在浏览器侧用到Node内置模块的能力，可以在Rollup构建时引入rollup-plugin-polyfill-node插件注入浏览器兼容polyfill，但这种做法会显著增大组件产物体积，组件库场景不建议使用。
注意：不要让组件库使用者在自己的Webpack配置里手动添加Node模块polyfill，这属于把构建配置成本转嫁给用户，会严重影响组件库使用体验。

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