模块构建失败(来自./node_node/eslint/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
• 国家预防机制: 8.1.2
• python: 3.9.6 (非常肯定这是js/webpack问题)
• Django: 3.2.8 (^)

Answer 1

不推荐使用eslint-加载程序：https://www.npmjs.com/package/eslint-loader

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

Answer 2

我在eslint中找到了一个关于这一点的https://github.com/webpack-contrib/eslint-loader/issues/331问题，但我不知道它是否对您有用。。它将有助于有一个git存储库来存储错误的代码，以便进行更好的测试。:)

Answer 3

    "dependencies": {
    "axios": "^0.24.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.0.1",
    "redux": "^4.1.2",
    "redux-thunk": "^2.4.0",
    "reselect": "^4.1.1"
},
"devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/node": "^7.14.9",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "babel-polyfill": "^6.26.0",
    "css-loader": "^6.2.0",
    "cssnano": "^5.0.7",
    "eslint": "^7.32.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.24.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "html-webpack-plugin": "^5.3.2",
    "mini-css-extract-plugin": "^2.2.0",
    "npm-run-all": "^4.1.5",
    "postcss-loader": "^6.1.1",
    "redux-immutable-state-invariant": "^2.1.0",
    "rimraf": "^3.0.2",
    "style-loader": "^3.2.1",
    "webpack": "^5.50.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^3.11.2"
}

我回到了这些版本(过去的一个项目对它们进行了工作)，现在它正在正常工作。我相信这与eslint和eslint-loader有关。