npm dependency is breaking some React apps today — here's the fix

Tons of users are reporting their Facebook Create React App builds are failing since yesterday.

The cause has been traced down to a dependency used by create-react-app, the latest version of which is breaking developers' apps.

While a stable solution is yet to be identified, here's a simple workaround developers can adopt.

create-react-app builds failing worldwide

Create React App is an open source project produced by Facebook (Meta) and made available on both GitHub and npm to help developers build single-page React applications fast.

The GitHub project is used by over 5.4 million repositories, whereas the npm version receives around 200,000 weekly downloads on average.

The tool offers a modern build setup while requiring no complex configuration—developers can therefore build a React app with just a few simple commands.

That explains why so many developers would rely on create-react-app and are experiencing build failure issues since yesterday.

Software engineer John Athanasiou and front-end developer Ronald Groot Jebbink have been joined by many GitHub users who reported problems building their create-react-app builds into today.    

Dependency hell strikes again

The straightforward error message "TypeError: MiniCssExtractPlugin is not a constructor," gives it away.

The problem has been traced down to one of the dependencies, called mini-css-extract-plugin, used by create-react-app.

Mini CSS Extract Plugin is yet another popular project with over 4.6 million GitHub repos relying on it.

With over 7,000 npm projects depending on Mini CSS Extract Plugin, the project receives 10 million weekly downloads on average on the npm registry.

Mini CSS Extract Plugin came to life in 2018, around the same time as Extract Text Webpack Plugin was deprecated by its author.

This project extracts CSS into separate files, generating a CSS file per JS file that contains CSS.

The latest version of Mini CSS Extract Plugin, 2.5.0 was published less than a day ago and appears to be the culprit. It is since the publication of this particular version that create-react-app project builds began to fail.

Interestingly, as seen by BleepingComputer, the changelog for version 2.5.0 has the maintainer noting a new feature addition, "types" having been made: 

And we wonder if the particular commit is what's impacting create-react-app instances to break.

A bug report filed for the Mini CSS Extract Plugin's maintainers to look at goes over some possible causes. 

Until a concrete fix is identified by Facebook's open source team, devs have noted success by downgrading their version of the mini-css-extract-plugin to 2.4.5:

A minor version bump on mini-css-extract-plugin to 2.5.0 breaks most implementations. Pin your version to 2.4.5 until a fix is released https://t.co/Km55Pw0cC6 (also https://t.co/63FhuaYmVr) #webdev #js #webpack

— Terry (@teddyrised) January 14, 2022

This can be done by updating your JavaScript app's package.json file to include the following lines,  thereby pinning the dependency's version to 2.4.5, as proposed by developer Alexandru Pavaloi:

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

Those who are not using yarn, and for whom the above workaround fails can try running the following command, as suggested by front-end developer Oscar Busk:

npm i -D --save-exact mini-css-extract-plugin@2.4.5

"I tried everything 'resolutions' as well as 'overrides' but none of these worked until I tried the one above!" writes a user.

Note, Facebook's Create React App may not be the only prominent application to be impacted by the new dependency version.

Npm project @wordpress/scripts is also reportedly breaking.

Developers of Auth0's SDK for single-page applications are temporarily locking in the dependency version to '2.4.5' to be safe.

Although not malicious in nature, this incident follows last week's news of popular 'colors' and 'faker' npm dependencies breaking thousands of software projects after their developer had corrupted them.

BleepingComputer has reached out to Facebook (Meta) to better understand the cause of the issue. In the meantime, we hope the above workarounds will save your React builds.