Connect with us


Facebook’s Create React App builds are breaking today — how to fix



Tons of customers are reporting their Fb Create React App builds are failing since yesterday.

The trigger has been traced right down to a dependency utilized by create-react-app, the newest model of which is breaking builders’ apps.

Whereas a secure answer is but to be recognized, this is a easy workaround builders can undertake.

create-react-app builds failing worldwide

Create React App is an open supply undertaking produced by Fb (Meta) and made obtainable on each GitHub and npm to assist builders construct single-page React purposes quick.

The GitHub undertaking is utilized by over 5.4 million repositories, whereas the npm model receives round 200,000 weekly downloads on common.

The instrument affords a contemporary construct setup whereas requiring no advanced configuration—builders can due to this fact construct a React app with just some simple commands.

That explains why so many builders would depend on create-react-app and are experiencing construct failure points since yesterday.

Software program engineer John Athanasiou and front-end developer Ronald Groot Jebbink have been joined by many GitHub customers who reported issues constructing their create-react-app builds into at present.    

Users report their create-react-app builds failing
Customers report their create-react-app builds failing (GitHub)

Dependency hell strikes once more

The easy error message “TypeError: MiniCssExtractPlugin will not be a constructor,” provides it away.

The issue has been traced right down to one of many dependencies, known as mini-css-extract-plugin, utilized by create-react-app.

Mini CSS Extract Plugin is yet one more well-liked undertaking with over 4.6 million GitHub repos counting on it.

With over 7,000 npm initiatives relying on Mini CSS Extract Plugin, the undertaking receives 10 million weekly downloads on common on the npm registry.

Mini CSS Extract Plugin got here to life in 2018, across the similar time as Extract Text Webpack Plugin was deprecated by its creator.

This undertaking extracts CSS into separate recordsdata, producing a CSS file per JS file that accommodates CSS.

The most recent model of Mini CSS Extract Plugin, 2.5.0 was printed lower than a day in the past and seems to be the offender. It’s because the publication of this explicit model that create-react-app undertaking builds started to fail.

Curiously, as seen by BleepingComputer, the changelog for model 2.5.0 has the maintainer noting a brand new function addition, “sorts” having been made: 

mini css extract plugin 2.5.0 commit
Model 2.5.0 of Mini CSS Extract Plugin comes with “added sorts” (GitHub)

And we marvel if the actual commit is what’s impacting create-react-app cases to interrupt.

A bug report filed for the Mini CSS Extract Plugin’s maintainers to have a look at goes over some potential causes. 

Till a concrete repair is recognized by Fb’s open supply group, devs have famous success by downgrading their model of the mini-css-extract-plugin to 2.4.5:

This may be accomplished by updating your JavaScript app’s package deal.json file to incorporate the following lines,  thereby pinning the dependency’s model to 2.4.5, as proposed by developer Alexandru Pavaloi:

    "mini-css-extract-plugin": "2.4.5"

Those that are usually not utilizing yarn, and for whom the above workaround fails can strive operating the next command, as suggested by front-end developer Oscar Busk:

npm i -D --save-exact [email protected]

“I attempted all the things ‘resolutions’ in addition to ‘overrides’ however none of those labored till I attempted the one above!” writes a person.

Notice, Fb’s Create React App might not be the one outstanding software to be impacted by the brand new dependency model.

Npm undertaking @wordpress/scripts can also be reportedly breaking.

Builders of Auth0’s SDK for single-page purposes are temporarily locking in the dependency model to ‘2.4.5’ to be secure.

Though not malicious in nature, this incident follows final week’s information of well-liked ‘colors’ and ‘faker’ npm dependencies breaking thousands of software program initiatives after their developer had corrupted them.

BleepingComputer has reached out to Fb (Meta) to raised perceive the reason for the difficulty. Within the meantime, we hope the above workarounds will save your React builds.

Copyright © 2022