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

[ConsciousUniverse]

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

[ConsciousUniverse]

@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).

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.