TypeError: MiniCssExtractPlugin is not a constructor Reactjs

Dung Do Tien Jul 23 2022 192

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:

 /project/react/simplenote/config/webpack.config.js:46
        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.

Related Q&A May You Like

  1. Error: Objects are not valid as a React child (found: [object Promise])
  2. Error: Cannot find module '@babel/core' in Reactjs
  3. Error: JSX expressions must have one parent element in ReactJs
  4. Error: Rendered more hooks than during the previous render in Reactjs
  5. Error: Objects are not valid as a React child in Reactjs
  6. Error ReferenceError: React is not defined in Reactjs
  7. ReferenceError: Component is not defined in ReactJs
  8. Error: Objects are not valid as a React child in ReactJs
  9. Error sh: react-scripts: command not found in Reactjs
  10. Error:0308010C:digital envelope routines::unsupported in Reactjs
  11. TypeScript error in E:/VSCODE/src/components/Header/index.tsx(13,17): '{' expected. TS1005
  12. TypeError: get(...)._f.ref.focus is not a function in ReactJs
  13. ReactJS: Invalid DOM property `stroke-Width`.
  14. Invariant failed: You should not use <Route> outside a <Router> in Reactjs
  15. ReactJS ReferenceError: regeneratorRuntime is not defined
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.

Most Quizs Popular

Start Test

Javascript - Functions

Start Test

Asp.Net Core - Exam test 01

Start Test

Asp.Net Core - Exam test 02

Start Test

C# - Level Beginner

Popular Tips

This site uses cookies so that we can remember you and understand how you interact with our website. This allows us to improve and customize your browsing experience. See our Cookies Policy.
X Close