部署错误：“MiniCssExtractPlugin”类型的参数无法分配给“Plugin”类型的参数

Question

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

• 创建分支进行部署
• 安装 gh-pages 来运行已部署的应用程序
• 在包 json 中添加了部署命令作为脚本

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

    ERROR in C:\Users\Jorrit-Business\School\my-project\webpack\config.ts
[tsl] ERROR in C:\Users\Jorrit-Business\School\my-project\webpack\config.ts(29,5)
      TS2345: Argument of type 'MiniCssExtractPlugin' is not assignable to parameter of type 'Plugin'.

webpack\config.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

解决了我的问题。对于以前的版本来说，这似乎是已知问题。