Update types.d.ts

[sharky98]

Issue

Depending on my tsconfig.json configuration, I had trouble importing this plugin (has no construct signatures, Unsafe construction of an any type value., etc.).

I used different kinds of imports that all failed with my configuration (well, I tried to just bypass them with @ts-ignore or eslint-disable and it did works for some situations).

• import GasPlugin from "gas-webpack-plugin";
• import { GasPlugin } from "gas-webpack-plugin";
• import * as GasPlugin from "gas-webpack-plugin";
• import GasPlugin = require("gas-webpack-plugin");
• const GasPlugin = require("gas-webpack-plugin");

I also tried to use different variation on the object initialisation:

• new GasPlugin();
• new GasPlugin.default();

⚠️ Note that this seems to be a common issue for Webpack plugins with my various configurations.

Analysis

From my understanding, the file index.js was written as a CommonJS module (due to the const = require() and module.exports. However, the type.d.ts was written as if the package was authored as ECMAScript module (due to import from and export default).

As references to resolve this I used the following references.

• Similar issues
  • ESLintPlugin has no construct signatures webpack-contrib/eslint-webpack-plugin#16
  • TS Typing error: "This expression is not constructable." when esModuleInterop is false webpack-contrib/eslint-webpack-plugin#65
• Comments and articles that "explained" the difference between esm and cjs in regards to imports and exports.
  • Write a FAQ entry for export = vs export default / import variants microsoft/TypeScript#7185 (comment)
  • https://dev.to/abbeyperini/tldr-commonjs-vs-esm-47dk
• Source file that was said to be working for someone else
  • https://github.com/DefinitelyTyped/DefinitelyTyped/blob/54d540ab4deb2588c0eff39dadf370cbf0a2dee4/types/css-minimizer-webpack-plugin/index.d.ts

Solution

Based on the analysis, I rewrote type.d.ts by using export = to (hopefully!) indicate that the module was written as a CommonJS. This seems to works for my first configuration.

Configurations

I will keep as draft for the time being, while I test with my other configurations (I have transpile to JS in esm and cjs for the package and others various when I use the package). I will add all info on those variations here when tested on my side. This will be manual testing, I will leave to you or another contributor to write tests if needed.

Config 1 - Made to run jest - ✅

⚠ Needs to import with import GasPlugin = require("gas-webpack-plugin");.

tsconfig.json

{                       
    "compilerOptions": {
        "esModuleInterop": true,
        "lib": ["es2023"],
        "moduleResolution": "node16",
        "newLine": "lf",
        "target": "es2022",
        "composite": true,
        "declaration": true,
        "declarationMap": true,
        "incremental": true,
        "noEmit": false,
        "sourceMap": true,
        "module": "es2022",
        "strict": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "allowUnusedLabels": false,
        "allowUnreachableCode": false,
        "exactOptionalPropertyTypes": true,
        "noFallthroughCasesInSwitch": true,
        "noImplicitOverride": true,
        "noImplicitReturns": true,
        "noPropertyAccessFromIndexSignature": true,
        "noUncheckedIndexedAccess": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "checkJs": true,
        "verbatimModuleSyntax": false,
        "rootDir": "./src",
        "outDir": "./dist/tests",
        "declarationDir": "./types/test"
    },
    "include": ["src"],
    "exclude": ["node_modules"]
}