时间戳

首页 > 解决方案 > TypeError：没有'new'就不能调用类构造函数ESLintWebpackPlugin

javascript - TypeError：没有'new'就不能调用类构造函数ESLintWebpackPlugin

问题描述

我正在使用 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'),
);

标签： javascriptreactjswebpackreduxbabeljs

解决方案

从升级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功能强大但不是最直接的工具！

推荐阅读