React开发Chrome扩展触发Minified React error #130错误如何解决？

React错误码130的本质是待渲染目标不是合法的React组件/元素，绝大多数场景下是组件导出值为undefined导致的。

问题根因 #

• Rollup插件执行顺序错误：当前配置中@rollup/plugin-commonjs执行顺序在@rollup/plugin-node-resolve之前，导致commonjs插件无法正确识别node_modules下依赖的导出规则，第三方错误提示组件依赖的React API被解析为undefined，最终组件导出失效。
• Babel JSX转换规则不兼容：preset-react未配置JSX运行时模式，若第三方组件使用了React 17+的自动JSX转换语法，会导致JSX编译异常，组件返回值为undefined。
• 手动配置namedExports冗余：手动声明的React相关命名导出可能和实际安装的React版本导出规则不匹配，反而导致导出解析错误。
• 多React实例冲突：配置了external: []，每个Rollup入口都会打包独立的React副本，Chrome扩展环境下多入口的React实例冲突会导致组件渲染异常。

解决步骤 #

1. 调整插件执行顺序
   将resolve插件放到commonjs插件之前，同时删掉冗余的React相关手动命名导出配置：

plugins: [
    postCss({
        extract: true,
        plugins: []
    }),
    // resolve必须放在commonjs之前执行
    resolve({
        mainFields: ["module", "main"],
        customResolveOptions: {
            moduleDirectory: path.resolve(__dirname, './node_modules')
        }
    }),
    commonjs({
        include: path.resolve(__dirname, "./node_modules/**"),
        defaultIsModuleExports: true, // 自动识别CommonJS模块导出
        namedExports: {
            "react-transition-group": ["CSSTransition"]
        }
    }),
    // 其余插件保持原有顺序不变
    babel({
        babelrc: false,
        externalHelpers: false,
        presets: babelPresets,
        plugins: babelPlugins
    }),
    json(),
    replace({
        "process.env.NODE_ENV": JSON.stringify("production")
    })
]

2. 修改Babel preset-react配置
   开启自动JSX运行时，适配新版JSX语法：

var babelPresets = [
    [ presetEnv, { modules: false } ],
    [ presetReact, { runtime: 'automatic' } ]
];

3. （可选）抽离公共依赖避免多实例冲突
   如果Chrome扩展有多个入口模块，将React、ReactDOM设为外部依赖，统一在全局引入，避免多副本冲突：

rollup({
    input: module.entry,
    treeshake: true,
    external: ['react', 'react-dom'], // 新增外部依赖配置
    // 其余配置保持不变
})

4. 验证排查
   临时将process.env.NODE_ENV改为development打包，运行后即可看到完整的未压缩错误提示，确认具体是哪个组件导出为undefined，进一步定位问题。

内容的提问来源于stack exchange，提问作者R.M.ARUN KUMAR