npm install遇react-typical依赖冲突致Heroku构建失败，求解决方案

执行npm install时遇到如下peer依赖冲突，导致Heroku构建失败，已尝试npm config set legacy-peer-deps true + npm i但问题未解决：

错误信息 #

npm ERR! While resolving: react-typical@0.1.3
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!   peer react@">=16.x" from @fortawesome/react-fontawesome@0.1.14
npm ERR!   node_modules/@fortawesome/react-fontawesome
npm ERR!     @fortawesome/react-fontawesome@"^0.1.14" from the root project
npm ERR!   4 more (@testing-library/react, react-dom, react-scripts, react-toastify)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.0.0 || ^16.0.0" from react-typical@0.1.3
npm ERR! node_modules/react-typical
npm ERR!   react-typical@"^0.1.3" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@16.14.0
npm ERR! node_modules/react
npm ERR!   peer react@"^15.0.0 || ^16.0.0" from react-typical@0.1.3
npm ERR!   node_modules/react-typical
npm ERR!     react-typical@"^0.1.3" from the root project

项目package.json内容 #

{
  "name": "client",
  "proxy": "http://localhost:8080/",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-regular-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-owl-carousel": "^2.3.3",
    "react-scripts": "4.0.3",
    "react-toastify": "^7.0.4",
    "react-typical": "^0.1.3",
    "rxjs": "^7.2.0",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

解决办法 #

方案1：替换react-typical为兼容React 17的替代库 #

react-typical版本停留在0.1.3，长期未维护，仅支持React 15/16。推荐使用react-type-animation，它API类似且支持React 17+：

• 卸载旧依赖：npm uninstall react-typical
• 安装替代库：npm install react-type-animation
• 替换代码中的引用：把import Typical from 'react-typical'改成import { TypeAnimation } from 'react-type-animation'，并调整组件用法（示例：<TypeAnimation sequence={['Hello', 1000, 'World', 1000]} wrapper="span" repeat={Infinity} />）

方案2：在Heroku构建时强制启用legacy peer依赖 #

本地设置legacy-peer-deps不会同步到Heroku，需在构建流程中显式设置：

• 修改package.json的build脚本：

  "scripts": {
    "start": "react-scripts start",
    "build": "NPM_CONFIG_LEGACY_PEER_DEPS=true react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  

• 提交修改后重新部署到Heroku，构建时会自动忽略peer依赖冲突

方案3：降级React到16.x版本 #

如果必须保留react-typical，可将React降级到兼容的16.14.0版本：

• 修改package.json中react和react-dom的版本：

  "react": "^16.14.0",
  "react-dom": "^16.14.0"
  

• 删除node_modules和package-lock.json：rm -rf node_modules package-lock.json
• 重新安装依赖：npm install
• 测试本地运行正常后部署到Heroku

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