Node.js+React应用本地正常，Heroku推送被拒求解决

问题背景 #

本地运行正常，但推送Heroku时构建失败，根源是react-paypal-button-v2@2.6.3仅支持React 0.14.6/15.x/16.x/17.x，而当前项目使用React 18.2.0，导致依赖解析失败。

Heroku推送错误日志 #

> NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-paypal-button-v2@2.6.3
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!   peer react@">=16.3.2" from @restart/context@2.1.4
npm ERR!   node_modules/@restart/context
npm ERR!     @restart/context@"^2.1.4" from react-bootstrap@1.6.6
npm ERR!     node_modules/react-bootstrap
npm ERR!       react-bootstrap@"^1.6.6" from the root project
npm ERR!   16 more (@restart/hooks, @testing-library/react, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.6 || 15.x.x || 16.x.x || 17.x.x" from react-paypal-button-v2@2.6.3
npm ERR! node_modules/react-paypal-button-v2
npm ERR!   react-paypal-button-v2@"^2.6.3" 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.6 || 15.x.x || 16.x.x || 17.x.x" from react-paypal-button-v2@2.6.3
npm ERR!   node_modules/react-paypal-button-v2
npm ERR!     react-paypal-button-v2@"^2.6.3" 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.1sG84/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.1sG84/_logs/2022-12-15T17_08_01_767Z-debug-0.log
-----> Build failed

前端package.json配置 #

{
  "name": "frontend",
  "proxy": "http://127.0.0.1:5000",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^1.2.1",
    "install": "^0.13.0",
    "react": "^18.2.0",
    "react-bootstrap": "^1.6.6",
    "react-dom": "^18.2.0",
    "react-helmet": "^6.1.0",
    "react-paypal-button-v2": "^2.6.3",
    "react-redux": "^8.0.5",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.3.4",
    "react-scripts": "^5.0.1",
    "redux": "^4.2.0",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "install-peers": "^1.0.4"
  }
}

后端package.json配置 #

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "type": "module",
  "engines": {
    "node": "17.x"
  },
  "scripts": {
    "start": "node backend/server",
    "server": "nodemon backend/server",
    "client": "npm start --prefix frontend",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "data:import": "node backend/seeder",
    "data:destroy": "node backend/seeder -d",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "colors": "^1.4.0",
    "dotenv": "^8.6.0",
    "express": "^4.18.2",
    "express-async-handler": "^1.2.0",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.13.15",
    "morgan": "^1.10.0",
    "multer": "^1.4.4"
  },
  "devDependencies": {
    "concurrently": "^5.3.0",
    "nodemon": "^2.0.20"
  }
}

解决方案 #

方案1：临时绕过peer依赖检查（快速部署） #

修改后端package.json的heroku-postbuild命令，添加--legacy-peer-deps参数，让npm忽略peer依赖冲突：

"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --legacy-peer-deps --prefix frontend && npm run build --prefix frontend"

或者在前端package.json中添加npm配置，全局启用legacy-peer-deps：

"npmConfig": {
  "legacy-peer-deps": true
}

注意：此方法可能存在潜在兼容性问题，但能快速完成部署，适合紧急上线场景。

方案2：降级React到17.x版本（彻底解决兼容） #

将前端的React版本降级到17.x，匹配react-paypal-button-v2的支持范围：

1. 修改前端package.json中的依赖版本：

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3"

2. 移除react-redux@8.0.5，替换为兼容React17的版本：

"react-redux": "^7.2.6"

3. 删除前端的node_modules和package-lock.json，重新安装依赖：

cd frontend
rm -rf node_modules package-lock.json
npm install

4. 推送代码到Heroku重新构建。

方案3：替换为支持React18的PayPal组件（长期方案） #

弃用不再维护的react-paypal-button-v2，改用官方支持React18的@paypal/react-paypal-js：

1. 卸载旧组件：

cd frontend
npm uninstall react-paypal-button-v2

2. 安装新组件：

npm install @paypal/react-paypal-js

3. 修改前端代码中的PayPal按钮实现，示例：

import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";

function PayPalPayment() {
  return (
    <PayPalScriptProvider options={{ "client-id": "你的PayPal客户端ID" }}>
      <PayPalButtons
        createOrder={(data, actions) => {
          return actions.order.create({
            purchase_units: [{ amount: { value: "10.00" } }]
          });
        }}
        onApprove={(data, actions) => {
          return actions.order.capture().then((details) => {
            alert(`交易完成，感谢 ${details.payer.name.given_name}`);
          });
        }}
      />
    </PayPalScriptProvider>
  );
}

export default PayPalPayment;

4. 推送代码到Heroku重新构建。

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