React项目npm start时eslint react插件冲突错误的解决方法

问题描述 #

运行React项目的npm start命令时偶尔编译失败，报错提示：

[eslint] Plugin "react"在"package.json » eslint-config-react-app » C:\Users\dell\desktop\text-to-speech\node_modules\eslint-config-react-app\base.js"与"BaseConfig » C:\Users\dell\Desktop\text-to-speech\node_modules\eslint-config-react-app\base.js"间存在冲突，webpack编译出现1个错误。

项目的package.json配置如下：

{
    "name": "text-to-speech",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

期望终端成功编译后的显示内容：

现在可以在浏览器中查看ReactProjectName。

  本地地址:            http://localhost:3000        
  局域网地址:  http://193.158.42.103:3000   

注意：开发构建版本未做优化。
如需创建生产构建版本，请使用 npm run build。

webpack 编译成功

解决步骤 #

1. 清除依赖缓存并重新安装依赖 #

缓存或重复安装的依赖可能导致ESLint插件重复加载，执行以下操作：

• 清除npm缓存：

  npm cache clean --force
  

• 删除项目中的node_modules文件夹和package-lock.json文件：
  • Windows系统：

    rmdir /s /q node_modules
    del package-lock.json
    

  • macOS/Linux系统：

    rm -rf node_modules package-lock.json
    

• 重新安装所有依赖：

  npm install
  

2. 简化ESLint配置 #

你的eslintConfig中同时继承了react-app和react-app/jest，后者本身已包含react-app的基础配置，可能引发重复引用。修改package.json中的eslintConfig部分：

"eslintConfig": {
    "extends": "react-app/jest"
}

也可以明确指定eslint-plugin-react版本，避免版本不一致：

npm install eslint-plugin-react@^7.32.2 --save-dev

3. 临时禁用ESLint插件（紧急启动） #

如果需要快速启动项目，可临时跳过ESLint检查，修改package.json的start脚本：

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

之后运行npm start即可启动项目。

4. 更新react-scripts版本 #

react-scripts 5.0.1可能存在已知的ESLint配置冲突问题，升级到最新稳定版：

npm install react-scripts@latest

升级后重新运行npm start验证问题是否解决。

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