reactjs - 部署错误 : Argument of type 'MiniCssExtractPlugin' is not assignable to parameter of type 'Plugin'

Question

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

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

在git控制台运行yarn deploy命令后出现如下错误:

    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 解决了这个问题。似乎对于以前的版本这是 a known issue .