Vercel部署Remix应用失败：无法解析react等依赖求助

以下是针对你遇到的依赖解析错误的具体排查和解决步骤：

• 检查依赖在package.json中的位置
  核心依赖如react、react-dom、@remix-run/react、google-map-react必须放在dependencies字段下，不能在devDependencies里。Vercel生产构建时只会安装dependencies中的包，如果这些依赖被误放，就会出现解析失败。打开你的package.json确认位置，把错放的依赖移到正确字段后重新提交代码。

• 配置Vercel构建参数
  在Vercel项目的「Build & Development Settings」中，确保：

  • Build Command设置为remix build（Remix v2+版本可直接用这个，旧版本可能需要npx remix build）
  • Output Directory设置为.vercel/output（Remix v2的默认输出目录，旧版本可能是public/build）
    也可以在项目根目录创建vercel.json手动配置，内容如下：

  {
    "buildCommand": "remix build",
    "outputDirectory": ".vercel/output",
    "installCommand": "npm install"
  }
  

• 清除Vercel构建缓存
  Vercel的缓存可能导致依赖未正确更新。进入Vercel的部署详情页，点击「Redeploy」，勾选「Clear build cache」后重新部署，强制Vercel重新安装所有依赖。

• 对齐Node.js版本
  本地和Vercel使用的Node.js版本不一致可能引发依赖问题。在项目根目录创建.nvmrc文件，写入你本地使用的Node版本（比如v18.17.0），Vercel会自动读取并使用对应版本运行构建。

• 确认依赖安装完整性
  本地执行npm install后，检查node_modules目录下是否存在google-map-react等报错依赖。如果本地存在但Vercel部署时缺失，大概率是缓存问题，按照上面的清除缓存步骤重试即可。

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