Html-webpack-plugin: 4.0.3: TS2322: Type 'HtmlWebpackPlugin' is not assignable to type 'Plugin'

[stilettk]

Expected behaviour

Build should succeed like in v4.0.2.

Current behaviour

TSError: ⨯ Unable to compile TypeScript:
webpack.config.ts:59:3 - error TS2322: Type 'HtmlWebpackPlugin' is not assignable to type 'Plugin'.
  Types of property 'apply' are incompatible.
    Type '(compiler: import("C:/Users/n.batov/RiderProjects/restaurantcashier-frontend/node_modules/html-webpack-plugin/node_modules/@types/webpack/index").Compiler) => void' is not assignable to type '(compiler: import("C:/Users/n.batov/RiderProjects/restaurantcashier-frontend/node_modules/@types/webpack/index").Compiler) => void'.
      Types of parameters 'compiler' and 'compiler' are incompatible.
        Type 'import("C:/Users/n.batov/RiderProjects/restaurantcashier-frontend/node_modules/@types/webpack/index").Compiler' is not assignable to type 'import("C:/Users/n.batov/RiderProjects/restaurantcashier-frontend/node_modules/html-webpack-plugin/node_modules/@types/webpack/index").Compiler'.
          The types of 'hooks.shouldEmit.call' are incompatible between these types.
            Type '(arg1?: import("C:/Users/n.batov/RiderProjects/restaurantcashier-frontend/node_modules/@types/webpack/index").compilation.Compilation | undefined, arg2?: any, arg3?: any, ...args: any[]) => any' is not assignable to type '(arg1?: import("C:/Users/n.batov/RiderProjects/restaurantcashier-frontend/node_modules/html-webpack-plugin/node_modules/@types/webpack/index").compilation.Compilation | undefined, arg2?: any, arg3?: any, ...args: any[]) => any'.
              Types of parameters 'arg1' and 'arg1' are incompatible.
                Type 'import("C:/Users/n.batov/RiderProjects/restaurantcashier-frontend/node_modules/html-webpack-plugin/node_modules/@types/webpack/index").compilation.Compilation | undefined' is not assignable to type 'import("C:/Users/n.batov/RiderProjects/restaurantcashier-frontend/node_modules/@types/webpack/index").compilation.Compilation | undefined'.                  Type 'import("C:/Users/n.batov/RiderProjects/restaurantcashier-frontend/node_modules/html-webpack-plugin/node_modules/@types/webpack/index").compilation.Compilation' is not assignable to type 'import("C:/Users/n.batov/RiderProjects/restaurantcashier-frontend/node_modules/@types/webpack/index").compilation.Compilation'.

 59     new HtmlWebpackPlugin({
        ~~~~~~~~~~~~~~~~~~~~~~~
 60             filename: 'index.html',
    ~~~~~~~~~~~~~~~~~~~~~~~~~~
...
 63             favicon: resolve(__dirname, 'public/content/images/favicon.ico'),
    ~~~~~~~~~

Environment

Tell us which operating system you are using, as well as which versions of Node.js, npm, webpack, and html-webpack-plugin. Run the following to get it quickly:

node -e "var os=require('os');console.log('Node.js ' + process.version + '\n' + os.platform() + ' ' + os.release())"
Node.js v12.2.0
win32 10.0.18363

npm --version
6.9.0

npm ls webpack
`-- [email protected]

npm ls html-webpack-plugin
`-- [email protected]

Config

Copy the minimal webpack.config.js to produce this issue:

I use typescript in webpack config.ts

import HtmlWebpackPlugin from 'html-webpack-plugin'
...
plugins: [
...
    module: {
        rules: [
            {
                options: {
                    transpileOnly: true,
                    configFile: 'tsconfig.build.json',
                },
                test: /\.(js|tsx?)$/,
                exclude: /node_modules/,
                loader: 'ts-loader',
            },
            { test: /\.css$/, use: ['style-loader'] },
            { test: /\.(png|jpe?g|gif|woff(2)?)$/, loader: 'file-loader' },
            {
                test: /\.svg$/,
                use: ['@svgr/webpack', 'file-loader'],
            },
        ],
    },
...
    new HtmlWebpackPlugin({
        filename: 'index.html',
        chunks: ['main'],
        template: resolve(__dirname, 'public/index.html'),
        favicon: resolve(__dirname, 'public/content/images/favicon.ico'),
    }),
...
]

Additional context

The problem is not reproduced in version 4.0.2

[argv-minus-one]

The problem is that there is both a node_modules/@types/webpack and a node_modules/html-webpack-plugin/node_modules/@types/webpack with incompatible type definitions.

This happens because html-webpack-plugin has a dependency on @types/webpack, and so does your project, but your project depends on an older version of @types/webpack. Npm, silly thing that it is, handles this situation by silently installing a separate, incompatible copy of @types/webpack just for html-webpack-plugin!

You can fix it by running npm update @types/webpack, then npm dedupe. This should remove node_modules/html-webpack-plugin/node_modules/@types/webpack and make TypeScript happy.

---

To prevent this kind of version conflict, html-webpack-plugin could declare a less strict dependency on @types/webpack like so:

{
"dependencies": {
    "@types/webpack": "~4"
}
}

[jantimon]

I like the idea of "@types/webpack": "~4"

Would it also help to declare it as peer dependency?

[AviVahl]

you don't want pure-javascript users to get a peerDependency warning, so probably not. maybe a peerDependency with peerDependencyMeta as well (supported by current npm/yarn versions)?

see: https://github.com/yarnpkg/rfcs/blob/master/accepted/0000-optional-peer-dependencies.md

[jantimon]

@argv-minus-one @AviVahl do you see any possible issues for merging #1402?

[AviVahl]

yeah. I fail to see how the ~ will "fix" any duplicates for package consumers. It may even cause duplicates. That request is also confusing... Do I get the latest 4.x.x? latest 4.0.x (I believe this one is the case)?

It's important to note each semver request is being resolved on its own and locked.

So say I have a project using @types/webpack@^4.40.0, which was locked in my lockfile to whatever was available at the time npm resolved "^4.40.0". Now when upgrading html-webpack-plugin, npm will now see a new request "~4", and will resolve that separately.

[AviVahl]

@jantimon

TBH, thinking a bit more about this, I actually don't think html-webpack-plugin should to install @types/webpack for consumers at all.

JavaScript-based projects don't really need/use them.

TypeScript-based projects should already have them installed (with own specific version) if they are importing webpack from any .ts file, which is the case for also importing this plugin package and using its types. Many projects don't even do that and just use untyped webpack.config.js.

I think @types/webpack should be a "devDependency", leaving the versioning of it to user projects if they they-check it. It makes sense, as webpack is a "peerDependency".

[criles25]

For people getting ^ in their project, I suggest setting up https://github.com/TypeStrong/fork-ts-checker-webpack-plugin. It will fix this error and significantly improve compile times.

[jonhaddow]

I noticed some plugins using an old version of Webpack. Enforcing the correct type definition version helped resolve this for me.

"resolutions": {
    "@types/webpack": "^4.41.17"
},

[stale[bot]]

This issue had no activity for at least half a year. It's subject to automatic issue closing if there is no activity in the next 15 days.