webpack.factory.ts - Type 'WebpackBar' is not assignable to type 'Plugin'

[ghost]

Ich have a clean setup. With one plugin the setup works. I added a second plugin, and the build process seems broken for all plugins:

php --version
PHP 7.4.16

node --version
v15.12.0

yarn --version
1.22.10

composer -V
2.0.11 2021-02-24 14:57:23

yarn build

yarn run v1.22.10 $ BUILD_PLUGIN=$npm_package_slug yarn --silent parallel-webpack --no-stats --config ../../common/webpack.multi.ts && yarn grunt cachebuster:public && yarn grunt build You are currently building a plugin, please consider to put your webpack:done actions after the yarn build` command for performance reasons!
⨯ Unable to compile TypeScript:
../../common/webpack.factory.ts:339:9 - error TS2322: Type '(WebpackBar | MiniCssExtractPlugin | ForkTsCheckerWebpackPlugin | DefinePlugin)[]' is not assignable to type 'Plugin[]'.
Type 'WebpackBar | MiniCssExtractPlugin | ForkTsCheckerWebpackPlugin | DefinePlugin' is not assignable to type 'Plugin'.
Type 'WebpackBar' is not assignable to type 'Plugin'.
Types of property 'apply' are incompatible.
Type '(compiler: import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/mini-css-extract-plugin/node_modules/@types/webpack/index").Compiler) => void' is not assignable to type '(compiler: import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/webpack/index").Compiler) => void'.
Types of parameters 'compiler' and 'compiler' are incompatible.
Type 'import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/webpack/index").Compiler' is not assignable to type 'import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/mini-css-extract-plugin/node_modules/@types/webpack/index").Compiler'.
The types of 'hooks.shouldEmit.call' are incompatible between these types.
Type '(arg1?: import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/webpack/index").compilation.Compilation, arg2?: any, arg3?: any, ...args: any[]) => any' is not assignable to type '(arg1?: import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/mini-css-extract-plugin/node_modules/@types/webpack/index").compilation.Compilation, arg2?: any, arg3?: any, ...args: any[]) => any'.
Types of parameters 'arg1' and 'arg1' are incompatible.
Property 'addChunkInGroup' is missing in type 'import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/mini-css-extract-plugin/node_modules/@types/webpack/index").compilation.Compilation' but required in type 'import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/webpack/index").compilation.Compilation'.

339 plugins: [
~~~~~~~

../../node_modules/@types/webpack/index.d.ts:1254:13
1254 addChunkInGroup(groupOptions: GroupOptions): ChunkGroup;
~~~~~~~~~~~~~~~
'addChunkInGroup' is declared here.
../../node_modules/@types/webpack/index.d.ts:132:9
132 plugins?: Plugin[];
~~~~~~~
The expected type comes from property 'plugins' which is declared here on type 'Configuration'`

[richdho]

This is how I fixed it, hope it helps

--- a/common/webpack.factory.ts
+++ b/common/webpack.factory.ts
@@ -8,7 +8,7 @@

 import { resolve, join } from "path";
 import fs from "fs";
-import { Configuration, DefinePlugin, Compiler, Options, ProvidePlugin } from "webpack";
+import { Plugin, Configuration, DefinePlugin, Compiler, Options, ProvidePlugin } from "webpack";
 import { spawn, execSync } from "child_process";
 import WebpackBar from "webpackbar";
 import MiniCssExtractPlugin from "mini-css-extract-plugin";
@@ -355,7 +355,7 @@ function createDefaultSettings(
             new MiniCssExtractPlugin({
                 filename: "[name].css"
             })
-        ].concat(process.env.BUILD_PLUGIN ? [] : [new WebpackPluginDone(pwd)])
+        ].concat(process.env.BUILD_PLUGIN ? [] : [new WebpackPluginDone(pwd)]) as Plugin[]
     };

     skipExternals.forEach((key) => {