webpack构建React公共组件库时如何排除React避免多副本冲突

• 版本范围不兼容：library的peerDependencies限制React版本为^16.14.0，但app1使用的React版本为17.0.2，同时app1引入的theme包自带React 16.14.0副本，触发多实例冲突
• webpack外置规则错误：你使用的nodeExternals是针对Node.js服务端打包的配置，不会正确剔除前端公共组件需要外置的React、ReactDOM依赖，导致打包产物依然包含React代码
• npm link解析优先级问题：本地link开发时，Node.js模块解析会优先加载library自身node_modules下的devDependency版本React，就算没有打进产物也会触发多实例报错

1. 对齐依赖版本 #

修改library/package.json的peerDependencies，放宽React版本适配范围：

{
  "peerDependencies": {
    "react": "^16.14.0 || ^17.0.0",
    "react-dom": "^16.13.1 || ^17.0.0",
    "react-scripts": "^3.4.1 || ^4.0.0"
  }
}

确认library的dependencies字段下无react、react-dom依赖，仅保留在peerDependencies和devDependencies中。

2. 修复webpack外置配置 #

替换library/webpack.config.js中的externals配置，明确剔除React相关依赖：

externals: {
  react: {
    commonjs: 'react',
    commonjs2: 'react',
    amd: 'react',
    root: 'React'
  },
  'react-dom': {
    commonjs: 'react-dom',
    commonjs2: 'react-dom',
    amd: 'react-dom',
    root: 'ReactDOM'
  }
},

删除原有的nodeExternals配置，该配置不适用于前端类库打包场景。

3. 强制app1解析自身的React依赖 #

在app1的webpack配置中新增resolve.alias规则，固定React的解析路径：

resolve: {
  alias: {
    'react': path.resolve(__dirname, './node_modules/react'),
    'react-dom': path.resolve(__dirname, './node_modules/react-dom')
  }
}

如果是使用create-react-app未eject的项目，可通过craco、react-app-rewired等工具修改该配置。

4. 清理冲突依赖 #

• 删除app1目录下的node_modules、package-lock.json/yarn.lock文件
• 重新执行npm install安装依赖，运行npm ls react确认无invalid报错
• 如果theme是可修改的自有包，也按照library的规则调整React为peerDependency，避免自带React副本

验证步骤 #

1. 重新打包library，打开dist目录下的产物文件，搜索React相关代码，确认无完整React源码被打入
2. 重新执行npm link ../library关联公共库
3. 重启app1开发服务，验证报错消失

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