Node 12升级至Node 18后npm install依赖冲突问题咨询

我的package.json依赖配置如下：

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-split-pane": "^0.1.92"

Node 12（npm 6）环境表现 #

环境配置：

$ node --version
v12.22.1
$ npm --version
6.14.12

执行npm install后，package-lock.json正常生成，npm ci无报错，但执行npm ls -a时提示peer依赖缺失：

npm ERR! peer dep missing: react@^16.0.0-0, required by react-split-pane@0.1.92
npm ERR! peer dep missing: react-dom@^16.0.0-0, required by react-split-pane@0.1.92

Node 18（npm 10）环境表现 #

环境配置：

$ node --version
v18.19.0
$ npm --version   
10.2.3

执行npm i直接失败，报错信息如下：

╰─$ npm i                   
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: sqlpad-front-end@6.6.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0-0" from react-split-pane@0.1.92
npm ERR! node_modules/react-split-pane
npm ERR!   react-split-pane@"^0.1.92" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /home/simha/.npm/_logs/2024-02-11T03_56_08_689Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /home/simha/.npm/_logs/2024-02-11T03_56_08_689Z-debug-0.log

当前正在从Node 12升级至Node 18，遇到上述问题：Node 12环境下仅提示peer依赖缺失但可正常安装，Node 18环境下直接安装失败，目前只能通过--force参数安装，希望找到更合适的解决方案。

1. 用--legacy-peer-deps替代--force #

npm从v7开始默认严格校验peer依赖，--legacy-peer-deps会切换到npm 6的处理逻辑，忽略peer依赖冲突，比--force更温和，不会强制覆盖现有依赖。执行命令：

npm install --legacy-peer-deps

也可以将该参数写入项目根目录的.npmrc文件，避免每次手动输入：

legacy-peer-deps=true

2. 升级react-split-pane到兼容React 17的版本 #

react-split-pane@0.1.92的peer依赖仅支持React 16，可查看该包的后续版本，确认是否有更新版本支持React 17/18。若有，直接修改package.json中的依赖版本：

"react-split-pane": "^最新兼容版本号"

之后执行npm install即可。

3. 替换为维护活跃的同类包 #

如果react-split-pane长期未更新，可考虑替换为支持React 17+的替代包，比如react-split（功能类似，维护更活跃）：

# 卸载旧包
npm uninstall react-split-pane
# 安装替代包
npm install react-split

替换后需调整代码中的导入和使用逻辑，适配新包的API。

4. 用overrides强制兼容（临时方案） #

若暂时无法升级或替换包，可利用npm 8.3+支持的overrides字段，强制react-split-pane使用项目中的React版本：

// 在package.json中添加
"overrides": {
  "react-split-pane": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

该方案会覆盖react-split-pane的peer依赖要求，让npm认为依赖兼容，但需自行测试组件在React 17下的运行情况。

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