when I use mini-css-extract-plugin I get [webpack-cli] Invalid configuration object error

Question

I am trying to use mini css extract plugin but it doesn't work. I couldn't find what should be the correct configuration. I am getting this: [webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. configuration.plugins[2] should be one of these: object { apply, … } | function Plugin of type object or instanceof Function. Details: configuration.plugins[2] should be an object: object { apply, … } Plugin instance. configuration.plugins[2] should be an instance of function. Function acting as plugin. error Command failed with exit code 2. Do I need to downgrade just webpack or webpack-cli also? Are there any other problem?

webpack.common.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const devMode = process.env.NODE_ENV !== "production";

module.exports = {
    entry: {
        app: "./src/app.js",
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "Expensify",
            template: "./src/index.html",
        }),
        [].concat(devMode ? [] : [new MiniCssExtractPlugin()]),
    ],
    output: {
        path: path.join(__dirname, "public"),
        filename: "bundle.js",
        clean: true,
    },
    module: {
        rules: [
            {
                test: /\.html$/i,
                loader: "html-loader",
            },
            {
                loader: "babel-loader",
                test: /\.js$/,
                exclude: /node_modules/,
            },
            {
                test: /\.s?css$/,
                use: [
                    devMode ? "style-loader" : MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader",
                ],
            },
        ],
    },
};

and package.json:

{
    "name": "expensify",
    "version": "1.0.0",
    "main": "index.js",
    "author": "Nagehan",
    "license": "MIT",
    "private": false,
    "scripts": {
        "serve": "live-server public/",
        "build:dev": "webpack serve --config webpack.dev.js",
        "build:prod": "webpack serve --config webpack.prod.js",
        "dev-server": "webpack serve",
        "test": "jest --config=jest.config.json"
    },
    "dependencies": {
        "@babel/cli": "^7.14.5",
        "@babel/core": "^7.14.6",
        "@babel/plugin-proposal-class-properties": "^7.14.5",
        "@babel/plugin-proposal-object-rest-spread": "^7.14.5",
        "@babel/preset-env": "^7.14.5",
        "@babel/preset-react": "^7.14.5",
        "babel-loader": "^8.2.2",
        "css-loader": "^5.2.6",
        "css-minimizer-webpack-plugin": "^3.0.2",
        "enzyme": "^3.11.0",
        "enzyme-to-json": "^3.6.2",
        "html-loader": "^2.1.2",
        "html-webpack-plugin": "^5.3.2",
        "jest": "^27.0.5",
        "live-server": "^1.2.1",
        "mini-css-extract-plugin": "^1.6.2",
        "moment": "^2.29.1",
        "node-sass": "^6.0.0",
        "normalize.css": "^8.0.1",
        "raf": "^3.4.1",
        "react": "^17.0.2",
        "react-addons-shallow-compare": "^15.6.3",
        "react-dates": "^21.8.0",
        "react-dom": "^17.0.2",
        "react-modal": "^3.14.3",
        "react-redux": "^7.2.4",
        "react-router-dom": "^5.2.0",
        "react-test-renderer": "^17.0.2",
        "redux": "^4.1.0",
        "sass-loader": "^12.1.0",
        "style-loader": "^2.0.0",
        "uuid": "^8.3.2",
        "validator": "^13.6.0",
        "webpack": "^5.39.0",
        "webpack-dev-server": "^3.11.2",
        "webpack-merge": "^5.8.0"
    },
    "devDependencies": {
        "@wojtekmaj/enzyme-adapter-react-17": "^0.6.2",
        "webpack-cli": "^4.7.2"
    }
}

Answer 1

probably you have already found a solution but in case not, this may help you.

By calling concat on an empty array inside the plugins array you always add an array. An array inside plugins is unexpexted. Because of this one solution would be to call concat() on the plugins array directly:

plugins: [
  new HtmlWebpackPlugin({
    title: "Expensify",
    template: "./src/index.html",
  })
].concat(devMode ? [] : [new MiniCssExtractPlugin()])