运行build时ESLint 5.6.0版本冲突报错，多种方案无效求助

1. react-scripts与ESLint版本跨大版本冲突：你当前使用的react-scripts版本依赖ESLint 5.x，而本地安装的ESLint 8.x在配置规则、核心API上差异极大，触发CRA的预检查机制报错。设置SKIP_PREFLIGHT_CHECK无效，大概率是环境变量配置错误（比如.env文件不在项目根目录、变量名拼写错误）。
2. craco版本与新版工具链不兼容：旧版craco默认依赖已弃用的eslint-loader，但ESLint 8.x和webpack 5.x早已改用eslint-webpack-plugin，craco的旧配置逻辑无法识别新版插件，导致“找不到loader”的报错。
3. 依赖树缓存残留：多次安装/卸载不同版本的ESLint、webpack后，package-lock.json和node_modules中残留的旧依赖缓存，导致实际安装的依赖版本与package.json声明不一致，冲突问题反复出现。

方案一：升级react-scripts到兼容高版本ESLint的版本 #

react-scripts从v5.x开始原生支持ESLint 8.x，直接升级可从根源解决版本冲突：

• 执行升级命令：

  npm install react-scripts@latest --save
  

• 清理旧依赖并重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

• 若升级后出现配置报错，删除package.json中的eslintConfig字段，让CRA自动生成适配新版本的配置。

方案二：调整craco配置适配新版ESLint/webpack #

如果必须使用craco，需同步升级craco并修改配置：

1. 安装支持webpack 5和ESLint 8的craco版本：

   npm install @craco/craco@latest --save-dev
   

2. 在craco.config.js中禁用内置ESLint检查，避免loader冲突：

   module.exports = {
     eslint: {
       enable: false
     }
   };
   

3. 若需保留ESLint检查，手动配置eslint-webpack-plugin替代旧loader：

   const ESLintPlugin = require('eslint-webpack-plugin');
   
   module.exports = {
     webpack: {
       plugins: {
         add: [
           new ESLintPlugin({
             extensions: ['js', 'jsx', 'ts', 'tsx'],
             exclude: ['node_modules']
           })
         ]
       },
       configure: (webpackConfig) => {
         // 移除旧的eslint-loader规则
         webpackConfig.module.rules = webpackConfig.module.rules.filter(
           rule => !rule.use?.some(use => use.loader?.includes('eslint-loader'))
         );
         return webpackConfig;
       }
     }
   };
   

4. 安装依赖插件：

   npm install eslint-webpack-plugin --save-dev
   

方案三：彻底清理依赖环境重置 #

若之前的操作导致依赖树混乱，执行以下步骤彻底重置：

1. 删除项目根目录下的旧依赖文件：

   rm -rf node_modules package-lock.json yarn.lock
   

2. 清除npm缓存：

   npm cache clean --force
   

3. 在package.json中移除所有手动安装的ESLint、webpack相关依赖（仅保留react-scripts自带的）：

   // 删除devDependencies中的"eslint"、"webpack"、"eslint-webpack-plugin"等条目
   

4. 重新安装依赖：

   npm install
   

5. 若需自定义ESLint规则，安装与当前react-scripts版本兼容的ESLint（比如react-scripts v5.x对应ESLint 8.x）：

   npm install eslint@8.x --save-dev
   

方案四：确保SKIP_PREFLIGHT_CHECK正确配置 #

如果暂时不想升级react-scripts，确认环境变量配置无误：

• 在项目根目录创建.env文件（文件名必须是.env，无后缀），写入：

  SKIP_PREFLIGHT_CHECK=true
  

• 重启终端和开发服务器，确保环境变量被加载。

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