ESLintPlugin has no construct signatures

[3bl3gamer]

• Operating System: Arch Linux
• Node Version: 14.10.1
• Yarn Version: 1.22.5
• webpack Version: 5.0.0-beta.29
• eslint-webpack-plugin Version: 2.1.0
• Typescript Version: 4.0.2

Expected Behavior

new ESLintPlugin({}) produce no errors.

Actual Behavior

This expression is not constructable.
  Type 'typeof import("/path/to/node_modules/eslint-webpack-plugin/declarations/index")' has no construct signatures. ts(2351)

Code

const ESLintPlugin = require('eslint-webpack-plugin')

module.exports = {
	plugins: [new ESLintPlugin({})], // <- error on "ESLintPlugin"
}

// tsconfig.json
{
	"compilerOptions": {
		"allowJs": true,
		"checkJs": true
	},
	"exclude": ["node_modules", "dist"]
}

[binury]

Source:
https://github.com/webpack-contrib/eslint-webpack-plugin/blob/master/src/index.js#L13-L19

Typedef:
https://github.com/webpack-contrib/eslint-webpack-plugin/blob/master/declarations/index.d.ts#L20-L37

[binury]

I don't have an env setup to easily replicate but just having briefly looked into it, it seems like:

• this happens when using CommonJS require (like, in a Webpack config)
• an export = should be used instead

Astoundingly, there is really not a lot of good information about this

TL;DR: export = or import = require implies the module was written as CommonJS, export default implies it's been authored as an ECMAScript module.

@3bl3gamer Do you still get the error when using an import? (if you can…)

[3bl3gamer]

Do you still get the error when using an import?

No, import ESLintPlugin from "eslint-webpack-plugin" causes no errors.

But it does not work directly (some hacks are required) with webpack-cli yet.

[gimmi]

With this:

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = function (env) {
    return {
        plugins: [
            new ESLintPlugin()
        ]
    };
};

when I do this:

npm run watch

I get this:

ERROR in ESLint is not a constructor

[mercs600]

/dist/cjs.js:

"use strict";

const plugin = require('./index');

module.exports = plugin.default;

dist/index.js:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;


...


var _default = ESLintWebpackPlugin;
exports.default = _default;

[jzilg]

With this:

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = function (env) {
    return {
        plugins: [
            new ESLintPlugin()
        ]
    };
};

when I do this:

npm run watch

I get this:

ERROR in ESLint is not a constructor

Hey,

I had the same issue but I was able to solve it: upgrade your eslint dependecy.
I was on 6.8.0 and upgraded it to 7.13.0.
After that it worked as expected.

[ricardogobbosouza]

I added a note about the eslint version

[3bl3gamer]

It is still not fixed.

I've created empty project with yarn add webpack webpack-cli eslint eslint-webpack-plugin typescript

info Direct dependencies
├─ eslint-webpack-plugin@2.3.0
├─ eslint@7.13.0
├─ typescript@4.0.5
├─ webpack-cli@4.2.0
└─ webpack@5.4.0

> ./node_modules/.bin/webpack-cli i

  System:
    OS: Linux 5.8 Arch Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-5200U CPU @ 2.20GHz
    Memory: 388.09 MB / 11.60 GB
  Binaries:
    Node: 15.0.1 - /usr/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 6.14.7 - /usr/bin/npm
  Browsers:
    Firefox: 81.0.2
  Packages:
    eslint-webpack-plugin: ^2.3.0 => 2.3.0 
    webpack: ^5.4.0 => 5.4.0 
    webpack-cli: ^4.2.0 => 4.2.0 

tsconfig.json (same as above):

{
	"compilerOptions": {
		"allowJs": true,
		"checkJs": true
	},
	"exclude": ["node_modules", "dist"]
}

webpack.config.js (same as above):

const ESLintPlugin = require('eslint-webpack-plugin')

module.exports = {
	plugins: [new ESLintPlugin({})], // <- error on "ESLintPlugin"
}

TypeScript still outputs same error:

> ./node_modules/.bin/tsc --noEmit
webpack.config.js:4:16 - error TS2351: This expression is not constructable.
  Type 'typeof import("/tmp/t/node_modules/eslint-webpack-plugin/declarations/index")' has no construct signatures.

4  plugins: [new ESLintPlugin({})], // <- error on "ESLintPlugin"
                 ~~~~~~~~~~~~

Found 1 error.

Same error in VSCode.

According to type definitions, plugin should be imported as

const { default: ESLintPlugin } = require("eslint-webpack-plugin")
// or
const { ESLintWebpackPlugin } = require("eslint-webpack-plugin")

But when you actually run webpack, both default and ESLintWebpackPlugin will be undefined.

[fcaminada]

Hi, can we have this issue reopened? I am also having this issue. I am using the following package versions:

eslint-webpack-plugin@2.3.0
eslint@7.7.0
typescript@4.0.1
webpack@5.11.0

I am executing webpack from its run API instead of the cli.
I've tried a few different imports on my TS file.

When using the following:

import ESLintWebpackPlugin from "eslint-webpack-plugin";
import {ESLintWebpackPlugin} from "eslint-webpack-plugin";

... further down when I declare the plugins to be used ...
new ESLintWebpackPlugin()

which are transpiled to the following:

const eslint_webpack_plugin_1 = require("eslint-webpack-plugin");
...
// When using `import ESLintWebpackPlugin from "eslint-webpack-plugin";`
new eslint_webpack_plugin_1.ESLintWebpackPlugin();
// or alternatively when using import `{ESLintWebpackPlugin} from "eslint-webpack-plugin";`
new eslint_webpack_plugin_1.default();

I get an error when executing webpack:
TypeError: ESLintWebpackPlugin.default is not a constructor

When trying one of the imports below:

import ESLintWebpackPlugin = require("eslint-webpack-plugin");
import * as ESLintWebpackPlugin from "eslint-webpack-plugin";

I get a TS error when instantiating the ESLintWebpackPlugin class:
This expression is not constructable. Type 'typeof import("e:/git/Retail-Rainier-Pos/node_modules/eslint-webpack-plugin/declarations/index")' has no construct signatures.ts(2351)

When directly requiring, however, I get no JS or TS errors, but I lose all typings on my source code editor:

const ESLintWebpackPlugin = require("eslint-webpack-plugin");

[jhopley-stadion]

Has anyone solved this issue yet?