javascript - 类型错误 : Class constructor ESLintWebpackPlugin cannot be invoked without '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 很强大，但不是最简单的工具!