Bug: Cannot create a build of the project

React version: 17.0.2

Steps To Reproduce

Clean install with npx create-react-app app-name (without Typescript)
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 🙂

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

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

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.

I also can confirm having the same issue.

yeah, its still not working

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

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

fix for react/create-react-app#11931

@ShernanJ

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

@hamilton-mike

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

@ShernanJ

@ShernanJ still no bueno. getting the same error.

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.

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.

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

@iaseth

@iaseth thank you for the share.

@iaseth

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.

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

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.

@garrettcfermo

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

Navigation Menu

Repository navigation

Bug: Cannot create a build of the project #11931

Steps To Reproduce

The current behavior

The expected behavior

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Bug: Cannot create a build of the project #11931

Description

Steps To Reproduce

The current behavior

The expected behavior

Activity

RelishedChicken commented on Jan 14, 2022

Severenit commented on Jan 14, 2022

Lundeful commented on Jan 14, 2022

astalarico commented on Jan 15, 2022

Micah-6424 commented on Jan 15, 2022

ShernanJ commented on Jan 15, 2022

hamilton-mike commented on Jan 15, 2022

ShernanJ commented on Jan 15, 2022

hamilton-mike commented on Jan 15, 2022

LaetitiaBodin commented on Jan 15, 2022

JakeSchieber commented on Jan 15, 2022

iaseth commented on Jan 15, 2022

hamilton-mike commented on Jan 15, 2022

LaetitiaBodin commented on Jan 16, 2022

uhef commented on Jan 16, 2022

garrettcfermo commented on Jan 16, 2022

leeopop commented on Jan 17, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions