部署至Google Cloud时出现Cannot find module react-refresh/runtime.js错误求助

从你的依赖树能看出核心问题是react-refresh版本冲突：react-scripts@5.0.1依赖0.11.0版本，其他包（如react-native、@pmmmwh/react-refresh-webpack-plugin）依赖0.14.0版本，本地Windows环境的依赖解析逻辑和Google Cloud部署环境存在差异，导致找不到对应模块。以下是可落地的解决办法：

方案1：强制统一react-refresh版本到0.11.0 #

react-scripts@5.0.1官方适配的是react-refresh@0.11.0，直接在package.json中添加版本锁定：

"overrides": {
  "react-refresh": "0.11.0"
}

执行以下命令重新安装依赖：

rm -rf node_modules package-lock.json
npm install

这个操作会强制所有依赖都使用0.11.0版本，消除版本冲突。

方案2：确保部署的是生产构建产物 #

react-refresh是开发环境热重载工具，生产环境打包时会自动剔除。检查你的Google Cloud部署流程：

• 必须先在本地或部署环境执行npm run build生成生产构建包
• 部署时只上传build目录下的内容，而非整个项目源码
  如果直接部署源码并实时构建，可能误启用了开发环境配置，导致打包时包含react-refresh依赖。

方案3：对齐本地与部署环境的npm版本 #

不同npm版本的依赖解析逻辑可能不同，导致本地和云端的node_modules结构不一致：

1. 在本地执行npm -v查看当前版本
2. 在Google Cloud的部署脚本中先安装对应版本的npm：

npm install -g npm@<你的本地npm版本号>
rm -rf node_modules package-lock.json
npm install

方案4：清理部署环境缓存 #

云端可能存在旧依赖缓存，执行以下命令彻底清理后重新安装：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

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