React库Webpack配置externals后导入出现「模块未找到」错误

问题出在Webpack的externals配置写法错误。当前配置中，你把react和react-dom映射为react_and_react_dom.React、react_and_react_dom.ReactDOM这种带属性的字符串，Webpack会将其当作模块名称去解析，而非浏览器全局对象的属性访问路径，所以编译时会报错找不到对应的模块。

正确的配置需要明确告知Webpack，在不同环境下如何获取外部依赖：对于浏览器环境（全局变量），要指定嵌套的全局对象路径；对于CommonJS/AMD等模块环境，使用标准的模块名。修改后的externals配置如下：

externals: {
  'react': {
    root: ['react_and_react_dom', 'React'], // 浏览器环境：window.react_and_react_dom.React
    commonjs: 'react', // CommonJS环境：require('react')
    commonjs2: 'react', // CommonJS2环境
    amd: 'react' // AMD环境
  },
  'react-dom': {
    root: ['react_and_react_dom', 'ReactDOM'], // 浏览器环境：window.react_and_react_dom.ReactDOM
    commonjs: 'react-dom',
    commonjs2: 'react-dom',
    amd: 'react-dom'
  }
}

如果你的库只需要适配浏览器UMD环境，也可以简化为数组形式的字符串：

externals: {
  'react': ['react_and_react_dom', 'React'],
  'react-dom': ['react_and_react_dom', 'ReactDOM']
}

这样Webpack就能正确识别，在浏览器中从window.react_and_react_dom上获取React和ReactDOM，同时在其他模块环境下正常解析对应的依赖包。

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