Plugins for Webpack 5 and DT compatibility

[simPod]

So I have updated the types for w5 according to #52225 for:

• dotenv-webpack Update dotenv-webpack to webpack 5 #52781
• webpack-assets-manifest Update webpack-assets-manifest to webpack 5 #52782

However, I'm still getting such error w/ TS 4.2 for both:

TS2322: Type 'DotenvWebpackPlugin' is not assignable to type '((this: Compiler, compiler: Compiler) => void) | WebpackPluginInstance'.   Type 'DotenvWebpackPlugin' is not assignable to type 'WebpackPluginInstance'.
     Types of property 'apply' are incompatible.
       Type '(compiler: import("path/node_modules/@types/dotenv-webpack/node_modules/webpack/types").Compiler) => void' is not assignable to type '(compiler: import("path/node_modules/webpack/types").Compiler) => void'.
         Types of parameters 'compiler' and 'compiler' are incompatible.
           Type 'import("path/node_modules/webpack/types").Compiler' is not assignable to type 'import("path/node_modules/@types/dotenv-webpack/node_modules/webpack/types").Compiler'.
             The types of 'hooks.shouldEmit' are incompatible between these types.
               Type 'import("path/node_modules/tapable/tapable").SyncBailHook<[import("path/node_modules/webpack/types").Compilation], boolean, import("path/node_modules/tapable/tapable").UnsetAdditionalOptions>' is not assignable to type 'import("path/node_modules/tapable/tapable").SyncBailHook<[import("path/node_modules/@types/dotenv-webpack/node_modules/webpack/types").Compilation], boolean, import("path/node_modules/tapable/tapable").UnsetAdditionalOptions>'.

The types of Compiler are identical. The issue is in something I don't fully comprehend. I found how to "fix" it manually:

cd node_modules/@types/dotenv-webpack
yarn install

Don't know why it works though. @sandersn mentioned here #52225 (comment) that it's not fully documented yet and maybe also not fully supported?

Installing dependencies for the type folder resolves the type incompatibility.
Before:

After:

[sandersn]

Hmm, the PR you linked looks right to me.

The version of webpack you have doesn't match the version from @types/dotenv-webpack. What do the respective package.jsons in node_modules/webpack and node_modules/@types/dotenv-webpack say?

(I'm also interested to see what the versions of tapable are, though it doesn't appear to have a problem here.)

[simPod]

Ouch, I opened this in a tab and it got stalled there :/ sorry.

webpack says "version": "5.38.1";;; "tapable": "^2.1.1"

@types/dotenv-wepacks says. "webpack": "^5"; "tapable": "^2.2.0",

At the first sight, I don't see anything wrong.

[sandersn]

Does node_modules/@types/dotenv-webpack have a nested node_modules with webpack in it, like node_modules/@types/dotenv-webpack/node_modules/webpack?

[simPod]

Yes, there is

[sandersn]

In that case, I think you'll find that the version in the nested webpack's package.json is different from the toplevel webpack's package.json.

[simPod]

hmmm, the nested version is 5.31 while toplevel is 5.37 though I'd not expect that to be incompatible 🤔

[sandersn]

You might check the git history for types.d.ts for the dates between 5.31 and 5.37. I suspect incompatible types tend to ship as minor versions more often than other incompatibilities.

[simPod]

You're right. There seems to be some BC incompatible changes. I'll ignore it.

[AviVahl]

Remove the webpack@ section from the yarn.lock and rerun yarn. It will re-resolve both semver requests to the latest webpack@5 and dedupe them.

[simPod]

Ok, I just stumbled upon the same thing and your solution worked again. Thanks!