Module build failed (from ./node_modules/eslint-loader/dist/cjs.js): TypeError: Cannot read properties of undefined (reading 'getFormatter')

Question

I am running a simple React/Django app with webpack that is receiving this error on build:

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)

Here's my 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"
    }
}

And my 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']
            }
        ]
    }
};

Unsure if I need to make changes to my config file or if it's an issue with a package I have installed. Any guidance would be helpful as I am not very familiar with webpack's inner workings.

Versions:

• node: v17.0.1
• npm: 8.1.2
• python: 3.9.6 (pretty sure it's a js/webpack issue)
• Django: 3.2.8 (^^^)

Answer 1

eslint-loader is deprecated: https://www.npmjs.com/package/eslint-loader

You may use eslint-webpack-plugin instead: https://www.npmjs.com/package/eslint-webpack-plugin

Answer 2

I found an issue https://github.com/webpack-contrib/eslint-loader/issues/331 about this in the eslint-loader github, but I don't know if it will be useful for you. . It would help to have a git repository to store the code that would be wrong for better testing. :)

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"
}

I reverted back to these versions (a past project worked on them) and it is now working properly. I believe it has something to do with eslint and eslint-loader.

Answer 4

eslint-loader has been deprecated now, and i change to use eslint-webpack-plugin which really works now!! I am so greatful, this problem has been troubling me a lot! It really solve my problem thanks to the top answer, but I cannot comment directly on that answer due to my low reputation. In addition, this is a plugin rather than loader, so you should add it to plugins and don't forget to "new".enter link description here