React应用部署Heroku失败：依赖安装冲突问题求助

尝试用git push heroku --force将React应用部署到Heroku，始终在依赖安装阶段报错，核心问题是peer依赖冲突：react-card-flip@1.1.5要求peer依赖react@^17.0.1，但当前项目使用的是react@18.2.0。

构建日志 #

Enumerating objects: 859, done.
Counting objects: 100% (859/859), done.
Delta compression using up to 4 threads
Compressing objects: 100% (349/349), done.
Writing objects: 100% (859/859), 1.35 MiB | 652.00 KiB/s, done.
Total 859 (delta 479), reused 832 (delta 463), pack-reused 0
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Building on the Heroku-22 stack
remote: -----> Using buildpack: heroku/nodejs
remote: -----> Node.js app detected
remote:        
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        
remote: -----> Installing binaries
remote:        engines.node (package.json):  17.9.0
remote:        engines.npm (package.json):   8.5.5
remote:        
remote:        Resolving node version 17.9.0...
remote:        Downloading and installing node 17.9.0...
remote:        npm 8.5.5 already installed with node
remote:        
remote: -----> Restoring cache
remote:        Cached directories were not restored due to a change in version of node, npm, yarn or stack
remote:        Module installation may take longer for this build
remote:        
remote: -----> Installing dependencies
remote:        Installing node modules (package.json)
remote:        
remote:        > it-project-gekko@1.0.0 install
remote:        > cd client && npm install && cd ../server && npm install
remote:        
remote:        npm ERR! code ERESOLVE
remote:        npm ERR! ERESOLVE unable to resolve dependency tree
remote:        npm ERR! 
remote:        npm ERR! While resolving: client@0.1.0
remote:        npm ERR! Found: react@18.2.0
remote:        npm ERR! node_modules/react
remote:        npm ERR!   react@"^18.2.0" from the root project
remote:        npm ERR! 
remote:        npm ERR! Could not resolve dependency:
remote:        npm ERR! peer react@"^17.0.1" from react-card-flip@1.1.5
remote:        npm ERR! node_modules/react-card-flip
remote:        npm ERR!   react-card-flip@"^1.1.5" 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 /tmp/npmcache.4IXqU/eresolve-report.txt for a full report.
remote:        
remote:        npm ERR! A complete log of this run can be found in:
remote:        npm ERR!     /tmp/npmcache.4IXqU/_logs/2022-09-24T14_19_38_390Z-debug-0.log
remote:        npm ERR! code 1
remote:        npm ERR! path /tmp/build_d873d808
remote:        npm ERR! command failed
remote:        npm ERR! command sh -c cd client && npm install && cd ../server && npm install
remote:        
remote:        npm ERR! A complete log of this run can be found in:
remote:        npm ERR!     /tmp/npmcache.4IXqU/_logs/2022-09-24T14_19_22_510Z-debug-0.log
remote: 
remote: -----> Build failed
remote:        
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:        
remote:        If you're stuck, please submit a ticket so we can help:
remote:        https://help.heroku.com/
remote:        
remote:        Love,
remote:        Heroku

项目根目录package.json配置 #

{
  "name": "it-project-gekko",
  "version": "1.0.0",
  "description": "To run locally (tobe updated):",
  "main": "server/app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
    "start:prod": "cd server && npm run start",
    "start:dev": "concurrently \"npm run server\" \"npm run client\" -k",
    "client": "cd client && npm run start",
    "server": "cd server && npm run dev",
    "install": "cd client && npm install && cd ../server && npm install",
    "build": "cd client && npm run build"
  },
  "engines": {
    "node": "17.9.0",
    "npm": "8.5.5"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/lequangtri20/it-project-gekko.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/lequangtri20/it-project-gekko/issues"
  },
  "homepage": "https://github.com/lequangtri20/it-project-gekko#readme",
  "dependencies": {
    "axios": "^0.27.2",
    "concurrently": "^7.3.0",
    "if-env": "^1.0.4",
    "styled-components": "^5.3.5"
  },
  "devDependencies": {
    "eslint": "^8.22.0",
    "eslint-plugin-react": "^7.30.1"
  }
}

已尝试操作 #

在根目录package.json中添加了engines字段指定Node和npm版本（与本地一致），但未解决问题。

解决方案建议 #

1. 升级react-card-flip到兼容React 18的版本 #

检查react-card-flip的最新版本，若已有支持React 18的版本，修改client/package.json中的依赖版本为对应兼容版本，执行cd client && npm install后重新部署。

2. 修改安装脚本，添加--legacy-peer-deps参数 #

将根目录package.json中的install脚本修改为：

"install": "cd client && npm install --legacy-peer-deps && cd ../server && npm install"

该参数会让npm忽略peer依赖冲突，强制完成安装（注意可能存在潜在兼容性问题，需测试应用功能）。

3. 降级React版本到17.x #

若不想升级react-card-flip，可将client/package.json中的react和react-dom版本降级为^17.0.1，执行cd client && npm install后重新部署。

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