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 theyarn 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) => {