Bug: Cannot create a build of the project

[ronaldgj]

React version: 17.0.2

Steps To Reproduce

1. Clean install with npx create-react-app app-name (without Typescript)
2. After install go in to folder and run npm run build.

The current behavior

You'll get an error about the MiniCssExtractPlugin.

TypeError: MiniCssExtractPlugin is not a constructor

The expected behavior

It should create a build version of the app 🙂

[RelishedChicken]

I can confirm having the same issue on a react app I created 1 hour ago. I can neither build or deploy.

[Severenit]

I also can confirm having the same issue on a react app. I can neither build or deploy.

[Lundeful]

More info
#11930

The temporary fix (mentioned in the issue) of editing the package.json to specify an earlier version of mini-css-extract-plugin worked for me. Just remember to run yarn/npm install.

[astalarico]

I also can confirm having the same issue.

[Micah-6424]

yeah, its still not working

[ShernanJ]

Downgrading the version fixed it, add this into package.json.

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

[hamilton-mike]

Hello, @ShernanJ I've added the code to my package.json and I'm still getting the TypeError.

[ShernanJ]

@hamilton-mike try to delete your node_modules folder, While you still have the code above inside package.json, then reinstall your packages with npm install.

[hamilton-mike]

@ShernanJ still no bueno. getting the same error.

[LaetitiaBodin]

Same issue here.
What is weird : I can run npm run start without problem (at least, all is not lost), but npm run build just fails.
And yes, I've used the fix npm i -D --save-exact mini-css-extract-plugin@2.4.5 but the issue still remains and I've tried clearing the cache, reinstalling npm and so on.

[JakeSchieber]

Resolutions only works if using yarn, see: #11930 (comment)

npm i -D --save-exact mini-css-extract-plugin@2.4.5 and npm install worked for me.

[iaseth]

I faced the same problem and shared the solution here #11934

[hamilton-mike]

@iaseth thank you for the share.

[LaetitiaBodin]

Thank you @iaseth . For some reason, @2.4.5 would not work, but @2.4.6 did the job.
The fix npm install mini-css-extract-plugin@2.4.6 was the one that worked for me.

[uhef]

I ended up pinning mini-css-extract-plugin to 2.4.7 which seemed to be the last version before 2.5.0:

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

[garrettcfermo]

I have tried all of these solutions and nothing seems to work for me. Does anyone else have ideas on how to fix the problem? I have deleted and refreshed everything but it still is not working. Tried the resolution / overrides / and adding it to my dependencies.

Hopefully they have a fix for this soon because I cant build any of my projects.

[leeopop]

@garrettcfermo Try to edit your package.lock file according to the following database.

Then, use npm ci instead of npm install. This will fixate module version to 2.4.7.

    "node_modules/react-scripts/node_modules/mini-css-extract-plugin": {
      "version": "2.4.7",
      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.4.7.tgz",
      "integrity": "sha512-euWmddf0sk9Nv1O0gfeeUAvAkoSlWncNLF77C0TP2+WoPvy8mAHKOzMajcCz2dzvyt3CNgxb1obIEVFIRxaipg==",
      "dependencies": {
        "schema-utils": "^4.0.0"
      },
      "engines": {
        "node": ">= 12.13.0"
      },
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/webpack"
      },
      "peerDependencies": {
        "webpack": "^5.0.0"
      }
    },

"mini-css-extract-plugin": {
          "version": "2.4.7",
          "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.4.7.tgz",
          "integrity": "sha512-euWmddf0sk9Nv1O0gfeeUAvAkoSlWncNLF77C0TP2+WoPvy8mAHKOzMajcCz2dzvyt3CNgxb1obIEVFIRxaipg==",
          "requires": {
            "schema-utils": "^4.0.0"
          },
          "dependencies": {
            "ajv": {
              "version": "8.8.2",
              "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.8.2.tgz",
              "integrity": "sha512-x9VuX+R/jcFj1DHo/fCp99esgGDWiHENrKxaCENuCxpoMCmAt/COCGVDwA7kleEpEzJjDnvh3yGoOuLu0Dtllw==",
              "requires": {
                "fast-deep-equal": "^3.1.1",
                "json-schema-traverse": "^1.0.0",
                "require-from-string": "^2.0.2",
                "uri-js": "^4.2.2"
              }
            },
            "ajv-keywords": {
              "version": "5.1.0",
              "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
              "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
              "requires": {
                "fast-deep-equal": "^3.1.3"
              }
            },
            "schema-utils": {
              "version": "4.0.0",
              "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
              "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
              "requires": {
                "@types/json-schema": "^7.0.9",
                "ajv": "^8.8.0",
                "ajv-formats": "^2.1.1",
                "ajv-keywords": "^5.0.0"
              }
            }
          }
        },