搭建React+Redux环境运行npm start报ESLintWebpackPlugin需new调用错误

根因说明 #

这个报错的核心是eslint-webpack-plugin大版本和你项目中使用的webpack版本不匹配，和你项目业务代码、babel的esmodules配置没有关联。

具体排查解决步骤 #

• 第一步：确认你项目中的webpack版本
  执行命令查看webpack版本：

  npm list webpack
  

• 第二步：根据webpack版本对应安装匹配的eslint-webpack-plugin版本
  • 如果webpack版本是4.x：需要安装eslint-webpack-plugin 2.x版本，执行命令：

    npm install eslint-webpack-plugin@2.x --save-dev
    

  • 如果webpack版本是5.x：需要安装eslint-webpack-plugin 3.x及以上版本，执行命令：

    npm install eslint-webpack-plugin@latest --save-dev
    

• 第三步：检查webpack配置文件中插件的调用方式
  确保你是用new关键字实例化ESLintWebpackPlugin，示例配置：

  const ESLintWebpackPlugin = require('eslint-webpack-plugin');
  
  module.exports = {
    // 其他配置项
    plugins: [new ESLintWebpackPlugin({
      // 你的eslint配置项
    })]
  }
  

• 第四步：清理缓存重新启动项目
  执行如下命令重启：

  rm -rf node_modules/.cache
  npm start
  

内容的提问来源于stack exchange，提问作者Weirdali