Как исправить ошибку: «TypeError: Cannot read property 'getFormatter' of undefined»?

Question

[Mark]

При использовании eslint постоянно выбивает ошибку:"TypeError: Cannot read property 'getFormatter' of undefined".
Она дублируется 3 раза (это из-за того, что у меня в проекте 3 js файла).
Уже гуглил кучу раз, но конкретного решения так и не нашел

Подскажите, пожалуйста, в чем может быть причина?
Вот код сборки:

{
  "name": "artsite",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "@babel/eslint-parser": "^7.15.8",
    "@babel/polyfill": "^7.12.1",
    "http-server": "^13.0.2",
    "jquery": "^3.6.0",
    "normalize.css": "^8.0.1",
    "webpack": "^5.58.1",
    "webpack-cli": "^4.9.0"
  },
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/preset-env": "^7.15.8",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^9.0.1",
    "cross-env": "^7.0.3",
    "css-loader": "^6.3.0",
    "eslint": "^8.0.1",
    "eslint-loader": "^4.0.2",
    "eslint-webpack-plugin": "^3.0.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "mini-css-extract-plugin": "^2.4.2",
    "node-scss": "^7.0.3",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "sass": "^1.42.1",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.3.0",
    "terser-webpack-plugin": "^5.2.4"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "cross-env NODE_ENV=development webpack --mode development",
    "prod": "cross-env NODE_ENV=production webpack --mode production"
  },
  "browserslist": "> 0.25%, not dead",
  "author": "",
  "license": "ISC"
}

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { config } = require('process')
const optimizationCssAssetPlugin = require('optimize-css-assets-webpack-plugin')
const terserWebpackPlugin = require('terser-webpack-plugin');

const isDev = process.env.NODE_ENV === 'development'
const isProd = !isDev

const optimization = () => {
    const config = {
        splitChunks: {
            chunks: 'all'
        }
    }

    if (isProd) {
        config.minimizer = [
            new optimizationCssAssetPlugin(),
            new terserWebpackPlugin()
        ]
    }

    return config
}

const babelOptions = preset => {
    const opts = {
        presets: [
            '@babel/preset-env'
        ],
        plugins: [
            '@babel/plugin-proposal-class-properties'
        ]
    }

    if (preset) {
        opts.presets.push(preset)
    }

    return opts
}

const jsLoaders = () => {
    const loaders = [{
        loader: 'babel-loader',
        options: babelOptions()
    }]

    if (isDev) {
        loaders.push('eslint-loader')
    }

    return loaders
}


const filename = ext => isDev ? `[name].${ext}` : `[name].[hash].${ext}`

module.exports = {
    context: path.resolve(__dirname, 'src'),
    entry: {
        index: ['@babel/polyfill', '@mainJS/index.js'],
        main: '@mainJS/main.js',
        scrtipt: '@mainJS/script.js'
    },

    output: {
        filename: filename('js'),
        path: path.resolve(__dirname, 'dist'),
    },

    plugins: [

        // HTML plagin
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: './main.html',
            chunks: ['scrtipt'],
            minify: {
                collapseWhitespace: isProd,
            },
        }),

        new HtmlWebpackPlugin({
            filename: "test.html",
            template: './test.html',
            chunks: ['scrtipt', 'main', 'index'],
            minify: {
                collapseWhitespace: isProd,
            }
        }),

        // CLEAN plagin
        new CleanWebpackPlugin(),

        // COPY plagin
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, 'img'),
                    to: path.resolve(__dirname, 'dist')
                },
            ]
        }),

        new MiniCssExtractPlugin({
            filename: filename('css')
        })

    ],

    resolve: {
        alias: {
            '@mainJS': path.resolve(__dirname, './src/js')
        }
    },

    optimization: optimization(),

    module: {
        rules: [
            // Loading FONT-FAMILY
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: ['file-loader']
            },
            // Loading SCSS/SASS
            {
                test: /.s[ac]ss$/i,
                exclude: /node_modules/,
                use: ['style-loader', 'css-loader', 'sass-loader',],
            },

            // Loading CSS
            {
                test: /\.css$/,
                use:
                    [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {},
                        },
                        'css-loader'
                    ],
            },
            // Loading BABEL
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: jsLoaders(),
            }
        ]
    }
};

Answer 1

[Дмитрий Ляпунов]

Для webpack 5 "eslint-loader" deprecated, используй eslint-webpack-plugin (см. https://webpack.js.org/plugins/eslint-webpack-plugin)

Подключается в webpack.config.js так:

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

// в module.exports
plugins: [
        new EslintWebpackPlugin(
            {
                extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx']
            }
        )
]

Что бы не ругался на реакт и переменные окружения такой .eslintrc.json:

{
	"root": true,
	"parser": "@typescript-eslint/parser",
	"plugins": [
		"react",
		"@typescript-eslint"
	],
	"extends": [
		"eslint:recommended",
		"plugin:react/recommended",
		"plugin:@typescript-eslint/recommended"
	],
	"parserOptions": {
		"ecmaVersion": 6,
		"sourceType": "module",
		"ecmaFeatures": {
			"jsx": true
		}
	},
	"env": {
		"es6": true,
		"browser": true
	}
}

Выше я использую TS и реакт, однако без них еще проще:

{
  "root": true,
  "parser": "@babel/eslint-parser",
  "extends": [
    "eslint:recommended",
  ],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
  },
  "env": {
    "es6": true,
    "browser": true
  }
}