Error on deployment: Argument of type 'MiniCssExtractPlugin' is not assignable to parameter of type 'Plugin'

Viewed 1021

I want to deploy a Typescript / React project. I have already done the following steps:

  • Create branch for deployment
  • Install gh-pages to run deployed application
  • added deploy command as script in the package json

After running the yarn deploy command in the git console the following error is shown:

    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'.

The code in webpack\config.ts looks like this:

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",
    })
  );
} ...

The code file itself shows no errors. Am I missing something here? Note: I have already tried to reinstall the MiniCssExtractPlugin (v0.9.0) dependency.

1 Answers

I know it's been a while since this unanswered thread has been opened, but if this is still a problem (or for anyone who may run into it):

The issue was solved for me by upgrading @types/mini-css-extract-plugin to version 1.2.1. Seems that for previous versions this was a known issue.

Related