Getting ERROR in ESLint is not a constructor using eslint-webpack-plugin version 2.5.4

[jhopley-stadion]

Bug report

I have set up webpack react project using weback 5 but getting this error ERROR in ESLint is not a constructor when running elint in the build.

package.json

  "devDependencies": {
    "@babel/core": "~7.16.7",
    "@babel/plugin-proposal-class-properties": "~7.16.7",
    "@babel/plugin-proposal-export-default-from": "^7.16.7",
    "@babel/plugin-proposal-export-namespace-from": "~7.16.7",
    "@babel/plugin-proposal-object-rest-spread": "~7.16.7",
    "@babel/plugin-proposal-throw-expressions": "~7.16.7",
    "@babel/plugin-syntax-dynamic-import": "~7.8.3",
    "@babel/plugin-transform-runtime": "~7.16.7",
    "@babel/preset-env": "~7.16.7",
    "@babel/preset-react": "~7.16.7",
    "@babel/register": "~7.16.7",
    "@pmmmwh/react-refresh-webpack-plugin": "~0.5.4",
    "@storybook/addon-actions": "^6.4.19",
    "@storybook/addon-essentials": "^6.4.19",
    "@storybook/addon-interactions": "^6.4.19",
    "@storybook/addon-links": "^6.4.19",
    "@storybook/builder-webpack5": "^6.4.19",
    "@storybook/manager-webpack5": "^6.4.19",
    "@storybook/preset-create-react-app": "^4.1.0",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.4.19",
    "@storybook/testing-library": "^0.0.9",
    "@svgr/webpack": "~6.1.2",
    "@teamsupercell/typings-for-css-modules-loader": "~2.5.1",
    "@types/node": "^17.0.22",
    "@typescript-eslint/eslint-plugin": "^5.16.0",
    "@typescript-eslint/parser": "^5.16.0",
    "acorn": "^8.7.0",
    "autoprefixer": "~10.4.2",
    "babel-eslint": "~10.1.0",
    "babel-loader": "~8.2.3",
    "clean-webpack-plugin": "~4.0.0",
    "copy-webpack-plugin": "^6.4.1",
    "core-js": "~3.20.2",
    "cross-env": "^7.0.3",
    "css-loader": "~6.5.1",
    "cssnano": "~5.0.15",
    "dotenv": "^16.0.0",
    "eslint": "~8.11.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-base": "~15.0.0",
    "eslint-config-airbnb-typescript": "~16.1.0",
    "eslint-config-prettier": "~8.3.0",
    "eslint-import-resolver-alias": "~1.1.2",
    "eslint-plugin-import": "~2.25.4",
    "eslint-plugin-jsx-a11y": "~6.5.1",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "~7.28.0",
    "eslint-plugin-react-hooks": "~4.3.0",
    "eslint-webpack-plugin": "^2.5.4",
    "esm": "^3.2.25",
    "fast-sass-loader": "^2.0.1",
    "fork-ts-checker-webpack-plugin": "~6.5.0",
    "html-loader": "~3.1.0",
    "html-webpack-plugin": "~5.5.0",
    "import-sort-style-module-and-prefix": "~0.1.3",
    "mini-css-extract-plugin": "~2.6.0",
    "path": "~0.12.7",
    "postcss": "~8.4.12",
    "postcss-loader": "~6.2.1",
    "prettier": "~2.5.1",
    "prettier-plugin-import-sort": "~0.0.7",
    "pretty-quick": "~3.1.3",
    "react-refresh": "~0.11.0",
    "react-scripts": "^5.0.0",
    "reflect-metadata": "^0.1.13",
    "regenerator-runtime": "~0.13.9",
    "resolve-url-loader": "~4.0.0",
    "sass": "~1.49.9",
    "sass-loader": "~12.6.0",
    "sass-resources-loader": "~2.2.4",
    "simple-git-hooks": "^2.7.0",
    "storybook-addon-jsx": "^7.3.14",
    "storybook-css-modules-preset": "^1.1.1",
    "storybook-react-context": "^0.4.0",
    "style-loader": "^3.3.1",
    "svg-spritemap-webpack-plugin": "^4.4.0",
    "svg-url-loader": "~7.1.1",
    "terser-webpack-plugin": "~5.3.0",
    "ts-loader": "~9.2.6",
    "typescript": "~4.6.2",
    "typescript-eslint": "^0.0.1-alpha.0",
    "url-loader": "~4.1.1",
    "webpack": "~5.70.0",
    "webpack-bundle-analyzer": "~4.5.0",
    "webpack-cli": "~4.9.1",
    "webpack-dev-server": "^4.7.4",
    "webpack-merge": "~5.8.0",
    "webpack-stream": "^7.0.0"
  },

import { join, resolve } from 'path';
import ESLintPlugin from 'eslint-webpack-plugin';
import { rootDir } from '../utils/env';

const config = {
  context: join(rootDir, '/src'),
  eslintPath: resolve('./.eslintrc'),
  extensions: ['js', 'jsx', 'ts', 'tsx'],
};

export const esLintPlugin = new ESLintPlugin(config);

Actual Behavior

The linter works because i get the linting error in the console but at the end of the build it just exits with the error above.

Expected Behavior

To finish linting with out getting the error at the end of the build. - sorry not sure what else i can put here.

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 991.13 MB / 16.00 GB
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 99.0.4844.84
    Firefox: 89.0.1
    Safari: 15.0
  Packages:
    babel-loader: ~8.2.3 => 8.2.4 
    clean-webpack-plugin: ~4.0.0 => 4.0.0 
    copy-webpack-plugin: ^6.4.1 => 6.4.1 
    css-loader: ~6.5.1 => 6.5.1 
    eslint-webpack-plugin: ^3.1.1 => 3.1.1 
    fast-sass-loader: ^2.0.1 => 2.0.1 
    fork-ts-checker-webpack-plugin: ~6.5.0 => 6.5.0 
    html-loader: ~3.1.0 => 3.1.0 
    html-webpack-plugin: ~5.5.0 => 5.5.0 
    postcss-loader: ~6.2.1 => 6.2.1 
    resolve-url-loader: ~4.0.0 => 4.0.0 
    sass-loader: ~12.6.0 => 12.6.0 
    sass-resources-loader: ~2.2.4 => 2.2.4 
    style-loader: ^3.3.1 => 3.3.1 
    svg-spritemap-webpack-plugin: ^4.4.0 => 4.4.0 
    svg-url-loader: ~7.1.1 => 7.1.1 
    terser-webpack-plugin: ~5.3.0 => 5.3.1 
    ts-loader: ~9.2.6 => 9.2.8 
    url-loader: ~4.1.1 => 4.1.1 
    webpack: ~5.70.0 => 5.70.0 
    webpack-bundle-analyzer: ~4.5.0 => 4.5.0 
    webpack-cli: ~4.9.1 => 4.9.2 
    webpack-dev-server: ^4.7.4 => 4.7.4 
    webpack-merge: ~5.8.0 => 5.8.0 
    webpack-stream: ^7.0.0 => 7.0.0 

[jhopley-stadion]

Can any one help with this?

[jhopley-stadion]

Does anyone do support of this ?

[ricardogobbosouza]

Hi @jhopley-stadion did you try v3?

[CarolineSenes]

Hi! The same issue here.

I just migrate from webpack 4 to webpack 5, and it generates this error in dev mode :

ERROR in ESLint is not a constructor

ERROR in   Error: Child compilation failed:
  ESLint is not a constructor

  - child-compiler.js:169
    [ui]/[html-webpack-plugin]/lib/child-compiler.js:169:18

  - Compiler.js:551 finalCallback
    [ui]/[webpack]/lib/Compiler.js:551:5

  - Compiler.js:577
    [ui]/[webpack]/lib/Compiler.js:577:11

  - Compiler.js:1196
    [ui]/[webpack]/lib/Compiler.js:1196:17

  - task_queues.js:95 processTicksAndRejections
    internal/process/task_queues.js:95:5

eslint: 7.32.0 eslint-webpack-plugin: 3.1.1 webpack: 5.75.1

How to solve the problem ?

[p-pey]

I have same issue

[Burhan320]

i have same issue

[ricardogobbosouza]

Hi @jhopley-stadion Sorry for delay...

Your configuration is wrong eslintPath: This is eslint executable path, not eslint configuration file

You can remove this line, by default the eslint will already read your configuration, but if you want to force it use overrideConfigFile

See https://eslint.org/docs/latest/integrate/nodejs-api

[benkshaji]

i have same issue ( Child compilation failed: [eslint] Linter is not a constructor )

[gosikape]

I have the same issue ( Child compilation failed: [eslint] Linter is not a constructor )

[charlestbell]

same