模块构建失败（来自 ./node_modules/eslint-loader/dist/cjs.js）：TypeError：无法读取未定义的属性（读取“getFormatter”）

Question

我正在使用 webpack 运行一个简单的 React/Django 应用程序，该应用程序在构建时收到此错误：

ERROR in ./src/index.js
Module build failed (from ./node_modules/eslint-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'getFormatter')
    at getFormatter (**[Relative path]**/frontend/node_modules/eslint-loader/dist/getOptions.js:52:20)
    at getOptions (**[Relative path]**/frontend/node_modules/eslint-loader/dist/getOptions.js:30:23)
    at Object.loader (**[Relative path]**/frontend/node_modules/eslint-loader/dist/index.js:17:43)

这是我的package.json

{
    "name": "frontend",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "start:dev": "webpack serve --config webpack.config.dev.js --port 3000",
        "clean:build": "rimraf ../static && mkdir ../static",
        "prebuild": "run-p clean:build",
        "build": "webpack --config webpack.config.prod.js",
        "postbuild": "rimraf ../static/index.html"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "axios": "^0.24.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-redux": "^7.2.6",
        "redux": "^4.1.2",
        "redux-thunk": "^2.4.0",
        "reselect": "^4.1.1"
    },
    "devDependencies": {
        "@babel/core": "^7.16.0",
        "@babel/node": "^7.16.0",
        "@babel/preset-env": "^7.16.0",
        "@babel/preset-react": "^7.16.0",
        "babel-eslint": "^10.1.0",
        "babel-loader": "^8.2.3",
        "babel-polyfill": "^6.26.0",
        "css-loader": "^6.5.0",
        "cssnano": "^5.0.9",
        "eslint": "^8.1.0",
        "eslint-loader": "^4.0.2",
        "eslint-plugin-import": "^2.25.2",
        "eslint-plugin-react": "^7.26.1",
        "eslint-plugin-react-hooks": "^4.2.0",
        "html-webpack-plugin": "^5.5.0",
        "mini-css-extract-plugin": "^2.4.3",
        "npm-run-all": "^4.1.5",
        "postcss-loader": "^6.2.0",
        "redux-immutable-state-invariant": "^2.1.0",
        "rimraf": "^3.0.2",
        "style-loader": "^3.3.1",
        "webpack": "^5.61.0",
        "webpack-cli": "^4.9.1",
        "webpack-dev-server": "^4.4.0"
    }
}

和我的webpack.config.dev.js

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
process.env.NODE_ENV = 'development';
module.exports = {
    mode: 'development',
    target: 'web',
    devtool: 'cheap-module-source-map',
    entry: ['babel-polyfill', './src/index'],
    output: {
        path: path.resolve(__dirname),
        publicPath: '/',
        filename: 'bundle.js'
    },
    devServer: {
        // stats: 'minimal',
        client: {
            overlay: true
        },
        historyApiFallback: true,
        // disableHostCheck: true,
        headers: { 'Access-Control-Allow-Origin': '*' },
        https: false
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.API_URL': JSON.stringify('http://localhost:8000/api/')
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            favicon: './src/favicon.ico'
        })
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader'
                    },
                    'eslint-loader'
                ]
            },
            {
                test: /(\.css)$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
};

不确定我是否需要更改我的配置文件，或者这是否是我安装的软件包的问题。任何指导都会有所帮助，因为我不太熟悉 webpack 的内部工作原理。

版本：

• 节点：v17.0.1
• npm：8.1.2
• python：3.9.6（很确定这是一个 js/webpack 问题）
• 姜戈：3.2.8 (^^^)

Answer 1

eslint-loader 已弃用： https: //www.npmjs.com/package/eslint-loader

您可以使用 eslint-webpack-plugin 代替： https://www.npmjs.com/package/eslint-webpack-plugin

Answer 2

我在 eslint-loader github 中发现了一个关于此问题的问题https://github.com/webpack-contrib/eslint-loader/issues/331，但我不知道它对你是否有用。。拥有一个 git 存储库来存储可能出错的代码将有助于更好地进行测试。:)