create-react-app: "TypeError: MiniCssExtractPlugin is not a constructor" in fresh CRA installation

I think it’s because of an update to mini-css-extract-plugin which was bumped 4 hours ago to version 2.5.0. I temporarily fixed it by adding:

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

in package.json.

resolutions is yarn feature. If you’re not using yarn, you can either run

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

or if you’re using npm@>=8.3.0, add overrides

  "overrides": {
    "mini-css-extract-plugin": "2.4.5"
  }

to your package.json, and run npm i

I think it’s because of an update to mini-css-extract-plugin which was bumped 4 hours ago to version 2.5.0. I temporarily fixed it by adding:

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

in package.json.

Pinning the mini css extract version worked for me:

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

Edit:

It does seem like adding resolutions to the package.json works as well:

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

Same Failing fresh install Build fails

I changed import in node_modules/react-scripts/config/webpack.config.js

const { default: MiniCssExtractPlugin } = require('mini-css-extract-plugin');

UPDATE (27 Jan 2022):

Now it seems that it has already been fixed and this import looks like this: const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

Pinning the mini css extract version worked for me:

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

Edit:

It does seem like adding resolutions to the package.json works as well:

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

Absolutely solved it for now, thank you. (Was having a mental breakdown during)

This issue appears to be resolved following the update of mini-css-extract-plugin to version 2.5.1 on 17 January 2022. See: https://github.com/webpack-contrib/mini-css-extract-plugin/releases/tag/v2.5.1

run

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

I tried everything “resolutions” as well as “overrides” but none of these worked until I tried the one above! Thanks!⚡

I ended up simply pinning the version number in my package.json dependences, which finally built correctly, i.e. "mini-css-extract-plugin": "2.4.5". Unsure why adding to resolutions didn’t work for me.

Pinning the mini css extract version worked for me:

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

Edit:

It does seem like adding resolutions to the package.json works as well:

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

This solved it, thank you so much!

I’ve tried the resolutions method (npm), and it usually works in every situation. But not here. I had to take a different approach for our deployments to succeed.

package.json (added node preinstallHotfix)

  "scripts": {
    "preinstall": "npx npm-force-resolutions && node preinstallHotfix",

preinstallHotfix.js

// temp patch breaking change
// https://github.com/webpack-contrib/mini-css-extract-plugin/issues/896

const fs = require("fs")

const file = "./node_modules/react-scripts/config/webpack.config.js"

console.log(
  "Applying hotfix for https://github.com/webpack-contrib/mini-css-extract-plugin/issues/896..."
)

fs.readFile(file, "utf8", function (err, data) {
  if (err) {
    return console.log(err)
  }
  const result = data.replace(
    "require('mini-css-extract-plugin');",
    "require('mini-css-extract-plugin').default;"
  )

  fs.writeFile(file, result, "utf8", function (err) {
    if (err) return console.log(err)
  })
})

@Aninstance did you run yarn install or npm install after you changed package.json?

**This workaround worked for me:

There should be no need to do this now, as the issue has been resolved (see above).

I changed import in node_modules/react-scripts/config/webpack.config.js

const { default: MiniCssExtractPlugin } = require('mini-css-extract-plugin');

worked for me

I’m creating a lot of new projects these days and don’t want to run this every time 😅

Welcome to dependency hell. Allow me to take your coat - you’ll be staying for a wee while 👹

am still getting the same issue, i tried to do all the mentioned solutions but still get the same issue

Are you using NPM? If so, have you cleaned cache & deleted your package-lock.json & node_modules prior to attempted install?

If you are using NPM (and bash), try this:

rm -rf package-lock.json && rm -rf node_modules && npm cache clean --force && npm install

There is no need to manually update package-lock.json, as long as you’re on react-scripts v5 all you need to do is run npm update mini-css-extract-plugin

I changed import in node_modules/react-scripts/config/webpack.config.js

const { default: MiniCssExtractPlugin } = require('mini-css-extract-plugin');

It worked, thank iu ❤️

Install React Scripts again

<npm install react-scripts --force

Issue appears to be resolved as of a bit earlier (see here and here if you wanna skip all the thread).

Just make sure your lockfiles + node_modules is cleared and a fresh npm i should fix it.

Will be closing now.

mini-css-extract-plugin v2.5.1 has been released.

• https://github.com/webpack-contrib/mini-css-extract-plugin/issues/896#issuecomment-1014458314

I got the issue when I try to install ins vercel

This solved a problem changing version npm i -D --save-exact mini-css-extract-plugin@2.4.6 version 2.5.0 has issues for now

Cheers Everyone! I have there is a patch for this soon. I’m creating a lot of new projects these days and don’t want to run this every time 😅

We have a product that has been in production for quite some time. This happened to me yesterday when switch between the master branch and a dev branch. The dev branch had updated &/or changed dependencies so I had to do an npm install or yarn install. This is when the build process stopped working.

I tried pinning “mini-css-extract-plugin”: “2.4.5” and it didn’t work at first. Here is what I finally did to get it to work.

1. Delete the node_modules folder.
2. Delete any package-lock.json or yarn-lock.json
3. Add “mini-css-extract-plugin”: “2.4.5” to the dependencies section.

Then

npm install

After I did the above steps, I was able to get an optimized build.

Didn’t work for 😥. I just started working/learning React 3 days ago, Can you explain what should I do

In my case, the simplest solution was simply to add this to the dependencies in your package.json:

"mini-css-extract-plugin": "2.4.5".

But be sure to make a note to keep an eye out for when the issue is fixed upstream, then remove that line, otherwise that version will be pinned forevermore and you could run into issues later on.

Same, getting the same errors. I have changed my nvm to 16 and even lower than that, tried yarn, cleared out the cache, etc.

Describe the bug

CRA build fails with

TypeError: MiniCssExtractPlugin is not a constructor
    at module.exports (/home/john/Projects/test/node_modules/react-scripts/config/webpack.config.js:664:9)
    at Object.<anonymous> (/home/john/Projects/test/node_modules/react-scripts/scripts/build.js:58:16)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47

Did you try recovering your dependencies?

Clearing package-lock.json and node_modules did not help at all.

└─▪ npm --version
8.3.0

Which terms did you search for in User Guide?

I have been searching for this error for a few hours but I can’t find it anywhere. It shouldn’t be happening on a fresh installation.

Environment

Environment Info:

  current version of create-react-app: 5.0.0
  running from /home/john/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

  System:
    OS: Linux 5.15 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 14.18.2 - /usr/bin/node
    Yarn: 1.22.17 - /usr/bin/yarn
    npm: 8.3.0 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 96.0
  npmPackages:
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    react-scripts: 5.0.0 => 5.0.0 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

Issue can be replicated easily via

npx create-react-app test
cd test
npm run build

Expected behavior

I expected npm run build to work without errors.

Actual behavior

It produced the error TypeError: MiniCssExtractPlugin is not a constructor instead.

Reproducible demo

git clone https://github.com/jathanasiou/react-mincss-crash.git
cd react-mincss-crash
npm i && npm run build

console.log

For amplify users,

if you can not build your amplify app, even you installed "mini-css-extract-plugin": "2.4.5",

please remove yarn.lock file and rebuild in amplify.

it works for my local and my amplify app

Pinning the mini css extract version worked for me:

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

Edit:

It does seem like adding resolutions to the package.json works as well:

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

Worked for me too! Thank you!

I’m actually still having this issue due to the fact that we’re not saving lockfiles. It worked locally but when building on our CI server it was still broken.