Vercel部署React应用时遭遇ESLint React插件冲突问题求助

冲突原因 #

Create React App的react-scripts内置了eslint-config-react-app配置，该配置已经集成了eslint-plugin-react的规则集。而你的本地.eslintrc.json中又单独引入了plugin:react/recommended，两者对react插件的配置产生冲突，导致Vercel构建失败。

解决方案 #

方案1：统一使用react-app的ESLint配置 #

修改你的.eslintrc.json，将extends字段改为以react-app为基础，无需单独引入plugin:react/recommended（因为react-app已包含该插件的适配规则）：

{
  "extends": ["react-app"],
  "rules": {
    // 这里可以添加你的自定义ESLint规则
  }
}

如果需要额外的react规则扩展，可以将plugin:react/recommended放在react-app之后（优先级更高，会覆盖冲突规则）：

{
  "extends": ["react-app", "plugin:react/recommended"],
  "rules": {
    // 自定义规则
  }
}

方案2：临时禁用构建时的ESLint插件（不推荐长期使用） #

如果需要快速完成部署，可以在package.json的scripts中修改build命令，禁用ESLint插件检查：

"scripts": {
  "start": "react-scripts start",
  "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

注意：此方法会跳过ESLint的代码质量检查，可能隐藏代码问题，仅建议临时应急使用。

方案3：锁定eslint-plugin-react版本 #

若冲突是因本地与Vercel环境的eslint-plugin-react版本不一致导致，可在package.json中明确锁定该插件版本：

"devDependencies": {
  "eslint-plugin-react": "^7.32.2" // 选择一个稳定兼容的版本
}

执行以下命令重新安装依赖后再部署：

rm -rf node_modules package-lock.json
npm install

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