TypeError：如果没有“new”，则无法调用类构造函数 ESLintWebpackPlugin

Question

我正在使用 Redux 环境构建 React，当我运行 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'

我在之前的问题中看到答案是包含，"esmodules": true所以这是我的 package.json 的相关部分：

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

这也是我的 index.js 文件，尽管我不认为其中有任何令人反感的内容。

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

eslint 6.8.0从 升级到时，我也遇到了同样的错误eslint 8。在升级过程中，我从 切换babel-eslint到@babel/eslint-parser，又从eslint-loader切换到eslint-webpack-plugin。

在我的中webpack.config.js，我（错误且天真地）从：

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

到：

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

那不起作用。事实上，我相信这就是导致Class constructor ESLintWebpackPlugin cannot be invoked without 'new'错误出现的原因。

eslint-webpack-plugin当我从部分中完全删除该条目module: { rules: [ ... ] }，并使用以下命令调用eslint-webpack-plugin（根据其文档）时：

...
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',
        },
      },
    ],
  },
};

然后...cannot be invoked without 'new'错误终于消失了。大量的试验和错误......webpack虽然功能强大，但不是最简单的工具！