Heroku部署Rails/React应用遇ERESOLVE依赖冲突求助

我在Rails/React应用中添加了几个React库，本地执行npm install --save --legacy-peer-deps能正常安装，但推送到Heroku时出现ERESOLVE依赖解析错误。错误显示react-spring-pop@1.3.2要求peer依赖react@^16.8.0，与当前使用的react@18.2.0冲突。本地node和npm版本已与package.json的engines字段匹配，推测是Heroku未启用--legacy-peer-deps导致此问题，以下是几种解决办法：

方案1：给Heroku配置npm安装参数 #

Heroku默认执行npm install时不带额外参数，我们可以通过设置环境变量让它强制启用--legacy-peer-deps：

• 直接在终端执行：heroku config:set NPM_CONFIG_LEGACY_PEER_DEPS=true
• 或者登录Heroku后台，找到对应应用的「设置」页面，添加环境变量NPM_CONFIG_LEGACY_PEER_DEPS，值设为true
• 重新推送代码，Heroku就会用新参数安装依赖

方案2：修改package.json的install脚本 #

直接在package.json里指定install命令的参数，让Heroku自动使用：
在scripts字段中添加install命令：

"scripts": {
  "install": "npm install --legacy-peer-deps",
  "build": "esbuild --bundle app/javascript/main.js --outfile=app/assets/javascripts/application.js",
  "watch": "esbuild --watch --bundle app/javascript/main.js --outfile=app/assets/javascripts/application.js"
}

保存后推送代码即可。

方案3：替换不兼容依赖（长期解决） #

react-spring-pop@1.3.2版本较旧，不支持React 18，长期来看建议替换为维护中的替代库，或者查看是否有社区维护的fork版本。如果必须使用这个库，也可以用npm-force-resolutions强制处理依赖：

1. 安装依赖：npm install npm-force-resolutions --save-dev
2. 在package.json根节点添加resolutions字段：

"resolutions": {
  "react-spring-pop/react": "^18.2.0"
}

3. 修改scripts中的preinstall命令：

"scripts": {
  "preinstall": "npx npm-force-resolutions",
  "build": "esbuild --bundle app/javascript/main.js --outfile=app/assets/javascripts/application.js",
  "watch": "esbuild --watch --bundle app/javascript/main.js --outfile=app/assets/javascripts/application.js"
}

之后推送代码到Heroku即可。

附错误日志 #

-----> Installing dependencies
remote:        Installing node modules
remote:        npm ERR! code ERESOLVE
remote:        npm ERR! ERESOLVE could not resolve
remote:        npm ERR! 
remote:        npm ERR! While resolving: react-spring-pop@1.3.2
remote:        npm ERR! Found: react@18.2.0
remote:        npm ERR! node_modules/react
remote:        npm ERR!   peer react@"16.8.x" from react-konva@16.8.6
remote:        npm ERR!   node_modules/react-konva
remote:        npm ERR!     peer react-konva@"^16.8.0  || ^17.0.0" from @react-spring/konva@9.5.2
remote:        npm ERR!     node_modules/@react-spring/konva
remote:        npm ERR!       @react-spring/konva@"~9.5.2" from react-spring@9.5.2
remote:        npm ERR!       node_modules/react-spring
remote:        npm ERR!         react-spring@"^9.5.2" from the root project
remote:        npm ERR! 
remote:        npm ERR! Could not resolve dependency:
remote:        npm ERR! peer react@"^16.8.0" from react-spring-pop@1.3.2
remote:        npm ERR! node_modules/react-spring-pop
remote:        npm ERR!   react-spring-pop@"^1.3.2" from the root project
remote:        npm ERR! 
remote:        npm ERR! Conflicting peer dependency: react@16.14.0
remote:        npm ERR! node_modules/react
remote:        npm ERR!   peer react@"^16.8.0" from react-spring-pop@1.3.2
remote:        npm ERR!   node_modules/react-spring-pop
remote:        npm ERR!     react-spring-pop@"^1.3.2" from the root project
remote:        npm ERR! 
remote:        npm ERR! Fix the upstream dependency conflict, or retry
remote:        npm ERR! this command with --force, or --legacy-peer-deps
remote:        npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
remote:        npm ERR! 
remote:        npm ERR! See FILE for a full report.
remote:        
remote:        npm ERR! A complete log of this run can be found in:
remote:        npm ERR!     LINK.log
remote: 
remote: -----> Build failed

附package.json内容 #

{
  "type": "module",
  "name": "NAME",
  "private": true,
  "dependencies": {
    "@hotwired/sxtimulus": "^3.1.0",
    "@hotwired/turbo-rails": "^7.1.3",
    "esbuild": "^0.14.54",
    "github-calendar": "^2.3.1",
    "node": "^18.7.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
    "react-spring": "^9.5.2",
    "react-spring-pop": "^1.3.2"
  },
  "engines": {
    "node": "18.7.0",
    "npm": "8.16.0"
  },
    "scripts": {
    "build": "esbuild --bundle app/javascript/main.js --outfile=app/assets/javascripts/application.js",
    "watch": "esbuild --watch --bundle app/javascript/main.js --outfile=app/assets/javascripts/application.js"
  }
}

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