Upgrade react-scripts to version 5.0.0

[depfu]

Here is everything you need to know about this upgrade. Please take a good look at what changed and the test results before merging this pull request.

What changed?

✳️ react-scripts (4.0.3 → 5.0.0) · Repo · Changelog

Release Notes

5.0.0

v5.0.0 (2021-12-14)

Create React App 5.0 is a major release with several new features and the latest version of all major dependencies.

Thanks to all the maintainers and contributors who worked so hard on this release! 🙌

Highlights

• webpack 5 (#11201)
• Jest 27 (#11338)
• ESLint 8 (#11375)
• PostCSS 8 (#11121)
• Fast Refresh improvements and bug fixes (#11105)
• Support for Tailwind (#11717)
• Improved package manager detection (#11322)
• Unpinned all dependencies for better compatibility with other tools (#11474)
• Dropped support for Node 10 and 12

Migrating from 4.0.x to 5.0.0

Inside any created project that has not been ejected, run:

npm install --save --save-exact [email protected]

or

yarn add --exact [email protected]

NOTE: You may need to delete your node_modules folder and reinstall your dependencies by running npm install (or yarn) if you encounter errors after upgrading.

If you previously ejected but now want to upgrade, one common solution is to find the commits where you ejected (and any subsequent commits changing the configuration), revert them, upgrade, and later optionally eject again. It’s also possible that the feature you ejected for is now supported out of the box.

Breaking Changes

Like any major release, [email protected] contains a number of breaking changes. We expect that they won't affect every user, but we recommend you look over this section to see if something is relevant to you. If we missed something, please file a new issue.

Dropped support for Node 10 and 12

Node 10 reached End-of-Life in April 2021 and Node 12 will be End-of-Life in April 2022. Going forward we will only support the latest LTS release of Node.js.

Full Changelog

💥 Breaking Change

• create-react-app
  • #11322 Use env var to detect yarn or npm as the package manager (@lukekarrys)
• babel-preset-react-app, cra-template-typescript, cra-template, create-react-app, eslint-config-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
  • #11201 Webpack 5 (@raix)
• eslint-config-react-app, react-error-overlay, react-scripts
  • #10761 chore: migrate to @babel/eslint-parser (@JLHwung)
• react-scripts
  • #11188 Deprecate root level template.json keys (@mrmckeb)

🐛 Bug Fix

• react-scripts
  • #11413 fix(webpackDevServer): disable overlay for warnings (@jawadsh123)
  • #10511 Fix ICSS syntax in stylesheets (@thabemmz)

💅 Enhancement

• react-scripts
  • #11717 Add support for Tailwind (@iansu)
  • #8227 Add source-map-loader for debugging into original source of node_modules libraries that contain sourcemaps (@justingrant)
  • #10499 Remove ESLint verification when opting-out (@mrmckeb)
• eslint-config-react-app, react-error-overlay, react-scripts
  • #11375 feat(eslint-config-react-app): support ESLint 8.x (@MichaelDeBoey)
• create-react-app
  • #11322 Use env var to detect yarn or npm as the package manager (@lukekarrys)
  • #11057 Coerce Node versions with metadata (@mrmckeb)
• react-dev-utils
  • #11105 fix: fast refresh stops on needed bail outs (@pmmmwh)
  • #10205 Update ModuleNotFoundPlugin to support Webpack 5 (@raix)
• create-react-app, react-scripts
  • #11176 Run npm with --no-audit (@gaearon)

📝 Documentation

• Other
  • #11619 The default port used by serve has changed (@leo)
  • #10907 Fix link address (@e-w-h)
  • #10805 Update PWA docs to point at the cra-template-pwa package (@slieschke)
  • #10631 Update IMAGE_INLINE_SIZE_LIMIT docs (@ianschmitz)
• eslint-config-react-app
  • #10317 eslint-config-react-app typo fix (@Spacerat)
• react-dev-utils
  • #10779 Suggest sass instead of node-sass package (@andrewywong)
• babel-preset-react-app, eslint-config-react-app
  • #10288 Upgrade docs http links to https (@xom9ikk)
• cra-template
  • #10763 Trivial English fixes (@ujihisa)

🏠 Internal

• Other
  • #11723 chore(test): make all tests install with npm ci (@lukekarrys)
  • #11686 [WIP] Fix integration test teardown / cleanup and missing yarn installation (@raix)
  • #11252 Remove package-lock.json (@Methuselah96)
• create-react-app
  • #11706 Remove cached lockfile (@lukekarrys)
• babel-plugin-named-asset-import, babel-preset-react-app, confusing-browser-globals, create-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
  • #11624 Update all dependencies (@jd1048576)
• react-scripts
  • #11597 Update package.json (@HADMARINE)
  • #11292 fix: dependency issue after workbox-webpack-plugin 6.2 release (@fguitton)
  • #11188 Deprecate root level template.json keys (@mrmckeb)
  • #10784 Remove outdated comments on react-refresh (@luk3kang)
• babel-plugin-named-asset-import, confusing-browser-globals, create-react-app, eslint-config-react-app, react-dev-utils, react-error-overlay, react-scripts
  • #11474 Remove dependency pinning (@mrmckeb)
• confusing-browser-globals, cra-template-typescript, cra-template, create-react-app
  • #11415 Bump template dependency version (@shfshanyue)
• react-error-overlay, react-scripts
  • #11304 Use npm v7 with workspaces for local development and testing (@lukekarrys)
• babel-preset-react-app, cra-template-typescript, cra-template, create-react-app, eslint-config-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
  • #11201 Webpack 5 (@raix)

🔨 Underlying Tools

• react-dev-utils, react-scripts
  • #11476 Bump browserslist from 4.14.2 to 4.16.5 (@dependabot[bot])
• react-scripts
  • #11325 allow CORS on webpack-dev-server (@hasanayan)
  • #11121 Update PostCSS version (@mrmckeb)
  • #10204 Update WebpackManifestPlugin (@raix)
  • #10456 Update PostCSS packages (@raix)
• babel-plugin-named-asset-import, confusing-browser-globals, create-react-app, react-dev-utils, react-error-overlay, react-scripts
  • #11338 Upgrade jest and related packages from 26.6.0 to 27.1.0 (@krreet)
• eslint-config-react-app, react-error-overlay, react-scripts
  • #10761 chore: migrate to @babel/eslint-parser (@JLHwung)
• babel-preset-react-app, react-dev-utils, react-error-overlay, react-scripts
  • #10797 Unpin babel dependencies (@mohd-akram)
• react-dev-utils
  • #10791 Bump immer version for fixing security issue (@shamprasadrh)

Committers: 34

• Andrew Wong (@andrewywong)
• Brody McKee (@mrmckeb)
• Christiaan van Bemmel (@thabemmz)
• Dan Abramov (@gaearon)
• Florian Guitton (@fguitton)
• Hasan Ayan (@hasanayan)
• Huáng Jùnliàng (@JLHwung)
• Ian Schmitz (@ianschmitz)
• Ian Sutherland (@iansu)
• James George (@jamesgeorge007)
• Jason Williams (@jasonwilliams)
• Jawad (@jawadsh123)
• Joseph Atkins-Turkish (@Spacerat)
• Justin Grant (@justingrant)
• Konrad Stępniak (@th7nder)
• Kristoffer K. (@merceyz)
• Leo Lamprecht (@leo)
• Luke Karrys (@lukekarrys)
• Max Romanyuta (@xom9ikk)
• Michael Mok (@pmmmwh)
• Michaël De Boey (@MichaelDeBoey)
• Mohamed Akram (@mohd-akram)
• Morten N.O. Nørgaard Henriksen (@raix)
• Nathan Bierema (@Methuselah96)
• Reetesh Kumar (@krreet)
• Shamprasad RH (@shamprasadrh)
• Simon Lieschke (@slieschke)
• @e-w-h
• @jd1048576
• @luk3kang
• @ujihisa
• hadmarine (@HADMARINE)
• huntr.dev | the place to protect open source (@huntr-helper)

Does any of this look wrong? Please let us know.

Commits

See the full diff on Github. The new version differs by 70 commits:

• Update CONTRIBUTING.md
• Publish
• Update CONTRIBUTING.md
• Add support for Tailwind (#11717)
• chore(test): make all tests install with `npm ci` (#11723)
• fix(webpackDevServer): disable overlay for warnings (#11413)
• Remove cached lockfile (#11706)
• Update all dependencies (#11624)
• feat(eslint-config-react-app): support ESLint 8.x (#11375)
• [WIP] Fix integration test teardown / cleanup and missing yarn installation (#11686)
• Update webpack and dev server (#11646)
• The default port used by `serve` has changed (#11619)
• Update package.json (#11597)
• Fix ESLint Babel preset resolution (#11547)
• test(create-react-app): assert for exit code (#10973)
• Prepare 5.0.0 alpha release
• Remove dependency pinning (#11474)
• Update CODEOWNERS
• Bump template dependency version (#11415)
• Bump browserslist from 4.14.2 to 4.16.5 (#11476)
• allow CORS on webpack-dev-server (#11325)
• Upgrade jest and related packages from 26.6.0 to 27.1.0 (#11338)
• Bump immer from 8.0.4 to 9.0.6 (#11364)
• Resolve dependency issues in v5 alpha (#11294)
• Update CONTRIBUTING.md
• Prepare 5.0.0 alpha release
• Use env var to detect yarn or npm as the package manager (#11322)
• Use npm v7 with workspaces for local development and testing (#11304)
• Merge pull request #11316 from hasanayan/main
• Merge branch 'facebook:main' into main
• Merge pull request #11318 from th7nder/t-1127-webpack-dev-server
• yarn compile:lockfile
• Migrate deprecated functions, add new lockfile and node 14
• Merge branch 'main' into t-1127-webpack-dev-server
• Bump webpack-dev-server to 4.0.0 and add babel preset
• fix: dependency issue after workbox-webpack-plugin 6.2 release (#11292)
• Bump webpack-dev-server to 4.0.0-rc.1
• Update package.json
• Prepare 5.0.0 alpha release
• Webpack 5 (#11201)
• Remove package-lock.json (#11252)
• Update CODEOWNERS
• chore: migrate to @babel/eslint-parser (#10761)
• fix: fast refresh stops on needed bail outs (#11105)
• Deprecate root level template.json keys (#11188)
• Switch branch name
• Run npm with --no-audit (#11176)
• Update PostCSS version (#11121)
• Coerce Node versions with metadata (#11057)
• Add source-map-loader for debugging into original source of node_modules libraries that contain sourcemaps (#8227)
• Remove ESLint verification when opting-out (#10499)
• Unpin babel dependencies (#10797)
• Add support for Webpack 5 message objects (#10121)
• test(create-react-app): add integration tests (#10381)
• Bump immer version for fixing security issue (#10791)
• Fix link address (#10907)
• eslint-config-react-app typo fix (#10317)
• Remove outdated comments on react-refresh (#10784)
• Suggest sass instead of node-sass package (#10779)
• Upgrade docs http links to https (#10288)
• Fix ICSS syntax in stylesheets (#10511)
• Update PWA docs to point at the cra-template-pwa package (#10805)
• Trivial English fixes (#10763)
• Bump y18n from 4.0.0 to 4.0.1 in /docusaurus/website (#10765)
• Update ModuleNotFoundPlugin to support Webpack 5 (#10205)
• Update WebpackManifestPlugin (#10204)
• Update PostCSS packages (#10456)
• [email protected]
• Security Fix for Command Injection - huntr.dev (#10644)
• Update IMAGE_INLINE_SIZE_LIMIT docs (#10631)

---

Depfu will automatically keep this PR conflict-free, as long as you don't add any commits to this branch yourself. You can also trigger a rebase manually by commenting with @depfu rebase.

All Depfu comment commands

@​depfu rebase

Rebases against your default branch and redoes this update

@​depfu recreate

Recreates this PR, overwriting any edits that you've made to it

@​depfu merge

Merges this PR once your tests are passing and conflicts are resolved

@​depfu close

Closes this PR and deletes the branch

@​depfu reopen

Restores the branch and reopens this PR (if it's closed)

@​depfu pause

Ignores all future updates for this dependency and closes this PR

@​depfu pause [minor|major]

Ignores all future minor/major updates for this dependency and closes this PR

@​depfu resume

Future versions of this dependency will create PRs again (leaves this PR as is)

[depfu]

Closed in favor of #63.