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

jathanasiou · 2022-01-14T20:07:42Z

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

The text was updated successfully, but these errors were encountered:

cgibsonmm · 2022-01-14T20:36:55Z

Same Failing fresh install Build fails

Morrisonleary · 2022-01-14T21:15:36Z

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 · 2022-01-14T21:20:00Z

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 · 2022-01-14T21:42:31Z

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 · 2022-01-14T21:44:19Z

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

oBusk · 2022-01-14T21:45:10Z

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 [email protected]

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 · 2022-01-14T21:49:32Z

@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 · 2022-01-14T21:51:28Z

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 · 2022-01-14T21:52:50Z

Pinning the mini css extract version worked for me:

npm i -D --save-exact [email protected]

Edit:

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

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

berenteb · 2022-01-14T22:34:04Z

Pinning the mini css extract version worked for me:
npm i -D --save-exact [email protected]
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 · 2022-01-14T22:47:15Z

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 · 2022-01-14T23:08:59Z

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.

… new version

UplandsDynamic · 2022-01-14T23:41:51Z

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.

See details on the bug here: this issue: facebook/create-react-app#11930 Revert this change when the bug is resolved.

facebook/create-react-app#11930 (comment)

sufyan-motala · 2022-01-15T05:35:09Z

Pinning the mini css extract version worked for me:
npm i -D --save-exact [email protected]
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!

- pin mini-css-extract-plugin as suggested facebook/create-react-app#11930

gladwinK · 2022-01-15T10:37:20Z

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

참고(facebook/create-react-app#11930)

UplandsDynamic · 2022-01-15T11:32:00Z

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 · 2022-01-15T12:12:13Z

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 · 2022-01-15T12:16:19Z

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 · 2022-01-18T07:15:24Z

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

###try running

npm install react-scripts --force

Hitgoc · 2022-01-18T07:18:25Z

Install React Scripts again

<npm install react-scripts --force

arip-1990 · 2022-01-18T08:38:19Z

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'

facebook/create-react-app#11930

quocbinh-npm9081 · 2022-01-19T09:54:36Z

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

Due to some challenges with the new version: - facebook/create-react-app#11756 - https://stackoverflow.com/questions/70429654/webpack-5-errors-cannot-resolve-crypto-http-and-https-in-reactjs-proje - facebook/create-react-app#11930

Similar issue as in: - facebook/create-react-app#11930

tom-sherman · 2022-01-21T11:31:09Z

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

…ild process * facebook/create-react-app#11930 (comment)

robFraser1111 · 2022-01-26T00:35:52Z

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

Also, unpin specific version of mini-css-extract-plugin. The issue that was causing builds to fail has been fixed. See: facebook/create-react-app#11930

facebook/create-react-app#11930 (comment)

…eate-react-app#11930

Limpisey168 · 2022-04-02T12:17:14Z

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

facebook/create-react-app#11930 (comment)

jathanasiou added issue: bug report needs triage labels Jan 14, 2022

daviesgeek added a commit to daviesgeek/create-react-app that referenced this issue Jan 14, 2022

Fix issue facebook#11930 where mini css extract plugin was updated to…

b17448b

… new version

TristanWatanabe mentioned this issue Jan 14, 2022

temp fix: resolve mini-css-extractor-plugin to an older version for cra-template & projects-test microsoft/fluentui#21295

Merged

Lundeful mentioned this issue Jan 14, 2022

Bug: Cannot create a build of the project #11931

Open

dylnclrk mentioned this issue Jan 15, 2022

Upgrade to react-scripts 5 carbonfive/spraygun-react-ts#249

Merged

11 tasks

brookr added a commit to brookr/cra-template-react-portfolio that referenced this issue Jan 15, 2022

Add a temporary work-around for a CRA bug

c477789

See details on the bug here: this issue: facebook/create-react-app#11930 Revert this change when the bug is resolved.

LarsKemmann added a commit to CareTogether/CareTogetherCMS that referenced this issue Jan 15, 2022

Workaround for CRA issue (see link in commit description)

1e8913f

facebook/create-react-app#11930 (comment)

kylejb mentioned this issue Jan 15, 2022

feat(server): refactor to support TypeScript kylejb/space-station-tracker#51

Merged

3 tasks

Tastyep added a commit to Tastyep/Pi-OpenCast that referenced this issue Jan 15, 2022

chore: update webapp dependencies

0191dc6

- pin mini-css-extract-plugin as suggested facebook/create-react-app#11930

identity16 added a commit to identity16/life-gallery that referenced this issue Jan 15, 2022

hotfix: build error

2e2d2f0

참고(facebook/create-react-app#11930)

fabiankaegy mentioned this issue Jan 15, 2022

"TypeError: MiniCssExtractPlugin is not a constructor" in fresh wp-scripts installation WordPress/gutenberg#38003

Closed

heng1025 added a commit to 1r21/haerbin that referenced this issue Jan 18, 2022

fix: build error(facebook/create-react-app#11930)

c87a6ac

thejamespower added a commit to thejamespower/react-order-book that referenced this issue Jan 18, 2022

Fix build

cb159d7

facebook/create-react-app#11930

TristanWatanabe mentioned this issue Jan 18, 2022

chore: remove temp fix for mini-css-extractor-plugin error microsoft/fluentui#21326

Merged

forcey mentioned this issue Jan 18, 2022

fix mini-css-extract-plugin forcey/nft-rental-marketplace#3

Merged

Tonyycc added a commit to Tonyycc/conflux-certificate-bac that referenced this issue Jan 18, 2022

temporal-fix: facebook/create-react-app#11930

8c9188f

quocbinh-npm9081 mentioned this issue Jan 19, 2022

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

Open

emrahkaya added a commit to emrahkaya/binderhub that referenced this issue Jan 20, 2022

Fix mini-css-extract-plugin version

9a91c0a

Similar issue as in: - facebook/create-react-app#11930

emrahkaya mentioned this issue Jan 20, 2022

Fix mini-css-extract-plugin version jupyterhub/binderhub#1447

Closed

okdonga added a commit to okdonga/polygon-smart-contract-dapp that referenced this issue Jan 22, 2022

Resolve TypeError: MiniCssExtractPlugin is not a constructor" in a bu…

238a946

…ild process * facebook/create-react-app#11930 (comment)

This was referenced Jan 24, 2022

React Website with Embedded MongoDB Charts coding-to-music/coding-to-music.github.io#358

Open

A Simple Website with React, Axios and a REST API Built with MongoDB Realm coding-to-music/coding-to-music.github.io#359

Open

nhowell added a commit to nhowell/exo that referenced this issue Jan 26, 2022

npm update

74be8e9

Also, unpin specific version of mini-css-extract-plugin. The issue that was causing builds to fail has been fixed. See: facebook/create-react-app#11930

kenmorechalfant added a commit to kenmorechalfant/unit-converter-react that referenced this issue Feb 4, 2022

fixes facebook/create-react-app#11930

ea7a8a1

sbyeol3 added a commit to Nexters/BRUNO that referenced this issue Feb 24, 2022

build: fix build plugin type error

df2ea27

facebook/create-react-app#11930 (comment)

yeezick added a commit to yeezick/Bootcamper that referenced this issue Mar 13, 2022

adding a resolution for mini-css-extract-plugin, refer to facebook/cr…

48a3b1a

…eate-react-app#11930

This was referenced Mar 13, 2022

adding a resolution for mini-css-extract-plugin, refer to https://git… yeezick/Bootcamper#47

Merged

removing resoolution & attempting to save exact version of mini-css yeezick/Bootcamper#48

Merged

hughrawlinson added a commit to hughrawlinson/track-renderer that referenced this issue Mar 15, 2022

fix facebook/create-react-app/issues/11930

103e8f2

This was referenced Apr 2, 2022

> <!--console.log #12227

Open

facebook/create-react-app #12230

Open

facebook/create-react-app #12233

Open

anggapur pushed a commit to anggapur/Frock-Dapp that referenced this issue Apr 22, 2022

fix: install mini-css-extract-plugin to fix bug when build

de63c32

facebook/create-react-app#11930 (comment)

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

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

Comments

jathanasiou commented Jan 14, 2022 • edited Loading

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

Reproducible demo

cgibsonmm commented Jan 14, 2022

Morrisonleary commented Jan 14, 2022 • edited Loading

iampava commented Jan 14, 2022 • edited Loading

UplandsDynamic commented Jan 14, 2022

iampava commented Jan 14, 2022

oBusk commented Jan 14, 2022 • edited Loading

UplandsDynamic commented Jan 14, 2022

ghost commented Jan 14, 2022 • edited by ghost Loading

daviesgeek commented Jan 14, 2022 • edited Loading

berenteb commented Jan 14, 2022

daniil-loban commented Jan 14, 2022 • edited Loading

daviesgeek commented Jan 14, 2022

UplandsDynamic commented Jan 14, 2022

sufyan-motala commented Jan 15, 2022

gladwinK commented Jan 15, 2022

UplandsDynamic commented Jan 15, 2022

tareq-rar commented Jan 15, 2022 • edited Loading

UplandsDynamic commented Jan 15, 2022

Hitgoc commented Jan 18, 2022

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

Reproducible demo

Hitgoc commented Jan 18, 2022

Install React Scripts again

arip-1990 commented Jan 18, 2022

quocbinh-npm9081 commented Jan 19, 2022

tom-sherman commented Jan 21, 2022

robFraser1111 commented Jan 26, 2022

Limpisey168 commented Apr 2, 2022

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

Reproducible demo

jathanasiou commented Jan 14, 2022 •

edited

Loading

Morrisonleary commented Jan 14, 2022 •

edited

Loading

iampava commented Jan 14, 2022 •

edited

Loading

oBusk commented Jan 14, 2022 •

edited

Loading

ghost commented Jan 14, 2022 •

edited by ghost

Loading

daviesgeek commented Jan 14, 2022 •

edited

Loading

daniil-loban commented Jan 14, 2022 •

edited

Loading

tareq-rar commented Jan 15, 2022 •

edited

Loading