MiniCssExtractPlugin is a community-maintained third-party package that does not belong to Webpack and may not have the same support, security policy, or licensing. Using this plugin, CSS is separated into distinct files. “TypeError: MiniCssExtractPlugin is not a constructor” is a common error. How can we get down to its roots and fix this problem once and for all? Let’s check out our guidelines below to find out the answers!

When Do You Get “TypeError: MiniCssExtractPlugin is not a constructor” Error?

You are attempting to run your program but you are facing the error below.

[webpack-cli] TypeError: MiniCssExtractPlugin is not a constructor

How To Fix “TypeError: MiniCssExtractPlugin is not a constructor” Error

Method 1: Mini-CSS-Extract-Plugin should be updated

Version 2.5.0 of the mini-css-extract-plugin may be the cause of the issue “TypeError: MiniCssExtractPlugin is not a constructor”. Therefore, Mini-CSS-Extract-Plugin should be updated. Ifmini-css-extract-pluginhas been updated, you simply need to downgrade to 2.4.5. Just like This in your package.json. Like as the following in your package. json:

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

And to downgrade, simply run this command if you are using NPM.

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

After doing that, your error will be completely resolved.

Method 2: The following syntax can be used in your webpack config file

The following syntax can be used in your webpack config file if, for any reason, you are unable to update the package:

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

This is also the second method we want to suggest for you to resolve your problem. Let’s do it to get your desired results.

Method 3: When using Yarn, the following works

Excepting two methods mentioned above, there is another solution for you to solve the error “TypeError: MiniCssExtractPlugin is not a constructor”. Let’s read the following guide to understand more about this method.

On the create-react-app repository, there is a current open issue for this. It appears that adding the following to the file package will serve as a temporary fix for this comment. json:

When using Yarn, the following works:

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

Let’s run the following command for npm:

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

These solutions mentioned above are very simple, aren’t they? However, they work very perfectly. They will make your error “TypeError: MiniCssExtractPlugin is not a constructor” completely disappear and your program will run well without any errors. So, what are you waiting without applying them for your problem to get the desired results?

Conclusion

We hope that you will enjoy our article about the error. With this knowledge, we know that you can fix your error: “TypeError: MiniCssExtractPlugin is not a constructor” quickly by following these steps! If you still have any other questions about fixing this syntax error, please leave a comment below. Finally, we hope you’re having fun with the amazing code options and appreciate spending time reading. Thank you!

Read more

→ TypeError: ‘Series’ Objects Are Mutable, Thus They Cannot Be Hashed