如何在npm workspaces中并存多版本依赖（React 17/18）？

针对你在npm@10 workspaces monorepo中遇到的React版本冲突问题，以下是几个可落地的解决思路，核心是通过依赖隔离、配置调整实现库与网站的版本共存：

1. 利用workspaces.nohoist强制隔离指定依赖 #

npm workspaces默认会将依赖提升到根目录node_modules，这是冲突的根源。通过nohoist配置，可以指定让库保留自身的React 18依赖，不被提升，而网站继续使用根目录的React 17。

操作步骤： #

• 在根目录package.json中添加nohoist规则：

  {
    "workspaces": {
      "packages": ["libraries/*", "websites/*"],
      "nohoist": [
        "libraries/**/react",
        "libraries/**/react-dom",
        "libraries/**/@types/react",
        "libraries/**/@types/react-dom"
      ]
    }
  }
  

• 删除根目录及所有子包的node_modules、package-lock.json
• 执行npm install重新安装依赖

此时每个libraries/*包的node_modules中会单独存在React 18相关依赖，网站则会使用根目录的React 17，实现版本隔离。

2. 结合Peer Dependencies与Dev Dependencies规范依赖声明 #

既然你的库已经验证过可同时兼容React 17和18，可通过调整库的依赖声明，让npm自动处理版本适配，同时避免hoist冲突。

操作步骤： #

• 在每个库的package.json中配置：

  {
    "peerDependencies": {
      "react": ">=17.0.0 <19.0.0",
      "react-dom": ">=17.0.0 <19.0.0"
    },
    "devDependencies": {
      "react": "^18.2.0",
      "react-dom": "^18.2.0",
      "@types/react": "^18.2.0",
      "@types/react-dom": "^18.2.0"
    }
  }
  

• 在根目录package.json中安装React 17作为网站的基础依赖：

  {
    "dependencies": {
      "react": "^17.0.2",
      "react-dom": "^17.0.2",
      "@types/react": "^17.0.47",
      "@types/react-dom": "^17.0.17"
    }
  }
  

• 配合上述nohoist配置，确保库的Dev Dependencies中的React 18不被提升到根目录

这样库在开发构建时使用自身的React 18，网站运行时使用根目录的React 17，同时Peer Dependencies保证了库对两个版本的兼容性。

3. 调整TypeScript配置避免类型定义冲突 #

如果仍存在类型定义冲突，可在库的tsconfig.json中指定优先读取自身的类型文件：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "react": ["./node_modules/@types/react"],
      "react-dom": ["./node_modules/@types/react-dom"]
    }
  }
}

强制TypeScript使用库本地的React类型定义，而非根目录的版本。

注意事项 #

• 每次修改配置后，务必清理node_modules和锁文件，避免缓存导致的依赖异常
• 若遇到安装异常，可执行npm cache clean --force清理npm缓存后再重新安装

内容的提问来源于stack exchange，提问作者Mr. Hedgehog