引入外部React.js打包失效，疑似缺失全局变量？

我来帮你一步步拆解这个问题——核心问题是Webpack没正确识别CDN加载的全局React变量，导致依赖React的模块找不到它。以下是几个关键排查方向：

1. 修正Webpack Externals的全局变量名称 #

你当前的externals配置里，react的root字段写的是小写的'react'，但CDN加载的React在全局环境中的变量名是大写开头的React！这是最可能触发报错的原因。

修改后的配置应该是这样：

externals: {
  react: {
    root: 'React', // 这里改成大写的React，和CDN全局变量一致
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react',
    umd: 'react',
  },
  'react-dom': {
    root: 'ReactDOM', // 这个配置是对的，保持不变
    commonjs2: 'react-dom',
    commonjs: 'react-dom',
    amd: 'react-dom',
    umd: 'react-dom',
  },
},

当Webpack遇到import React from 'react'时，会去全局环境找React变量，之前的小写配置导致它找不到，所以才会抛出Cannot read property 'Component' of undefined。

2. 确保脚本加载顺序正确 #

你给bundle.js加了async属性，这会让浏览器异步加载该脚本，不保证它在React/ReactDOM之后执行。如果bundle先执行，此时React还没加载完成，必然会报错。

建议去掉async，或者换成defer（defer会保证脚本在DOM解析完成后按顺序执行）：

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="/client-2bb593ab57065d662f04.bundle.js"></script> <!-- 移除async属性 -->

3. 验证React版本一致性 #

确认你项目package.json里的react和react-dom版本是16.x，和CDN加载的版本完全匹配。如果项目依赖的版本比CDN的高，可能会出现API不兼容或者模块引用错误的问题。

4. 检查是否有其他依赖间接引用React #

即使你移除了Router，可能还有其他第三方库（比如状态管理库、UI组件库）在内部引用React。可以用webpack-bundle-analyzer插件分析打包后的bundle，看看里面是否还包含React的代码：

• 如果bundle里还有React，说明externals配置没生效，可能是Webpack配置的其他部分覆盖了它，或者依赖的库没有遵循externals规则。

5. 确认Webpack配置的环境一致性 #

如果你有分环境的Webpack配置（比如webpack.dev.js和webpack.prod.js），要确认你修改的是当前运行环境对应的配置文件，别改错文件导致配置不生效。

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