{"id":4311,"date":"2022-01-17T18:08:16","date_gmt":"2022-01-17T12:38:16","guid":{"rendered":"https:\/\/xiarch.com\/blog\/?p=4311"},"modified":"2022-01-17T18:08:16","modified_gmt":"2022-01-17T12:38:16","slug":"here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently","status":"publish","type":"post","link":"https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/","title":{"rendered":"Here is the Fix of Npm Dependency Breaking Some Reacts Applications recently!!"},"content":{"rendered":"\n
Acres of users are reporting their Facebook Create React App builds are failing since yesterday. The cause has been traced down to a dependency utilized by the create-react-app, the latest version of which is breaking developers\u2019 applications.<\/p><\/p>\n\n\n\n
While a stable solution is yet to be discovered, here is a simple workaround developer can adopt.<\/p><\/p>\n\n\n\n
Create-react-app Builds failing across the world<\/strong><\/h2>\n\n\n\n
Create React App is an open-source project produced by Facebook (Meta) and made available on both GitHub and npm to permit developers to 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\u2014developers can therefore build a React app with just a few simple commands.<\/p><\/p>\n\n\n\n
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. <\/p><\/p>\n\n\n\n
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 the mini-CSS-extract plugin, used by create-react-app.<\/p><\/p>\n\n\n\n
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.<\/p><\/p>\n\n\n\n
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.<\/p><\/p>\n\n\n\n
The latest version of the 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 our experts, the changelog for version 2.5.0 has the maintainer noting a new feature addition, “types” having been made: <\/p><\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
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:<\/p><\/p>\n\n\n\n
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:<\/p><\/p>\n\n\n\n
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:<\/p><\/p>\n\n\n\n
npm i -D –save-exact mini-css-extract-plugin@2.4.5<\/p><\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
“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.<\/p><\/p>\n\n\n\n
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, 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.<\/p><\/p>\n\n\n\n
Xiarch 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.<\/p><\/p>\n","protected":false},"excerpt":{"rendered":"
Acres of users are reporting their Facebook Create React App builds are failing since yesterday. The cause has been traced down to a dependency utilized by the create-react-app, the latest version of which is breaking developers\u2019 applications. While a stable solution is yet to be discovered, here is a simple workaround developer can adopt. Create-react-app […]<\/p>\n","protected":false},"author":2,"featured_media":4318,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"yoast_head":"\n
Here is the Fix of Npm Dependency Breaking Some Reacts Applications recently!! - Xiarch Solutions Private Limited<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Here is the Fix of Npm Dependency Breaking Some Reacts Applications recently!! - Xiarch Solutions Private Limited\" \/>\n<meta property=\"og:description\" content=\"Acres of users are reporting their Facebook Create React App builds are failing since yesterday. The cause has been traced down to a dependency utilized by the create-react-app, the latest version of which is breaking developers\u2019 applications. While a stable solution is yet to be discovered, here is a simple workaround developer can adopt. Create-react-app […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/\" \/>\n<meta property=\"og:site_name\" content=\"Xiarch Solutions Private Limited\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/xiarch\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-17T12:38:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/xiarch.com\/blog\/wp-content\/uploads\/2022\/01\/Here-is-the-Fix-of-Npm-Dependency-Breaking-Some-Reacts-Applications-recently-image1-1024x748.jpg\" \/>\n<meta name=\"author\" content=\"Xiarch Security\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@xiarch\" \/>\n<meta name=\"twitter:site\" content=\"@xiarch\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Xiarch Security\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/\"},\"author\":{\"name\":\"Xiarch Security\",\"@id\":\"https:\/\/xiarch.com\/blog\/#\/schema\/person\/655d814a04eacce56942270cfdc5c59c\"},\"headline\":\"Here is the Fix of Npm Dependency Breaking Some Reacts Applications recently!!\",\"datePublished\":\"2022-01-17T12:38:16+00:00\",\"dateModified\":\"2022-01-17T12:38:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/\"},\"wordCount\":609,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/xiarch.com\/blog\/#organization\"},\"articleSection\":[\"Vulnerabilities\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/\",\"url\":\"https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/\",\"name\":\"Here is the Fix of Npm Dependency Breaking Some Reacts Applications recently!! - Xiarch Solutions Private Limited\",\"isPartOf\":{\"@id\":\"https:\/\/xiarch.com\/blog\/#website\"},\"datePublished\":\"2022-01-17T12:38:16+00:00\",\"dateModified\":\"2022-01-17T12:38:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/xiarch.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Here is the Fix of Npm Dependency Breaking Some Reacts Applications recently!!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/xiarch.com\/blog\/#website\",\"url\":\"https:\/\/xiarch.com\/blog\/\",\"name\":\"Xiarch Solutions Private Limited\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/xiarch.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/xiarch.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/xiarch.com\/blog\/#organization\",\"name\":\"Xiarch\",\"url\":\"https:\/\/xiarch.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/xiarch.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/xiarch.com\/blog\/wp-content\/uploads\/2021\/06\/xi-logo-002.png\",\"contentUrl\":\"https:\/\/xiarch.com\/blog\/wp-content\/uploads\/2021\/06\/xi-logo-002.png\",\"width\":300,\"height\":300,\"caption\":\"Xiarch\"},\"image\":{\"@id\":\"https:\/\/xiarch.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/xiarch\/\",\"https:\/\/twitter.com\/xiarch\",\"https:\/\/www.linkedin.com\/company\/xiarch\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/xiarch.com\/blog\/#\/schema\/person\/655d814a04eacce56942270cfdc5c59c\",\"name\":\"Xiarch Security\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/xiarch.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d33699ed91b76568586dc1ae278ea568?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d33699ed91b76568586dc1ae278ea568?s=96&d=mm&r=g\",\"caption\":\"Xiarch Security\"},\"sameAs\":[\"https:\/\/xiarch.com\/blog\/\"],\"url\":\"https:\/\/xiarch.com\/blog\/author\/vector\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Here is the Fix of Npm Dependency Breaking Some Reacts Applications recently!! - Xiarch Solutions Private Limited","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/","og_locale":"en_US","og_type":"article","og_title":"Here is the Fix of Npm Dependency Breaking Some Reacts Applications recently!! - Xiarch Solutions Private Limited","og_description":"Acres of users are reporting their Facebook Create React App builds are failing since yesterday. The cause has been traced down to a dependency utilized by the create-react-app, the latest version of which is breaking developers\u2019 applications. While a stable solution is yet to be discovered, here is a simple workaround developer can adopt. Create-react-app […]","og_url":"https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/","og_site_name":"Xiarch Solutions Private Limited","article_publisher":"https:\/\/www.facebook.com\/xiarch\/","article_published_time":"2022-01-17T12:38:16+00:00","og_image":[{"url":"https:\/\/xiarch.com\/blog\/wp-content\/uploads\/2022\/01\/Here-is-the-Fix-of-Npm-Dependency-Breaking-Some-Reacts-Applications-recently-image1-1024x748.jpg"}],"author":"Xiarch Security","twitter_card":"summary_large_image","twitter_creator":"@xiarch","twitter_site":"@xiarch","twitter_misc":{"Written by":"Xiarch Security","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/#article","isPartOf":{"@id":"https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/"},"author":{"name":"Xiarch Security","@id":"https:\/\/xiarch.com\/blog\/#\/schema\/person\/655d814a04eacce56942270cfdc5c59c"},"headline":"Here is the Fix of Npm Dependency Breaking Some Reacts Applications recently!!","datePublished":"2022-01-17T12:38:16+00:00","dateModified":"2022-01-17T12:38:16+00:00","mainEntityOfPage":{"@id":"https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/"},"wordCount":609,"commentCount":0,"publisher":{"@id":"https:\/\/xiarch.com\/blog\/#organization"},"articleSection":["Vulnerabilities"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/","url":"https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/","name":"Here is the Fix of Npm Dependency Breaking Some Reacts Applications recently!! - Xiarch Solutions Private Limited","isPartOf":{"@id":"https:\/\/xiarch.com\/blog\/#website"},"datePublished":"2022-01-17T12:38:16+00:00","dateModified":"2022-01-17T12:38:16+00:00","breadcrumb":{"@id":"https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/xiarch.com\/blog\/here-is-the-fix-of-npm-dependency-breaking-some-reacts-applications-recently\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/xiarch.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Here is the Fix of Npm Dependency Breaking Some Reacts Applications recently!!"}]},{"@type":"WebSite","@id":"https:\/\/xiarch.com\/blog\/#website","url":"https:\/\/xiarch.com\/blog\/","name":"Xiarch Solutions Private Limited","description":"","publisher":{"@id":"https:\/\/xiarch.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/xiarch.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/xiarch.com\/blog\/#organization","name":"Xiarch","url":"https:\/\/xiarch.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/xiarch.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/xiarch.com\/blog\/wp-content\/uploads\/2021\/06\/xi-logo-002.png","contentUrl":"https:\/\/xiarch.com\/blog\/wp-content\/uploads\/2021\/06\/xi-logo-002.png","width":300,"height":300,"caption":"Xiarch"},"image":{"@id":"https:\/\/xiarch.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/xiarch\/","https:\/\/twitter.com\/xiarch","https:\/\/www.linkedin.com\/company\/xiarch"]},{"@type":"Person","@id":"https:\/\/xiarch.com\/blog\/#\/schema\/person\/655d814a04eacce56942270cfdc5c59c","name":"Xiarch Security","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/xiarch.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d33699ed91b76568586dc1ae278ea568?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d33699ed91b76568586dc1ae278ea568?s=96&d=mm&r=g","caption":"Xiarch Security"},"sameAs":["https:\/\/xiarch.com\/blog\/"],"url":"https:\/\/xiarch.com\/blog\/author\/vector\/"}]}},"_links":{"self":[{"href":"https:\/\/xiarch.com\/blog\/wp-json\/wp\/v2\/posts\/4311"}],"collection":[{"href":"https:\/\/xiarch.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xiarch.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xiarch.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/xiarch.com\/blog\/wp-json\/wp\/v2\/comments?post=4311"}],"version-history":[{"count":1,"href":"https:\/\/xiarch.com\/blog\/wp-json\/wp\/v2\/posts\/4311\/revisions"}],"predecessor-version":[{"id":4319,"href":"https:\/\/xiarch.com\/blog\/wp-json\/wp\/v2\/posts\/4311\/revisions\/4319"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/xiarch.com\/blog\/wp-json\/wp\/v2\/media\/4318"}],"wp:attachment":[{"href":"https:\/\/xiarch.com\/blog\/wp-json\/wp\/v2\/media?parent=4311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xiarch.com\/blog\/wp-json\/wp\/v2\/categories?post=4311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xiarch.com\/blog\/wp-json\/wp\/v2\/tags?post=4311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Here-is-the-Fix-of-Npm-Dependency-Breaking-Some-Reacts-Applications-recently-image1\"](\"https:\/\/xiarch.com\/blog\/wp-content\/uploads\/2022\/01\/Here-is-the-Fix-of-Npm-Dependency-Breaking-Some-Reacts-Applications-recently-image1-1024x748.jpg\")
<\/figure><\/div>\n\n\n\n![\"Here-is-the-Fix-of-Npm-Dependency-Breaking-Some-Reacts-Applications-recently-image2\"](\"https:\/\/xiarch.com\/blog\/wp-content\/uploads\/2022\/01\/Here-is-the-Fix-of-Npm-Dependency-Breaking-Some-Reacts-Applications-recently-image2-1024x554.jpg\")
<\/figure><\/div>\n\n\n\n![\"Here-is-the-Fix-of-Npm-Dependency-Breaking-Some-Reacts-Applications-recently-image3\"](\"https:\/\/xiarch.com\/blog\/wp-content\/uploads\/2022\/01\/Here-is-the-Fix-of-Npm-Dependency-Breaking-Some-Reacts-Applications-recently-image3-1.png\")
<\/figure><\/div>\n\n\n\n