通过GitHub部署React应用到Heroku时出现npm ci依赖同步错误

问题核心 #

部署失败的原因是Heroku默认使用npm ci安装依赖，该命令要求package.json与package-lock.json的依赖版本完全同步，但当前两者存在多处不匹配：

• lock文件中的ajv@6.12.6不符合package.json要求的ajv@8.11.0
• lock文件中的json-schema-traverse@0.4.1不符合要求的json-schema-traverse@1.0.0
• typescript@4.8.4、ajv-keywords@3.5.2等多个依赖在lock文件中缺失

解决步骤 #

1. 本地同步依赖锁文件
   • 删除旧的锁文件：

     rm package-lock.json
     

   • 重新安装依赖，生成与package.json完全匹配的新锁文件：

     npm install
     

2. 提交更新到GitHub
   • 将新锁文件加入版本控制：

     git add package-lock.json
     

   • 提交修改：

     git commit -m "同步package-lock.json与package.json依赖版本"
     

   • 推送到远程仓库：

     git push origin <你的分支名称>
     

3. 重新触发Heroku部署
   推送完成后，Heroku会自动启动重新构建流程；若未自动触发，可在Heroku控制台手动启动部署。

补充说明 #

npm ci是严格模式的依赖安装命令，会完全按照lock文件的版本安装依赖，不允许任何版本偏差。这类问题通常是本地修改了package.json的依赖版本但未重新生成锁文件，或是锁文件被手动编辑导致的，保持两者同步即可避免此类错误。

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