如何在PNPM Monorepo结构中使用多版本React？

针对你遇到的不同子包依赖不同React版本、shared包导致类型错误的问题，给你几个具体的解决步骤：

1. 调整shared包的依赖配置 #

把shared包中react和@types/react从dependencies/devDependencies移到peerDependencies，并设置兼容17和18的版本范围：

// packages/shared/package.json
{
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0",
    "@types/react": "^17.0.0 || ^18.0.0"
  },
  "peerDependenciesMeta": {
    "react": {
      "optional": false
    },
    "@types/react": {
      "optional": false
    }
  }
}

这样shared不会自带React，而是直接使用消费它的子包（app1/app2/app3）提供的React版本，从根源避免版本冲突。

2. 明确各子包的React版本 #

在每个子包的package.json中指定明确的React版本：

• app1/app2的package.json：

  "dependencies": {
    "react": "^18.2.0",
    "@types/react": "^18.2.0"
  }
  

• app3的package.json：

  "dependencies": {
    "react": "^17.0.2",
    "@types/react": "^17.0.60"
  }
  

3. 修复app3的类型错误 #

app3导入shared组件时的类型错误，是因为TypeScript可能优先使用shared包关联的高版本React类型。在app3的tsconfig.json中添加路径映射，强制使用本地的React类型：

// packages/app3/tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "react": ["./node_modules/@types/react"],
      "@types/react": ["./node_modules/@types/react"]
    }
  }
}

这样TypeScript会优先加载app3自己安装的@types/react@17.x，而不是从shared包继承的高版本类型。

4. 用PNPM的子包级覆盖强制版本（可选） #

如果需要确保app3及其依赖完全使用React 17，可在根目录package.json中配置pnpm.overrides，针对app3单独设置：

// root/package.json
{
  "pnpm": {
    "overrides": {
      "app3>react": "^17.0.2",
      "app3>@types/react": "^17.0.60"
    }
  }
}

这个配置只会作用于app3及其内部依赖，不会影响其他子包。

验证依赖结构 #

执行pnpm ls react命令，分别在根目录和各子包目录下查看，确认：

• app1/app2的依赖树中是React 18
• app3的依赖树中是React 17
• shared包没有单独安装React，而是依赖对应子包的版本

内容的提问来源于stack exchange，提问作者curious.curie