React/Django+webpack项目构建报eslint-loader getFormatter未定义错误

问题根因 #

该报错由 eslint v8 与已废弃的 eslint-loader v4 版本不兼容导致。eslint-loader 早在2020年就已停止维护，最高仅支持到eslint v7版本，你当前安装的eslint@8.1.0超出其兼容范围，调用getFormatter方法时找不到对应属性，因此触发类型错误。

解决方案 #

方案1：替换为官方推荐的eslint-webpack-plugin（推荐） #

该方案适配你当前的webpack5+eslint8技术栈，是长期稳定的解决方案：

1. 卸载废弃的eslint-loader

npm uninstall eslint-loader

2. 安装官方维护的eslint-webpack-plugin

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

3. 修改webpack.config.dev.js配置：
   • 顶部引入插件：

   const ESLintPlugin = require('eslint-webpack-plugin');
   

   • 去掉module.rules中js规则里的eslint-loader，修改后规则如下：

   {
       test: /\.(js|jsx)$/,
       exclude: /node_modules/,
       use: ['babel-loader']
   }
   

   • 在plugins数组中新增ESLint插件实例，原有其他插件保留：

   plugins: [
       new webpack.DefinePlugin({
           'process.env.API_URL': JSON.stringify('http://localhost:8000/api/')
       }),
       new HtmlWebpackPlugin({
           template: './src/index.html',
           favicon: './src/favicon.ico'
       }),
       // 新增ESLint插件
       new ESLintPlugin({
           extensions: ['js', 'jsx'],
           exclude: 'node_modules'
       })
   ]
   

4. 重启开发服务，即可正常构建。

方案2：降级eslint到兼容版本（临时解决，不推荐） #

如果不想修改webpack配置，可以将eslint降到v7版本适配旧的loader：

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

重装完成后重启构建即可。

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