4.0.0 (2020-10-23)

Create React App 4.0 is a major release with several new features, including support for Fast Refresh!

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

Highlights

• Fast Refresh #8582
• React 17 support
  • New JSX transform #9645
• TypeScript 4 support #9734
• ESLint 7 #8978
  • New Jest and React Testing Library rules #8963
• Jest 26 #8955
• PWA/workbox improvements
  • Switch to the Workbox InjectManifest plugin #9205
  • Now its own template so it can be released independently
• Web Vitals support #9116

Migrating from 3.4.x to 4.0.0

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

npm install --save --save-exact react-scripts@4.0.0

or

yarn add --exact react-scripts@4.0.0

NOTE: You may need to delete your node_modules folder and reinstall your dependencies by running yarn (or npm install) 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, react-scripts@4.0.0 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.

ESLint

We've upgraded to ESLint 7 and added many new rules including some for Jest and React Testing Library as well as the import/no-anonymous-default-export rule. We've also upgraded eslint-plugin-hooks to version 4.0.0 and removed the EXTEND_ESLINT flag as it is no longer required to customize the ESLint config.

Jest

We've upgraded to Jest 26 and now set resetMocks to true by default in the Jest config.

Service workers

We've switched to the Workbox InjectManifest plugin and moved the PWA templates into their own repository.

Removed typescript flag and NODE_PATH support

We've removed the deprecated typescript flag when creating a new app. Use --template typescript instead. We've also dropped deprecated NODE_PATH flag as this has been replaced by setting the base path in jsconfig.json.

Fix dotenv file loading order

We've changed the loading order of env files to match the dotenv specification. See #9037 for more details.

Dropped Node 8 support

Node 8 reached End-of-Life at the end of 2019 and is no longer supported.

Detailed Changelog

:rocket: New Feature

• eslint-config-react-app, react-error-overlay, react-scripts
  • #8963 feat(eslint-config-react-app): Add jest & testing-library rules (@MichaelDeBoey)
• react-scripts
  • #9611 Add AVIF image support (@Hongbo-Miao)
  • #9114 Allow testMatch for jest config (@Favna)
  • #8790 Add back in --stats output from webpack. (@samccone)
  • #8838 Support devDependencies in templates (@mrmckeb)
• create-react-app
  • #9359 feat: exit on outdated create-react-app version (@mrmckeb)
• cra-template-typescript, cra-template, react-scripts
  • #9205 Switch to the Workbox InjectManifest plugin (@jeffposnick)
• react-dev-utils, react-scripts
  • #8582 Add experimental react-refresh support (@charrondev)

:boom: Breaking Change

• eslint-config-react-app, react-error-overlay, react-scripts
  • #8963 feat(eslint-config-react-app): Add jest & testing-library rules (@MichaelDeBoey)
  • #8978 Support ESLint 7.x (@MichaelDeBoey)
• cra-template-typescript, cra-template, eslint-config-react-app, react-error-overlay, react-scripts
  • #9587 Remove EXTEND_ESLINT and add Jest rules (@mrmckeb)
• eslint-config-react-app
  • #9401 fix: remove deprecated rule (@ljosberinn)
• create-react-app
  • #9359 feat: exit on outdated create-react-app version (@mrmckeb)
• cra-template-typescript, cra-template, react-scripts
  • #9205 Switch to the Workbox InjectManifest plugin (@jeffposnick)
• babel-plugin-named-asset-import, confusing-browser-globals, create-react-app, react-dev-utils, react-error-overlay, react-scripts
  • #8955 Upgrade to Jest 26 (@ianschmitz)
• create-react-app, react-scripts
  • #8934 feat: remove typescript flag and NODE_PATH support (@mrmckeb)
• react-scripts
  • #9037 Fix dotenv file loading order (@Timer)
  • #7899 Set resetMocks to true by default in jest config (@alexkrolick)
• babel-plugin-named-asset-import, babel-preset-react-app, create-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
  • #8950 Dependency major version upgrades (@ianschmitz)
• eslint-config-react-app, react-scripts
  • #8926 Add import/no-anonymous-default-export lint rule (@shakib609)
  • #8939 Bump React Hooks ESLint plugin to 4.0.0 (@gaearon)
• cra-template-typescript, cra-template, create-react-app, react-app-polyfill, react-dev-utils, react-scripts
  • #8948 Drop Node 8 support (@ianschmitz)
• babel-plugin-named-asset-import, babel-preset-react-app, confusing-browser-globals, cra-template-typescript, react-dev-utils, react-error-overlay, react-scripts
  • #8362 Upgrade to Jest 25 (@skovhus)

:bug: Bug Fix

• react-scripts
  • #9805 Fix refreshOverlayInterop module scope error (@ianschmitz)
  • #9037 Fix dotenv file loading order (@Timer)
  • #8700 Skip stdin resuming to support lerna parallel (@hieuxlu)
  • #8845 Do not check for interactive session to shut down dev server (@jeremywadsack)
  • #8768 Add .cjs and .mjs files support to test runner (@ai)
• babel-preset-react-app, eslint-config-react-app, react-scripts
  • #9788 fix: resolve new JSX transform issues (@mrmckeb)
• eslint-config-react-app, react-scripts
  • #9683 fix: resolve ESLint config from appPath (@mrmckeb)
• create-react-app
  • #9412 Fix template name handling (@iansu)
• babel-preset-react-app
  • #9374 fix: use default modules option from preset-env (@JLHwung)
• react-dev-utils
  • #9390 Publish refreshOverlayInterop with react-dev-utils (@klinem)
  • #8492 Replace period in CSS Module classnames (@evankennedy)
• react-dev-utils, react-scripts
  • #8694 Use process.execPath to spawn node subprocess (@anuraaga)
• cra-template-typescript, cra-template, react-scripts
  • #8734 fix: handle templates without main package field (@mrmckeb)

:nail_care: Enhancement

• react-scripts
  • #9734 Use new JSX setting with TypeScript 4.1.0 (@iansu)
  • #8638 Support source maps for scss in dev environments (@MKorostoff)
  • #8834 Don't use webpack multi entry unnecessarily (@sebmarkbage)
• babel-preset-react-app, eslint-config-react-app, react-scripts
  • #9861 New JSX Transform opt out (@iansu)
• cra-template
  • #9853 feat: remove unused React imports (@mrmckeb)
• babel-preset-react-app, react-scripts
  • #9645 Use new JSX transform with React 17 (@iansu)
• react-dev-utils, react-scripts
  • #9350 Add Fast Refresh warning when using React < 16.10 (@iansu)
• react-dev-utils, react-error-overlay, react-scripts
  • #9375 feat: better refresh plugin integration (@pmmmwh)
• cra-template-typescript, cra-template
  • #9116 Add performance relayer + documentation (web-vitals) (@housseindjirdeh)
  • #8705 Update template tests (@MichaelDeBoey)
• create-react-app
  • #8460 Fix --use-pnp for Yarn 2 (@nickmccurdy)

:memo: Documentation

• Other
  • #9728 Upgrade Docusaurus to latest version (@lex111)
  • #9630 Emphasise that Next.js is capable of SSG (@liamness)
  • #9073 Update running-tests.md (@MichaelDeBoey)
  • #9560 Update Vercel deployment documentation (@timothyis)
  • #9380 Update running-tests.md (@andycanderson)
  • #9245 [Doc] fix React Testing Library example (@sakito21)
  • #9231 Clarify wording in adding TypeScript to existing project (@merelinguist)
  • #8895 Fix chai URL (@BMorearty)
  • #9042 Update deployment docs for Azure Static Web Apps (@burkeholland)
  • #8246 Add a VSCode tip in the CSS reset section (@maazadeeb)
  • #8610 Update url to see prettier in action (@M165437)
  • #8684 Simplify wording in setting-up-your-editor.md (@coryhouse)
  • #8791 Add setupTests.js to the list of generated files (@MostafaNawara)
  • #8763 Use simplified import of @testing-library/jest-dom (@Dremora)
• react-dev-utils
  • #9471 Fixes in the /packages/react-devs-utils/README.md file (@caspero-62)
  • #8651 Update build script deployment URL (@StenAL)
• cra-template-typescript, cra-template
  • #9241 Updated README.md Templates to Follow ESLint Markdown Rules (@firehawk09)
  • #8406 Upgrade testing-library packages (@gnapse)
• react-scripts
  • #9244 Explain how to uninstall create-react-app globally (@nickmccurdy)
  • #8838 Support devDependencies in templates (@mrmckeb)
• cra-template-typescript, cra-template, react-dev-utils, react-scripts
  • #8957 Move shortlinks to cra.link (@iansu)
• babel-preset-react-app
  • #5847 Include absoluteRuntime in babel preset docs (@iddan)

:house: Internal

• eslint-config-react-app
  • #9670 fix(eslint-config-react-app): Make eslint-plugin-jest an optional peerDependency (@MichaelDeBoey)
• Other
  • #9258 fix: Fix azure-pipelines' endOfLine (@MichaelDeBoey)
  • #9102 Replace Spectrum links with GitHub Discussions (@iansu)
  • #8656 Bump acorn from 6.4.0 to 6.4.1 in /docusaurus/website (@dependabot[bot])
  • #8749 Specify what files are served form a bare local copy (@challet)
• cra-template-typescript, cra-template
  • #9252 feat: Update testing-library dependencies to latest (@MichaelDeBoey)
• react-dev-utils
  • #9059 clean formatMessage usage (@chenxsan)
• cra-template
  • #7787 Bump version of Verdaccio (@ianschmitz)
• babel-preset-react-app
  • #8858 Remove outdated comment (@availchet)
• react-scripts
  • #8952 fix react-refresh babel plugin not applied (@tanhauhau)

:hammer: Underlying Tools

• react-scripts
  • #9865 Pass JSX runtime setting to Babel preset in Jest config (@iansu)
  • #9841 Bump resolve-url-loader version (@johannespfeiffer)
  • #9348 Upgrade refresh plugin (@ianschmitz)
  • #8891 Bump style-loader to 1.2.1 (@chybisov)
• react-error-overlay, react-scripts
  • #9863 Upgrade to React 17 (@iansu)
  • #9856 feat: Update ESLint dependencies (@MichaelDeBoey)
• babel-plugin-named-asset-import, babel-preset-react-app, confusing-browser-globals, cra-template-typescript, cra-template, create-react-app, eslint-config-react-app, react-app-polyfill, react-error-overlay, react-scripts
  • #9857 feat: Update all dependencies (@MichaelDeBoey)
• eslint-config-react-app, react-dev-utils, react-scripts
  • #9751 Replace deprecated eslint-loader by eslint-webpack-plugin (@tooppaaa)
• babel-plugin-named-asset-import, babel-preset-react-app, confusing-browser-globals, cra-template-typescript, cra-template, create-react-app, eslint-config-react-app, react-dev-utils, react-error-overlay, react-scripts
  • #9639 Upgrade dependencies (@ianschmitz)
• eslint-config-react-app, react-error-overlay, react-scripts
  • #9434 feat: Update ESLint dependencies (@MichaelDeBoey)
  • #9251 feat: Update ESLint dependencies (@MichaelDeBoey)
  • #8978 Support ESLint 7.x (@MichaelDeBoey)
• cra-template-typescript, cra-template
  • #9526 Update template dependencies to latest version (@MichaelDeBoey)
  • #8406 Upgrade testing-library packages (@gnapse)
• react-app-polyfill
  • #9392 Upgrade whatwg-fetch (@Lapz)
• react-dev-utils
  • #8933 Bump immer version (@staff0rd)
• babel-plugin-named-asset-import, babel-preset-react-app, confusing-browser-globals, create-react-app, react-dev-utils, react-error-overlay, react-scripts
  • #9317 Upgrade dependencies (@ianschmitz)
• babel-preset-react-app, cra-template-typescript, cra-template, create-react-app, react-dev-utils, react-error-overlay, react-scripts
  • #9196 Upgrade dependencies (@ianschmitz)
  • #9132 Upgrade dependencies (@ianschmitz)
• babel-plugin-named-asset-import, confusing-browser-globals, create-react-app, react-dev-utils, react-error-overlay, react-scripts
  • #8955 Upgrade to Jest 26 (@ianschmitz)
• babel-preset-react-app, create-react-app, react-dev-utils, react-error-overlay, react-scripts
  • #9081 Update packages (@ianschmitz)
  • #8947 Minor/patch dependency upgrades (@ianschmitz)
• babel-plugin-named-asset-import, babel-preset-react-app, create-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
  • #8950 Dependency major version upgrades (@ianschmitz)
• eslint-config-react-app, react-scripts
  • #8939 Bump React Hooks ESLint plugin to 4.0.0 (@gaearon)
• babel-plugin-named-asset-import, babel-preset-react-app, confusing-browser-globals, cra-template-typescript, react-dev-utils, react-error-overlay, react-scripts
  • #8362 Upgrade to Jest 25 (@skovhus)

Committers: 63

• Adam Charron (@charrondev)
• Alex Krolick (@alexkrolick)
• Alexey Pyltsyn (@lex111)
• Andrey Sitnik (@ai)
• Andy C (@andycanderson)
• Anuraag Agrawal (@anuraaga)
• Braedon Gough (@braedongough)
• Brian Morearty (@BMorearty)
• Brody McKee (@mrmckeb)
• Burke Holland (@burkeholland)
• Chetanya Kandhari (@availchet)
• Clément DUNGLER (@tooppaaa)
• Clément Hallet (@challet)
• Cory House (@coryhouse)
• Dan Abramov (@gaearon)
• Dylan Brookes (@merelinguist)
• Ernesto García (@gnapse)
• Eugene Chybisov (@chybisov)
• Evan Kennedy (@evankennedy)
• Gerrit Alex (@ljosberinn)
• Hieu Do (@hieuxlu)
• Hongbo Miao (@Hongbo-Miao)
• Houssein Djirdeh (@housseindjirdeh)
• Huáng Jùnliàng (@JLHwung)
• Ian Schmitz (@ianschmitz)
• Ian Sutherland (@iansu)
• Iddan Aaronsohn (@iddan)
• Jakob Krigovsky (@sonicdoe)
• Jeffrey Posnick (@jeffposnick)
• Jeremy Wadsack (@jeremywadsack)
• Jeroen Claassens (@Favna)
• Joe Haddad (@Timer)
• Johannes Pfeiffer (@johannespfeiffer)
• Josemaria Nriagu (@josenriagu)
• Kenneth Skovhus (@skovhus)
• Kirill Korolyov (@Dremora)
• Kline Moralee (@klinem)
• Lenard Pratt (@Lapz)
• Liam Duffy (@liamness)
• Maaz Syed Adeeb (@maazadeeb)
• Marc Hassan (@mhassan1)
• Matt Korostoff (@MKorostoff)
• Michael Mok (@pmmmwh)
• Michael Schmidt-Voigt (@M165437)
• Michaël De Boey (@MichaelDeBoey)
• Minh Nguyen (@NMinhNguyen)
• Mostafa Nawara (@MostafaNawara)
• Nick McCurdy (@nickmccurdy)
• Rafael Quijada (@firehawk09)
• Raihan Nismara (@raihan71)
• Sakito Mukai (@sakito21)
• Sam Chen (@chenxsan)
• Sam Saccone (@samccone)
• Sebastian Markbåge (@sebmarkbage)
• Shakib Hossain (@shakib609)
• Simen Bekkhus (@SimenB)
• Stafford Williams (@staff0rd)
• Sten Arthur Laane (@StenAL)
• Tan Li Hau (@tanhauhau)
• Timothy (@timothyis)
• Tobias Büschel (@tobiasbueschel)
• Webdot_30 (@caspero-62)
• @atlanteh