NextJs部署Vercel遇ESLint报错：无法加载compat插件

问题重现 #

部署到Vercel后部分页面无法运行，日志报错：

• error ESLint: Failed to load plugin 'compat' declared in '.eslintrc.json': Cannot find module 'eslint-plugin-compat' Require stack: - /vercel/path0/placeholder.js

本地运行正常，package.json中已包含eslint-plugin-compat依赖，尝试过移除ESLint配置、删除相关注释但未解决。

可行解决方案 #

• 确保依赖锁文件已提交
  删除本地的node_modules、package-lock.json（或yarn.lock），重新执行npm install（或yarn install），将生成的锁文件提交到代码仓库后重新部署。Vercel会严格按照锁文件安装依赖，避免版本不一致或缺失。

• 调整依赖类型
  将eslint-plugin-compat从dependencies移至devDependencies：

  "devDependencies": {
    // 其他开发依赖...
    "eslint-plugin-compat": "^4.1.4"
  }
  

  Vercel在构建Next.js项目时默认会安装devDependencies，ESLint属于开发阶段工具，放在devDependencies更合理，也能避免生产环境的不必要依赖。

• 清除Vercel构建缓存
  在Vercel控制台的项目部署页面，点击"Redeploy"并勾选"Clear build cache"选项，强制重新安装所有依赖并构建，避免缓存导致的依赖缺失。

• 检查ESLint配置正确性
  打开.eslintrc.json，确保plugins数组中正确声明了compat，无拼写错误：

  {
    "plugins": ["compat"]
  }
  

  可暂时注释掉ESLint中与compat相关的规则，确认是否是配置本身导致的加载失败。

• 强制安装指定依赖
  在Vercel项目的"Settings" -> "Build & Development Settings"中，修改构建命令为：

  npm install eslint-plugin-compat && npm run build
  

  强制在构建前单独安装该插件，确保依赖被正确加载。

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