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.