Skip to content

Bug: Cannot create a build of the project #11931

Description

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

Activity

  1. RelishedChicken commented on Jan 14, 2022

    @RelishedChicken

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

  2. transferred this issue fromreact/reacton Jan 14, 2022
  3. Severenit commented on Jan 14, 2022

    @Severenit

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

  4. Lundeful commented on Jan 14, 2022

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

  5. astalarico commented on Jan 15, 2022

    @astalarico

    I also can confirm having the same issue.

  6. Micah-6424 commented on Jan 15, 2022

    @Micah-6424

    yeah, its still not working

  7. ShernanJ commented on Jan 15, 2022

    @ShernanJ

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

    "resolutions": {
        "mini-css-extract-plugin": "2.4.5"
    },
  8. hamilton-mike commented on Jan 15, 2022

    @hamilton-mike

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

  9. ShernanJ commented on Jan 15, 2022

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

  10. hamilton-mike commented on Jan 15, 2022

    @hamilton-mike

    @ShernanJ still no bueno. getting the same error.

  11. LaetitiaBodin commented on Jan 15, 2022

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

  12. JakeSchieber commented on Jan 15, 2022

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

  13. iaseth commented on Jan 15, 2022

    @iaseth

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

  14. hamilton-mike commented on Jan 15, 2022

    @hamilton-mike

    @iaseth thank you for the share.

  15. LaetitiaBodin commented on Jan 16, 2022

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

  16. uhef commented on Jan 16, 2022

    @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"
      }
    
  17. garrettcfermo commented on Jan 16, 2022

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

  18. leeopop commented on Jan 17, 2022

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

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions