React项目npm start启动时ESLint react插件冲突问题求解

数据老陈

2026-7-14

解决React项目ESLint React插件冲突问题

这个错误源于本地.eslintrc.json配置与react-scripts内置的eslint-config-react-app配置中，eslint-plugin-react插件的版本或规则设置出现冲突，以下是几种可行的解决方法：

方法一：继承官方配置，保留自定义规则
在你的.eslintrc.json中添加react-app继承配置，让自定义规则基于官方配置扩展，避免冲突：
```
{
  "extends": ["react-app"],
  // 在这里添加你的自定义ESLint规则
  "rules": {
    // 示例："react/jsx-uses-vars": "error"
  }
}
```
修改后重新运行npm start即可。
方法二：移除本地ESLint配置，使用默认规则
如果不需要自定义ESLint规则，直接删除项目根目录下的.eslintrc.json文件，react-scripts会自动使用内置的官方配置，冲突会直接消失。
方法三：统一插件版本
1. 查看react-scripts依赖的eslint-plugin-react版本：打开node_modules/react-scripts/package.json，找到eslint-plugin-react的版本号。
2. 在项目根目录的package.json中，手动指定相同版本的eslint-plugin-react：
```
"devDependencies": {
  "eslint-plugin-react": "x.x.x" // 替换成第一步查到的版本号
}
```
3. 删除node_modules和package-lock.json（或yarn.lock），然后重新安装依赖：
```
rm -rf node_modules package-lock.json
npm install
```
4. 重新运行npm start。