typeerror: minicssextractplugin is not a constructor

Cause of typeerror: minicssextractplugin is not a constructor

One can get this typeerror: minicssextractplugin is not a constructor while installing the npm in their systems without changing the package versions. The code snippet for the same is as follows: 

{
  "name": "react-typescript",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "view-file": "ts-node --project ts.node.config.json ./webpack/createViewFile.ts",
    "build-dev": "webpack --env mode=development && npm run build-storybook",
    "build-dev-server": "webpack --env mode=development",
    "build-prod": "webpack --env mode=production",
    "lint": "eslint 'client/**'",
    "storybook": "start-storybook -p 5000",
    "build-storybook": "build-storybook -o ./public/storybook",
    "start": "webpack serve --open"
  },
  "dependencies": {
    "axios": "0.24.0",
    "clsx": "1.1.1",
    "dotenv": "8.6.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-hook-form": "7.19.5",
    "react-router-dom": "6.0.2",
    "react-string-replace": "0.4.4",
    "webpack-cli": "4.9.1"
  },
  "devDependencies": {
    "@babel/core": "7.16.0",
    "@storybook/addon-actions": "6.4.0-rc.2",
    "@storybook/addon-docs": "6.4.0-rc.2",
    "@storybook/addon-essentials": "6.4.0-rc.2",
    "@storybook/addon-links": "6.4.0-rc.2",
    "@storybook/builder-webpack5": "6.4.0-rc.2",
    "@storybook/manager-webpack5": "6.4.0-rc.2",
    "@storybook/preset-scss": "1.0.3",
    "@storybook/react": "6.4.0-rc.2",
    "@types/express": "4.17.13",
    "@types/node": "16.11.7",
    "@types/react": "17.0.33",
    "@types/react-dom": "17.0.10",
    "@typescript-eslint/eslint-plugin": "5.2.0",
    "@typescript-eslint/parser": "5.2.0",
    "babel-loader": "8.2.3",
    "clean-webpack-plugin": "4.0.0",
    "compression-webpack-plugin": "9.0.0",
    "copy-webpack-plugin": "9.1.0",
    "css-loader": "6.5.1",
    "eslint": "7.32.0",
    "eslint-config-airbnb": "18.2.1",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-import": "2.25.2",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-react": "7.26.1",
    "eslint-plugin-react-hooks": "1.7.0",
    "html-webpack-plugin": "5.5.0",
    "mini-css-extract-plugin": "2.4.4",
    "prettier": "2.4.1",
    "sass": "1.43.4",
    "sass-loader": "12.3.0",
    "style-loader": "3.3.1",
    "terser-webpack-plugin": "5.2.4",
    "ts-loader": "9.2.6",
    "ts-node": "10.4.0",
    "typescript": "4.4.4",
    "webpack": "5.64.1",
    "webpack-dev-server": "4.7.3",
    "webpack-manifest-plugin": "4.1.1",
    "webpack-nano": "1.1.1"
  }
}

The error appears as follows: 

[webpack-cli] TypeError: MiniCssExtractPlugin is not a constructor
    at module.exports (/home/andrey/smartadmin-app/webpack.config.js:70:9)
    at loadConfigByPath (/home/andrey/smartadmin-app/node_modules/webpack-cli/lib/webpack-cli.js:1745:27)
    at async WebpackCLI.loadConfig (/home/andrey/smartadmin-app/node_modules/webpack-cli/lib/webpack-cli.js:1830:30)
    at async WebpackCLI.createCompiler (/home/andrey/smartadmin-app/node_modules/webpack-cli/lib/webpack-cli.js:2185:18)
    at async Command.<anonymous> (/home/andrey/smartadmin-app/node_modules/@webpack-cli/serve/lib/index.js:98:30)
    at async Promise.all (index 1)
    at async Command.<anonymous> (/home/andrey/smartadmin-app/node_modules/webpack-cli/lib/webpack-cli.js:1672:7)

Solution

Using this plugin, CSS is separated into distinct files. It generates a CSS file for each JS file that includes a CSS file. SourceMaps and CSS can be loaded on demand.

It is dependent on Webpack 4 and builds on top of the new Module Types feature.

The above problem is a very common issue in react repository. This issue commonly arrives in the package.json file. Use the command given below and add it to the package.json file for the repair of the issue.

"resolutions": {
"mini-css-extract-plugin": "2.4.5"
},


If you are using npm then write:

npm i -D --save-exact mini-css-extract-plugin@2.4.5


Now if we focus on the error we came to notice that the error is appearing due to the undefined constructor. So to solve this we can add the plugin to our code. For a more precise solution, one needs to add .default in the calling function. 

const MiniCssExtractPlugin = require("mini-css-extract-plugin").default;

One more solution is to change the imported link in version 2.5.1. This solution is one of the best solutions to the above problem.

const MiniCssExtractPlugin = require("mini-css-extract-plugin").default;

Also Read: failed to load plugin flowtype declared in package.json