部署时出错："MiniCssExtractPlugin"类型的参数不可分配给类型为"插件"的参数

Question

我想部署一个Typescript/Rect项目。我已经完成了以下步骤：

• 创建分支进行部署
• 安装gh页面以运行已部署的应用程序
• 在json包中添加deploy命令作为脚本

在git控制台中运行yarn deploy命令后，显示以下错误：

ERROR in C:UsersJorrit-BusinessSchoolmy-projectwebpackconfig.ts
[tsl] ERROR in C:UsersJorrit-BusinessSchoolmy-projectwebpackconfig.ts(29,5)
TS2345: Argument of type 'MiniCssExtractPlugin' is not assignable to parameter of type 'Plugin'.

webpackconfig.ts中的代码如下：

import bgImage from "postcss-bgimage";
import HtmlWebpackPlugin from "html-webpack-plugin";
import * as webpack from "webpack";
import * as path from "path";
const isProd = process.env.NODE_ENV === "production";
const isDev = !isProd;
import autoprefixer from "autoprefixer";
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import OptimizeCSSAssetsPlugin from "optimize-css-assets-webpack-plugin";
import TerserPlugin from "terser-webpack-plugin";
import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
import svgoConfig from "@triply/utils/lib/svgo";
import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
import { compact } from "lodash";
export const analyzeBundle = process.env["ANALYZE_BUNDLE"] === "true";
const plugins: webpack.Plugin[] = [
new webpack.DefinePlugin({
__DEVELOPMENT__: isDev,
}),
];
if (isDev) {
plugins.push(new ReactRefreshWebpackPlugin());
//ignore these, to avoid infinite loops while watching
plugins.push(new webpack.WatchIgnorePlugin([/.js$/, /.d.ts$/]));
} else {
plugins.push(
new MiniCssExtractPlugin({
filename: "[name].min.css",
chunkFilename: "[id].css",
})
);
} ...

代码文件本身没有显示任何错误。我是不是遗漏了什么？注意：我已经尝试重新安装MiniCssExtractPlugin(v0.9.0(依赖项。

Answer 1

我知道这个未回答的线程已经打开一段时间了，但如果这仍然是一个问题(或者对于任何可能遇到它的人来说(：

通过将@types/mini-css-extract-plugin升级到版本1.2.1，我解决了这个问题。对于以前的版本，这似乎是一个已知的问题。