TypeError: MiniCssExtractPlugin is not a constructor

Solution 1:

There is an open issue for this on the create-react-app repository. It looks like this comment has a temporary fix of adding the following to file package.json:

The below works if you're using Yarn:

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

Use the command below for npm:

npm i -D --save-exact [email protected]

Solution 2:

For me it was working too and after an update it just stopped working, but as the error suggests, the constructor is undefined, so I changed the way the plugin was called and it worked.

Add '.default' in the call as below:

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

Solution 3:

As suggested by Macedo_Montalvão and Sharpek:

You can go to your React project folder.

Then head over to this path:

node_modules\react-scripts\config

Open the webpack.config.js file.

Replace

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

with

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

This should work.

Solution 4:

There are breaking changes in this plugin (I think this was by mistake). Here you can read more about this:

The best solution is to change import linked as Macedo_Montalvão said.

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

This error was fixed in version 2.5.1.