Heroku部署React应用失败：package.json未指定Node版本及依赖安装报错排查

从你的Heroku构建日志和package.json来看，问题主要出在两个核心点：Node版本配置位置错误和跨平台依赖fsevents的兼容性冲突，下面一步步帮你解决：

1. Node版本未被Heroku正确识别 #

你把"node": "16.x"写在了package.json的dependencies字段里，但Heroku识别Node版本的正确位置是engines字段，而非依赖列表。这直接导致Heroku自动使用了默认的14.x版本，和你本地开发的16.x版本不一致，进而引发依赖安装的兼容性问题。

修复步骤： #

修改package.json，将Node版本配置移到engines字段中，同时可以指定npm版本进一步规避版本差异问题：

{ 
  "name": "portfolio", 
  "version": "0.1.0", 
  "private": true,
  "engines": {
    "node": "16.x",
    "npm": "8.x" // 可选，但指定npm版本能减少版本差异带来的潜在问题
  },
  "dependencies": { 
    "@testing-library/jest-dom": "^5.11.6", 
    "@testing-library/react": "^11.2.2", 
    "@testing-library/user-event": "^12.6.0", 
    "axios": "^0.21.1", 
    "bootstrap": "^4.5.3", 
    "react": "^17.0.1", 
    "react-bootstrap": "^1.4.0", 
    "react-dom": "^17.0.1", 
    "react-github-calendar": "^2.0.2", 
    "react-icons": "^4.2.0", 
    "react-parallax-tilt": "^1.4.68", 
    "react-particles-js": "^3.4.1", 
    "react-pdf": "^5.4.0", 
    "react-router-dom": "^5.2.0", 
    "react-scripts": "4.0.1", 
    "typewriter-effect": "^2.17.0", 
    "web-vitals": "^0.2.4" 
  } 
}

2. fsevents跨平台依赖报错 #

日志里的npm ERR! bindings not accessible from watchpack-chokidar2:fsevents错误，是因为fsevents是仅适配macOS的文件系统监听依赖，而Heroku运行在Linux环境下，安装该依赖时会出现兼容性冲突。

修复步骤： #

你可以选择以下两种方式解决：

• 方式一：标记fsevents为可选依赖
  在package.json中添加optionalDependencies字段，把fsevents放入其中，这样npm在非macOS环境下会自动跳过这个依赖的安装错误：

"optionalDependencies": {
  "fsevents": "^2.3.2" // 版本号匹配你项目中实际的fsevents版本即可
}

• 方式二：重新生成依赖锁文件
  删除本地的node_modules文件夹和package-lock.json文件，然后运行npm install重新生成依赖锁文件，确保锁文件记录的依赖完全适配你本地的Node版本，推送到Heroku后就能正确安装。

最后部署 #

完成上述修改后，执行以下命令重新部署：

git add .
git commit -m "Fix Heroku deployment issues: correct Node version and handle fsevents compatibility"
git push heroku main

这样Heroku会使用和你本地一致的Node版本，同时也不会因为fsevents的跨平台问题报错，应该就能顺利完成构建了。

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