"TypeError: MiniCssExtractPlugin is not a constructor" in fresh CRA installation

[jathanasiou]

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

[cgibsonmm]

Same Failing fresh install Build fails

[Morrisonleary]

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

[iampava]

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.

[UplandsDynamic]

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.

I tried that, to no avail; the same issue persists.

[iampava]

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

[oBusk]

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

[UplandsDynamic]

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

I'm using npm, however have multiple other resolutions in the list, which are installed running npx npm-force-resolutions. I run this after having run npm install (npm install does not correctly install the resolutions listed in package.json automatically).

[ghost]

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)
  })
})

[daviesgeek]

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"
  }

[berenteb]

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)

[daniil-loban]

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');

[daviesgeek]

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.

[UplandsDynamic]

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.

[sufyan-motala]

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!

[gladwinK]

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.

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

[UplandsDynamic]

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.

[tareq-rar]

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.

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

[UplandsDynamic]

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

[Hitgoc]

Install React Scripts again

<npm install react-scripts --force

[arip-1990]

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.

don't forget to remove 'node_modules'

[quocbinh-npm9081]

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

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

It worked, thank iu <3

[tom-sherman]

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

[robFraser1111]

For me I just needed to install mini-css-extract-plugin to get the build working.

[Limpisey168]

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