外部React包集成报错：ReferenceError: React is not defined

场景概述 #

外部包与主React应用均基于Webpack+Babel构建，外部包将React、react-dom等设为外部依赖，主应用通过动态导入引入外部包时出现报错。

现有配置与报错 #

1. 初始配置与第一个报错 #

• 外部包webpack.config.js中externals配置：

  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
    emotion: 'emotion',
    reactEmotion: 'react-emotion',
  }
  

• 主应用动态引入方式：

  import('EXTERNAL_PACKAGE_NAME').then((chat) => {
      debugger;
      const a = chat.ReactFromModule === React;
  });
  

• 报错：

  index.js:2 Uncaught (in promise) ReferenceError: React is not defined
  

2. 修改UMD配置后的第二个报错 #

• 外部包修改后的输出与externals配置：

  output: {
    libraryTarget: 'umd',
    library: 'Chat',
    umdNamedDefine: true,
  }
  externals: {
    react: 'react',
    'react-dom': 'reactDOM',
    emotion: 'emotion',
    reactEmotion: 'react-emotion',
  },
  

• 报错：

  Module not found: Error: Can't resolve 'reactDOM' in PATH
  

修复方案 #

1. 修正外部包Webpack配置 #

针对两个错误点，更新外部包的webpack.config.js中output和externals字段：

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'index.js',
  assetModuleFilename: 'assets/[contenthash][ext][query]',
  clean: true,
  // 配置UMD格式以兼容多种模块环境
  libraryTarget: 'umd',
  library: 'Chat',
  umdNamedDefine: true,
  // 解决跨环境全局对象兼容问题
  globalObject: 'this'
},
externals: {
  // 用对象格式明确不同模块规范下的依赖映射
  react: {
    commonjs: 'react',
    commonjs2: 'react',
    amd: 'react',
    root: 'React'
  },
  'react-dom': {
    commonjs: 'react-dom',
    commonjs2: 'react-dom',
    amd: 'react-dom',
    root: 'ReactDOM'
  },
  emotion: {
    commonjs: 'emotion',
    commonjs2: 'emotion',
    amd: 'emotion',
    root: 'emotion'
  },
  'react-emotion': {
    commonjs: 'react-emotion',
    commonjs2: 'react-emotion',
    amd: 'react-emotion',
    root: 'reactEmotion'
  }
},

关键修正点：

• 添加globalObject: 'this'，避免UMD在浏览器/Node环境下的全局对象冲突
• 修正react-dom的externals名称为正确的npm包名react-dom，并通过对象格式定义不同模块规范的映射，同时支持全局变量与模块化导入

2. 主应用配置确认 #

• 主应用原Webpack配置中排除外部包的babel编译是合理的，无需修改（外部包已自行完成编译）
• 确保外部包的入口文件src/index.js正确导出所需内容，例如：

  import React from 'react';
  export const ReactFromModule = React;
  // 其他业务导出
  

3. 重新构建验证 #

1. 重新构建外部包，生成符合UMD格式的产物
2. 主应用更新依赖后重新构建运行，动态导入逻辑即可正常执行

错误原因解析 #

• 第一个报错：原externals将React指定为全局变量React，但主应用的React通过模块化导入，未挂载到全局window，导致外部包运行时找不到依赖
• 第二个报错：修改UMD配置时，react-dom的externals名称写错为reactDOM，Webpack无法识别错误的依赖名称

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