React项目执行npm install遇版本兼容性错误求助

问题描述 #

我按照BLK Design System React的教程搭建React网站模板，执行npm install时出现版本冲突错误，具体报错信息如下：

npm WARN ERESOLVE 覆盖对等依赖
npm WARN 解析时：mini-create-react-context@0.4.1
npm WARN 已找到：react@18.2.0
npm WARN node_modules/react
npm WARN react@"18.2.0" 来自根项目
npm WARN 另有8个依赖（@hypnosphi/create-react-context 等）依赖此版本

npm WARN 无法解析依赖：
npm WARN mini-create-react-context@0.4.1 的对等依赖要求 react@"^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
npm WARN node_modules/mini-create-react-context
npm WARN mini-create-react-context@"^0.4.0" 来自 react-router@5.2.0
npm WARN node_modules/react-router

npm WARN 冲突的对等依赖：react@17.0.2
npm WARN node_modules/react
npm WARN mini-create-react-context@0.4.1 的对等依赖要求 react@"^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
npm WARN node_modules/mini-create-react-context
npm WARN mini-create-react-context@"^0.4.0" 来自 react-router@5.2.0
npm WARN node_modules/react-router

npm ERR! 代码 ERESOLVE
npm ERR! ERESOLVE 无法解析依赖

npm ERR! 解析时：react-chartjs-2@2.11.1
npm ERR! 已找到：react@18.2.0
npm ERR! node_modules/react
npm ERR! react@"18.2.0" 来自根项目
npm ERR! @hypnosphi/create-react-context@0.3.1 的对等依赖要求 react@">=0.14.0"
npm ERR! node_modules/@hypnosphi/create-react-context
npm ERR! @hypnosphi/create-react-context@"^0.3.1" 来自 react-popper@1.3.11
npm ERR! node_modules/react-popper
npm ERR! react-popper@"^1.3.6" 来自 reactstrap@8.7.1
npm ERR! node_modules/reactstrap
npm ERR! reactstrap@"8.7.1" 来自根项目
npm ERR! 另有7个依赖（@testing-library/react、react-dom、react-router 等）依赖此版本

npm ERR! 无法解析依赖：
npm ERR! react-chartjs-2@2.11.1 的对等依赖要求 react@"^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
npm ERR! node_modules/react-chartjs-2
npm ERR! react-chartjs-2@"2.11.1" 来自根项目

npm ERR! 冲突的对等依赖：react@17.0.2
npm ERR! node_modules/react
npm ERR! react-chartjs-2@2.11.1 的对等依赖要求 react@"^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
npm ERR! node_modules/react-chartjs-2
npm ERR! react-chartjs-2@"2.11.1" 来自根项目

npm ERR! 请修复上游依赖冲突，或使用 --force 或 --legacy-peer-deps 参数重试命令
npm ERR! 以接受一个不正确（可能会导致运行异常）的依赖解析结果。

解决方案 #

方法一：使用legacy-peer-deps参数快速安装 #

npm v7及以上版本默认严格校验对等依赖，--legacy-peer-deps参数会回退到v6的宽松校验模式，跳过冲突检查：

npm install --legacy-peer-deps

方法二：降级React到17.x版本（更稳妥） #

1. 修改项目根目录的package.json，将react和react-dom版本改为17.x：

{
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

2. 删除旧依赖文件后重新安装：

rm -rf node_modules package-lock.json
npm install

方法三：升级冲突依赖包（长期方案） #

检查冲突依赖的新版本是否支持React 18：

• react-chartjs-2 v3+已支持React 18，升级到兼容版本：

  npm install react-chartjs-2@latest
  

• react-router v6+已移除对mini-create-react-context的依赖，升级到最新版：

  npm install react-router-dom@latest
  

升级完成后重新执行npm install即可。

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