React应用部署Heroku遇peer依赖冲突问题求解决方案

本地运行无异常的React应用，部署至Heroku时出现peer依赖冲突，尝试过npm install peer deps、清理缓存、更换依赖版本等方法均未解决。

Heroku部署报错信息 #

-----> Installing binaries
   engines.node (package.json):  >=16.15.1

   engines.npm (package.json):   >=8.11.0

   
   Resolving node version >=16.15.1...

   Downloading and installing node 18.7.0...

   Bootstrapping npm >=8.11.0 (replacing 8.15.0)...

   npm 8.18.0 installed

   
-----> Installing dependencies
   Installing node modules

   npm ERR! code ERESOLVE

   npm ERR! ERESOLVE could not resolve

   npm ERR! 

   npm ERR! While resolving: react-dropdown@1.10.0

   npm ERR! Found: react@18.2.0

   npm ERR! node_modules/react

   npm ERR!   react@"^18.0.0" from the root project

   npm ERR!   peer react@">=17.0.2" from @devexpress/dx-react-core@3.0.4

   npm ERR!   node_modules/@devexpress/dx-react-core

   npm ERR!     @devexpress/dx-react-core@"^3.0.4" from the root project

   npm ERR!     peer @devexpress/dx-react-core@"3.0.4" from @devexpress/dx-react-scheduler@3.0.4

   npm ERR!     node_modules/@devexpress/dx-react-scheduler

   npm ERR!       @devexpress/dx-react-scheduler@"^3.0.4" from the root project

   npm ERR!       1 more (@devexpress/dx-react-scheduler-material-ui)

   npm ERR!     1 more (@devexpress/dx-react-scheduler-material-ui)

   npm ERR!   34 more (@devexpress/dx-react-scheduler, ...)

   npm ERR! 

   npm ERR! Could not resolve dependency:

   npm ERR! peer react@"^0.14.7 || ^15.0.0-0 || ^16.0.0 || ^17.0.0" from react-dropdown@1.10.0

   npm ERR! node_modules/react-dropdown

   npm ERR!   react-dropdown@"^1.10.0" from the root project

   npm ERR! 

   npm ERR! Conflicting peer dependency: react@17.0.2

   npm ERR! node_modules/react

   npm ERR!   peer react@"^0.14.7 || ^15.0.0-0 || ^16.0.0 || ^17.0.0" from react-dropdown@1.10.0

   npm ERR!   node_modules/react-dropdown

   npm ERR!     react-dropdown@"^1.10.0" 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! See /tmp/npmcache.a96D7/eresolve-report.txt for a full report.

   
   npm ERR! A complete log of this run can be found in:

   npm ERR!     /tmp/npmcache.a96D7/_logs/2022-08-20T01_29_57_818Z-debug-0.log
-----> Build failed

package.json关键配置 #

"engines": {
    "npm": ">=8.11.0",
    "node": ">=16.15.1"
  },
  "private": true,
  "dependencies": {
    "@devexpress/dx-core": "^3.0.4",
    "@devexpress/dx-react-core": "^3.0.4",
    "@devexpress/dx-react-scheduler": "^3.0.4",
    "@devexpress/dx-react-scheduler-material-ui": "^3.0.4",
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@fortawesome/fontawesome-svg-core": "^6.1.2",
    "@fortawesome/free-brands-svg-icons": "^6.1.2",
    "@fortawesome/free-regular-svg-icons": "^6.1.2",
    "@fortawesome/free-solid-svg-icons": "^6.1.2",
    "@fortawesome/react-fontawesome": "^0.2.0", 
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.10.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^14.4.3",
    "@types/jest": "^28.1.7",
    "@types/node": "^18.7.7",
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "babel": "^6.23.0",
    "bootstrap": "^5.2.0",
    "express": "^4.18.1",
    "node-sass": "^7.0.1",
    "prettier": "^2.7.1",
    "prettierrc": "^0.0.0",
    "react": "^18.0.0",
    "react-bootstrap": "^2.5.0",
    "react-countdown": "^2.3.2",
    "react-dark-mode-toggle": "^0.2.0",
    "react-dom": "^18.0.0",
    "react-dropdown": "^1.10.0",
    "react-media-hook": "^0.4.9",
    "react-responsive": "^9.0.0-beta.10",
    "react-reveal": "^1.2.2",
    "react-router-dom": "^6.3.0",
    "react-router-hash-link": "^2.4.3",
    "react-scripts": "5.0.1",
    "react-typed": "^1.2.0",
    "styled-components": "^5.3.5",
    "typed.js": "^2.0.12",
    "typescript": "^4.7.4",
    "use-dark-mode": "^2.3.1",
    "web-vitals": "^2.1.4"
  }

解决思路 #

• 替换过时依赖：react-dropdown@1.10.0已停止维护，仅支持React 0.14/15/16/17，建议替换为支持React 18的下拉组件（如react-select或@mui/material/Select），移除旧组件后测试功能正常再重新部署。
• 临时兼容方案：若暂时不想替换组件，可在Heroku构建时启用--legacy-peer-deps模式。修改package.json的scripts，将install命令改为npm install --legacy-peer-deps；或在Heroku控制台设置环境变量NPM_CONFIG_LEGACY_PEER_DEPS=true。
• 锁定依赖版本：确保本地生成的package-lock.json已提交至Git仓库，Heroku会优先根据lock文件安装依赖，避免版本解析差异导致的冲突。
• 降级React版本：将react和react-dom版本降级至^17.0.2，同时确认其他依赖均支持React 17，此为妥协方案，不推荐长期使用。

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