Vercel部署React项目报错：无法解析'react'模块

针对你在Vercel部署React项目时遇到的模块找不到问题，按以下步骤排查解决：

1. 检查package.json依赖配置 #

确保react和react-dom被添加到dependencies字段中，而非devDependencies。生产环境构建需要这两个包作为核心依赖，若放在devDependencies中可能导致Vercel构建时无法正确引入。

示例正确配置：

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  }
}

2. 本地验证构建流程 #

在本地执行以下命令，确认项目本身能正常构建：

rm -rf node_modules package-lock.json
npm install
npm run build

如果本地构建失败，说明项目本身存在依赖问题，先解决本地问题再重新推送代码；如果本地构建成功，继续下一步。

3. 强制Vercel重新安装依赖 #

Vercel可能存在依赖缓存问题，可通过修改部署命令强制清理并重装：

• 进入Vercel项目的「Settings」→「Build & Development Settings」
• 将「Install Command」改为：npm install --force
• 将「Build Command」改为：rm -rf node_modules && npm install && npm run build
• 触发重新部署，观察构建日志是否正常。

4. 确认仓库提交文件 #

检查远程仓库是否已提交package-lock.json文件，该文件锁定了依赖版本，缺失会导致Vercel每次安装的依赖版本不一致，引发潜在问题。若未提交，执行以下命令后推送：

git add package-lock.json
git commit -m "Add package-lock.json"
git push origin main

补充：日志细节分析 #

从你的构建日志来看，npm已安装1470个包，但仍找不到react，大概率是依赖未被正确安装到生产环境目录，或package.json配置有误。按上述步骤逐一排查即可解决。

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