TypeError: MiniCssExtractPlugin is not a constructor Reactjs

Dung Do Tien Jul 23 2022 321

Hi Guys, I created a React application and have many CSS file. I am using mini-css-extract-plugin to help minify CSS for me, but I got error TypeError: MiniCssExtractPlugin is not a constructor.  Here is detail:

        new MiniCssExtractPlugin({
TypeError: MiniCssExtractPlugin is not a constructor
    at module.exports (/project/react/simplenote/config/webpack.config.js:46:9)
    at Object.<anonymous> (/project/react/simplenote/scripts/build.js:51:16)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47

in Webpack.config.js I have code like this:

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

new MiniCssExtractPlugin({
  // Options similar to the same options in webpackOptions.output
  // both options are optional
  filename: 'static/css/[name].[contenthash:8].css',
  chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',

My  Nodeversion is 16.13.2, and NPM version 8.1.2

Thanks for any idea.

Have 1 answer(s) found.
  • b

    brom Jul 23 2022

    The two workarounds right now seem to be these

    1.) Pinning the mini css extract version:

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

    2.) Adding a resolution to the package.json works as well:

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

    Hope can solve this for you.

Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Popular Tips

X Close