Skip to content

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

Closed
Closed
"TypeError: MiniCssExtractPlugin is not a constructor" in fresh CRA installation#11930
Labels
issue: bug reportneeds triage

Description

@jathanasiou
jathanasiou
opened on Jan 14, 2022

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

Activity

  1. jathanasiou
    added
    issue: bug report
    needs triage
    on Jan 14, 2022

  2. cgibsonmm commented on Jan 14, 2022

    @cgibsonmm
    cgibsonmm
    on Jan 14, 2022

    Same Failing fresh install Build fails

  3. Morrisonleary commented on Jan 14, 2022

    @Morrisonleary
    Morrisonleary
    on Jan 14, 2022

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

  4. iampava commented on Jan 14, 2022

    @iampava
    iampava
    on Jan 14, 2022

    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.

  5. ConsciousUniverse commented on Jan 14, 2022

    @ConsciousUniverse
    ConsciousUniverse
    on Jan 14, 2022

    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.

  6. iampava commented on Jan 14, 2022

    @iampava
    iampava
    on Jan 14, 2022

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

  7. oBusk commented on Jan 14, 2022

    @oBusk
    oBusk
    on Jan 14, 2022

    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

  8. ConsciousUniverse commented on Jan 14, 2022

    @ConsciousUniverse
    ConsciousUniverse
    on Jan 14, 2022

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

  10. daviesgeek commented on Jan 14, 2022

    @daviesgeek
    daviesgeek
    on Jan 14, 2022

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

  11. berenteb commented on Jan 14, 2022

    @berenteb
    berenteb
    on Jan 14, 2022

    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)

  12. daniil-loban commented on Jan 14, 2022

    @daniil-loban
    daniil-loban
    on Jan 14, 2022

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

  13. daviesgeek commented on Jan 14, 2022

    @daviesgeek
    daviesgeek
    on Jan 14, 2022

    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.

  14. daviesgeek
    added a commit that references this issue on Jan 14, 2022

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

    b17448b

  15. 83 remaining items

  16. thejamespower
    added a commit that references this issue on Jan 18, 2022

    Fix build

    cb159d7
  17. Tonyycc
    added a commit that references this issue on Jan 18, 2022

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

    8c9188f

  18. quocbinh-npm9081 commented on Jan 19, 2022

    @quocbinh-npm9081
    quocbinh-npm9081
    on Jan 19, 2022

    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

  19. asgeir-s
    added a commit that references this issue on Jan 19, 2022

    Downgrade CRA from 5 to 4

    3195f6a
  20. emrahkaya
    added a commit that references this issue on Jan 20, 2022

    Fix mini-css-extract-plugin version

    9a91c0a

  21. tom-sherman commented on Jan 21, 2022

    @tom-sherman
    tom-sherman
    on Jan 21, 2022

    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

  22. okdonga
    added a commit that references this issue on Jan 22, 2022

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

    238a946

  23. robFraser1111 commented on Jan 26, 2022

    @robFraser1111
    robFraser1111
    on Jan 26, 2022

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

  24. nhowell
    added a commit that references this issue on Jan 26, 2022

    npm update

    74be8e9
  25. kenmorechalfant
    added a commit that references this issue on Feb 4, 2022

    fixes react/create-react-app#11930

    ea7a8a1
  26. sbyeol3
    added a commit that references this issue on Feb 24, 2022

    build: fix build plugin type error

    df2ea27
  27. yeezick
    added a commit that references this issue on Mar 13, 2022

    adding a resolution for mini-css-extract-plugin, refer to react/creat…

    48a3b1a
  28. hughrawlinson
    added a commit that references this issue on Mar 15, 2022

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

    103e8f2

  29. Limpisey168 commented on Apr 2, 2022

    @Limpisey168
    Limpisey168
    on Apr 2, 2022

    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

  30. anggapur
    added a commit that references this issue on Apr 22, 2022

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

    de63c32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    issue: bug reportneeds triage

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions