Connect with us


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



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

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

Whereas a steady resolution 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 challenge produced by Fb (Meta) and made accessible on each GitHub and npm to assist builders construct single-page React functions quick.

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

The software presents a contemporary construct setup whereas requiring no complicated configuration—builders can subsequently 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 immediately.    

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 isn’t a constructor,” offers it away.

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

Mini CSS Extract Plugin is one more in style challenge with over 4.6 million GitHub repos counting on it.

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

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

This challenge extracts CSS into separate recordsdata, producing a CSS file per JS file that incorporates 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 perpetrator. It’s for the reason that publication of this explicit model that create-react-app challenge builds started to fail.

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

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

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

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

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

This may be executed 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 working the next command, as suggested by front-end developer Oscar Busk:

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

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

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

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

Builders of Auth0’s SDK for single-page functions 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 in style ‘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 higher perceive the reason for the problem. Within the meantime, we hope the above workarounds will save your React builds.

Copyright © 2022