如何在Turborepo Monorepo中使用不同React版本并避免冲突

问题分析 #

你当前的配置问题出在：

• resolutions中react: "17.0.2 || 18.2.0"的模糊版本规则会让包管理器自动选择满足条件的最高版本（即18.2.0），导致app-x被强制升级到React 18。
• 根目录overrides的写法不符合包管理器的路径匹配规则，无法精准约束单个应用的依赖版本。

以下是针对不同包管理器的可行解决方案，确保app-x、app-y各自使用指定的React版本，同时兼容UI组件包的依赖需求。

步骤1：调整根目录package.json的版本约束 #

根据你使用的包管理器，选择对应配置：

如果你用npm（版本≥8.3）

使用overrides的路径匹配语法，精准强制每个应用及其所有子依赖的React版本：

// root package.json
"overrides": {
  // 强制app-x及其依赖使用React 17
  "app-x>react": "17.0.2",
  "app-x>react-dom": "17.0.2",
  "app-x>@types/react": "<17.0.9",
  "app-x>@types/react-dom": "<17.0.6",
  // 强制app-y及其依赖使用React 18
  "app-y>react": "18.2.0",
  "app-y>react-dom": "18.2.0",
  "app-y>@types/react": "^18.0.0",
  "app-y>@types/react-dom": "^18.0.0",
  // 强制UI组件包使用React 17（匹配其开发依赖需求）
  "ui-package>react": "17.0.2",
  "ui-package>react-dom": "17.0.2"
}

如果你用Yarn Classic（v1）

使用resolutions的通配符匹配语法，约束每个应用的依赖树：

// root package.json
"resolutions": {
  "app-x/**/react": "17.0.2",
  "app-x/**/react-dom": "17.0.2",
  "app-x/**/@types/react": "<17.0.9",
  "app-x/**/@types/react-dom": "<17.0.6",
  "app-y/**/react": "18.2.0",
  "app-y/**/react-dom": "18.2.0",
  "app-y/**/@types/react": "^18.0.0",
  "app-y/**/@types/react-dom": "^18.0.0",
  "ui-package/**/react": "17.0.2",
  "ui-package/**/react-dom": "17.0.2"
}

步骤2：明确每个应用的package.json版本声明 #

确保每个应用自己的依赖文件里明确指定目标版本，避免包管理器自动解析歧义：

app-x/package.json

"dependencies": {
  "react": "17.0.2",
  "react-dom": "17.0.2"
},
"devDependencies": {
  "@types/react": "<17.0.9",
  "@types/react-dom": "<17.0.6"
}

app-y/package.json

"dependencies": {
  "react": "18.2.0",
  "react-dom": "18.2.0"
},
"devDependencies": {
  "@types/react": "^18.0.0",
  "@types/react-dom": "^18.0.0"
}

UI组件包/package.json

建议把React从devDependencies改为peerDependencies，让UI包兼容宿主应用的React版本（同时保留devDependencies用于本地开发）：

"peerDependencies": {
  "react": ">=17.0.2 <19.0.0",
  "react-dom": ">=17.0.2 <19.0.0"
},
"devDependencies": {
  "react": "17.0.2",
  "react-dom": "17.0.2"
}

步骤3：清理依赖并重新安装 #

1. 清除所有旧依赖和缓存：

   # 删除所有node_modules
   rm -rf node_modules apps/*/node_modules packages/*/node_modules
   # 清除包管理器缓存（二选一）
   npm cache clean --force  # npm用户
   yarn cache clean         # Yarn用户
   

2. 用Turborepo清理缓存：

   turbo clean
   

3. 重新安装依赖：

   npm install  # 或 yarn install
   

验证版本是否正确 #

进入对应应用目录，运行以下命令确认版本：

# 验证app-x的React版本
cd apps/app-x
npm list react  # 或 yarn list react
# 输出应显示 react@17.0.2

# 验证app-y的React版本
cd ../app-y
npm list react  # 或 yarn list react
# 输出应显示 react@18.2.0

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