TypeError:类构造函数ESLintWebpackPlugin不能在没有“new”的情况下调用

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'错误的原因。

当我从module: { rules: [ ... ] }部分完全删除eslint-webpack-plugin条目，并使用以下命令调用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功能强大，但不是最简单的工具！

Answer 2

这可能与你在eslint plugin和webpack中使用的包版本有关。我在我的项目中升级了eslint，并遇到了同样的问题。