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

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

[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

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