TypeError: Class constructor ESLintWebpackPlugin cannot be invoked without 'new'

Question

I am building a React with Redux environment, and I keep getting this error message when I run npm start:

ERROR in ./src/index.js
Module build failed (from ./node_modules/eslint-webpack-plugin/dist/cjs.js):
TypeError: Class constructor ESLintWebpackPlugin cannot be invoked without 'new'

I've seen in previous questions the answer is to include "esmodules": true so here's the relevant part of my package.json:

"babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "esmodules": true
          }
        }
      ],
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
}

Also here is my index.js file, although I don't think there's anything in there that should be offending.

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './components/App';
import './index.css';
import configureStore from './redux/configureStore';
import { Provider as ReduxProvider } from 'react-redux';

const store = configureStore();

render(
    <ReduxProvider store={store}>
        <Router>
            <App />
        </Router>
    </ReduxProvider>,
    document.getElementById('app'),
);

Answer 1

This same error came up for me while upgrading from eslint 6.8.0 to eslint 8. During the upgrade, I switched from babel-eslint to @babel/eslint-parser, and from eslint-loader to eslint-webpack-plugin.

In my webpack.config.js, I (mistakenly and naively) changed from:

module.exports = {
  ...

  module: {
    rules: [
      {
        test: /\.js$/,
        include: Path.resolve(__dirname, '../src'),
        enforce: 'pre',
        loader: 'eslint-loader',         // <== NOTE
        options: {
          emitWarning: true,
        },
      },
      {
        test: /\.js$/,
        include: Path.resolve(__dirname, '../src'),
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          sourceType: 'unambiguous',
        },
      },
    ],
  },
};

to:

module.exports = {
  ...

  module: {
    rules: [
      {
        test: /\.js$/,
        include: Path.resolve(__dirname, '../src'),
        enforce: 'pre',
        loader: 'eslint-webpack-plugin', // <== UPDATED
        exclude: /node_modules/,         // <== UPDATED
        options: {
          emitWarning: true,
        },
      },
      {
        test: /\.js$/,
        include: Path.resolve(__dirname, '../src'),
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          sourceType: 'unambiguous',
        },
      },
    ],
  },
};

That DID NOT WORK. In fact, I believe this is what caused the Class constructor ESLintWebpackPlugin cannot be invoked without 'new' error to arise.

When I entirely removed the eslint-webpack-plugin entry from module: { rules: [ ... ] } section, and instead invoked the eslint-webpack-plugin (per its documentation) with:

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

const myEslintOptions = {
  extensions: [`js`, `jsx`, `ts`],
  exclude: [`node_modules`],
};

module.exports = {
  ...
  plugins: [
    ...
    new ESLintPlugin(myEslintOptions),
    ...
  ],

  ...
  module: {
    rules: [
      {
        test: /\.js$/,
        include: Path.resolve(__dirname, '../src'),
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          sourceType: 'unambiguous',
        },
      },
    ],
  },
};

then the ...cannot be invoked without 'new' error finally disappeared. Lots of trial and error... webpack is powerful but not the most straightforward tool!