如何在npm工作区中实现不同版本React的共存？

核心思路：禁用React相关依赖的自动提升 #

npm工作区默认会把相同依赖的兼容版本提升到根目录node_modules，这正是导致React版本冲突的根源——React Hooks要求全局只能存在一个React实例。我们需要强制让每个子包保留自己的React版本，不被根目录的提升机制影响。

方法1：精准配置nohoist（推荐） #

在根目录的package.json中修改workspaces配置，明确指定不提升react和react-dom：

{
  "workspaces": {
    "packages": ["packages/*"],
    "nohoist": ["**/react", "**/react-dom"]
  }
}

这个配置会告诉npm：所有子包中的react和react-dom都不要提升到根目录，每个子包单独安装自己指定的版本。

方法2：全局关闭依赖提升（极端场景） #

如果单独nohoist某个依赖不生效，可以直接在根package.json中关闭全局依赖提升：

{
  "installConfig": {
    "hoisting": false
  }
}

这种方式会让所有依赖都安装在各自子包的node_modules里，彻底避免提升冲突，但会增加磁盘占用和安装时间，适合依赖冲突特别复杂的场景。

验证与收尾步骤 #

1. 删除所有子包和根目录的node_modules文件夹，以及根目录的package-lock.json
2. 在根目录执行npm install
3. 检查目录结构：
   • packages/a/node_modules需包含react@17和react-dom@17
   • packages/b/node_modules需包含react@18和react-dom@18
   • 根目录node_modules中不应出现react或react-dom

针对Create React App项目的额外调整 #

如果子包是create-react-app生成的项目，默认webpack配置可能会优先查找根目录的node_modules，需修正解析顺序：

1. 安装react-app-rewired工具
2. 在子包根目录创建config-overrides.js，添加以下内容：

const path = require('path');

module.exports = function override(config) {
  config.resolve.modules = [
    path.resolve(__dirname, 'node_modules'),
    ...config.resolve.modules
  ];
  return config;
};

确保webpack优先解析当前子包内的node_modules，使用本地安装的React版本。

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