同一应用内react-dom同时加载开发和生产版本的原因是什么？

双React-DOM模块加载的常见原因 #

• 依赖源混用：Meteor同时支持Atmosphere官方包源和npm包源，若部分依赖从Atmosphere拉取React相关包，另一部分从npm拉取不同版本的react-dom，会导致两份构建产物同时被打包。
• 版本依赖冲突：项目中存在多个依赖声明了不同版本的react-dom，包管理器无法做版本归并时会同时引入多份实例，其中旧版本的依赖可能默认携带开发构建产物。
• 第三方包硬编码引入：部分未做生产构建优化的第三方React组件，会直接硬编码引入react-dom的开发版本文件，不受Meteor生产构建的环境变量控制。
• 官方集成包版本过旧：低于2.4版本的react-meteor-data等Meteor官方React集成包存在已知问题，会在生产构建中误引入开发版的React依赖。

排查方案 #

1. 执行命令查看npm依赖树，定位所有依赖react-dom的包，确认是否存在多版本冲突：

npm ls react-dom

2. 执行命令查看Atmosphere包列表，核对React相关的Atmosphere包版本与npm安装的react/react-dom版本是否一致：

meteor list | grep react

3. 若确认存在版本冲突，可在package.json中通过overrides（npm 8.3及以上版本）配置强制所有依赖使用同版本react和react-dom：

{
  "overrides": {
    "react": "你的项目使用的React版本号",
    "react-dom": "你的项目使用的React-DOM版本号"
  }
}

4. 若排查发现是第三方组件硬编码引入开发版React-DOM，可替换为官方正规发布的组件包，或自行对该组件做生产构建后再引入项目。

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