React应用部署Cloudflare构建失败：npm ci依赖同步问题求助

问题详情 #

尝试将React应用部署到Cloudflare时，构建过程因npm ci失败终止，核心错误提示：

npm ci can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with npm install before continuing.
Invalid: lock file's typescript@5.2.2 does not satisfy typescript@4.9.5

完整构建日志：

2023-08-30T15:25:19.279068Z Cloning repository...
2023-08-30T15:25:20.326601Z From
https://github.com/aryangupta0001/notescloud
2023-08-30T15:25:20.327358Z  * branch            
be1f5be617d6762591f673e4d01a7551c55fd781 -> FETCH_HEAD
2023-08-30T15:25:20.3276Z   
2023-08-30T15:25:20.39101Z  HEAD is now at be1f5be fixeed dprecated 
resources
2023-08-30T15:25:20.391706Z 
2023-08-30T15:25:20.502942Z 
2023-08-30T15:25:20.536235Z Success: Finished cloning repository files
2023-08-30T15:25:21.246683Z Detected the following tools from environment: npm@9.5.1, nodejs@18.16.1
2023-08-30T15:25:21.247585Z Installing project dependencies: npm clean-
install --progress=false
2023-08-30T15:25:24.308063Z npm ERR! code EUSAGE
2023-08-30T15:25:24.31156Z  npm ERR! 
2023-08-30T15:25:24.311912Z npm ERR! `npm ci` can only install packages when 
your package.json and package-lock.json or npm-shrinkwrap.json are in sync. 
Please update your lock file with `npm install` before continuing.
2023-08-30T15:25:24.312126Z npm ERR! 
2023-08-30T15:25:24.312291Z npm ERR! Invalid: lock file's typescript@5.2.2 
does not satisfy typescript@4.9.5
2023-08-30T15:25:24.312429Z npm ERR! 
2023-08-30T15:25:24.312573Z npm ERR! Clean install a project
2023-08-30T15:25:24.312704Z npm ERR! 
2023-08-30T15:25:24.31284Z  npm ERR! Usage:
2023-08-30T15:25:24.312979Z npm ERR! npm ci
2023-08-30T15:25:24.313107Z npm ERR! 
2023-08-30T15:25:24.313231Z npm ERR! Options:
2023-08-30T15:25:24.313363Z npm ERR! [-S|--save|--no-save|--save-prod|--
save-dev|--save-optional|--save-peer|--save-bundle]
2023-08-30T15:25:24.313487Z npm ERR! [-E|--save-exact] [-g|--global]
2023-08-30T15:25:24.313636Z npm ERR! [--install-strategy 
<hoisted|nested|shallow|linked>] [--legacy-bundling]
2023-08-30T15:25:24.313783Z npm ERR! [--global-style] [--omit 
<dev|optional|peer> [--omit <dev|optional|peer> ...]]
2023-08-30T15:25:24.313911Z npm ERR! [--strict-peer-deps] [--no-package-
lock] [--foreground-scripts]
2023-08-30T15:25:24.31404Z  npm ERR! [--ignore-scripts] [--no-audit] [--no-
bin-links] [--no-fund] [--dry-run]
2023-08-30T15:25:24.314165Z npm ERR! [-w|--workspace <workspace-name> [-w|--
workspace <workspace-name> ...]]
2023-08-30T15:25:24.314288Z npm ERR! [-ws|--workspaces] [--include-
workspace-root] [--install-links]
2023-08-30T15:25:24.314413Z npm ERR! 
2023-08-30T15:25:24.314534Z npm ERR! aliases: clean-install, ic, install-
clean, isntall-clean
2023-08-30T15:25:24.315139Z npm ERR! 
2023-08-30T15:25:24.31528Z  npm ERR! Run "npm help ci" for more info
2023-08-30T15:25:24.315419Z 
2023-08-30T15:25:24.315582Z npm ERR! A complete log of this run can be found 
in:
2023-08-30T15:25:24.315742Z npm ERR!     /opt/buildhome/.npm/_logs/2023-08-
30T15_25_22_647Z-debug-0.log
2023-08-30T15:25:24.328956Z Error: Exit with error code: 1
2023-08-30T15:25:24.329299Z     at ChildProcess.<anonymous> 
(/snapshot/dist/run-build.js)
2023-08-30T15:25:24.32947Z      at Object.onceWrapper (node:events:652:26)
2023-08-30T15:25:24.329646Z     at ChildProcess.emit (node:events:537:28)
2023-08-30T15:25:24.329797Z     at ChildProcess._handle.onexit 
(node:internal/child_process:291:12)
2023-08-30T15:25:24.337693Z Failed: build command exited with code: 1
2023-08-30T15:25:25.239793Z Failed: error occurred while running build 
command

已尝试删除node_modules并执行npm install，但问题未解决。

解决方案 #

问题根源是package-lock.json里的typescript版本（5.2.2）和package.json中声明的版本（4.9.5）不匹配，而Cloudflare使用npm ci安装依赖——这个命令要求锁文件和package.json完全同步。按以下步骤彻底修复：

• 第一步：清理所有依赖相关文件
  执行以下命令删除旧的依赖和锁文件：

  # 删除node_modules文件夹
  rm -rf node_modules
  # 删除package-lock.json
  rm package-lock.json
  # 如果存在npm-shrinkwrap.json也一并删除
  rm npm-shrinkwrap.json
  

  Windows系统请用对应命令：

  rmdir /s /q node_modules
  del package-lock.json
  del npm-shrinkwrap.json
  

• 第二步：重新生成匹配的锁文件
  执行npm install，这会根据package.json中指定的版本重新安装依赖，并生成完全匹配的package-lock.json。

• 第三步：验证版本一致性
  检查package.json里typescript的版本是否为4.9.5，再打开package-lock.json搜索typescript，确认对应的版本和package.json一致。

• 第四步：提交更新后的锁文件到Git
  必须把新生成的package-lock.json推送到远程仓库，否则Cloudflare拉取的还是旧的锁文件：

  git add package-lock.json
  git commit -m "Update package-lock.json to match package.json dependencies"
  git push origin <你的分支名称>
  

• 第五步：重新触发Cloudflare构建
  登录Cloudflare Dashboard，找到你的应用项目，手动触发一次新的构建即可。

如果上述步骤仍无法解决，可以尝试在Cloudflare的构建配置中，将依赖安装命令从npm ci改为npm install——不过优先保证锁文件和package.json同步是更规范的做法。

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