Skip to content
GitLab
v4.0.0
ed958938 · Publish ·
Release v4.0.0

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! 🙌

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

🚀 New Feature

  • eslint-config-react-app, react-error-overlay, react-scripts
  • react-scripts
  • create-react-app
    • #9359 feat: exit on outdated create-react-app version (@mrmckeb)
  • cra-template-typescript, cra-template, react-scripts
  • react-dev-utils, react-scripts

💥 Breaking Change

  • eslint-config-react-app, react-error-overlay, react-scripts
  • cra-template-typescript, cra-template, eslint-config-react-app, react-error-overlay, react-scripts
  • eslint-config-react-app
  • create-react-app
    • #9359 feat: exit on outdated create-react-app version (@mrmckeb)
  • cra-template-typescript, cra-template, react-scripts
  • babel-plugin-named-asset-import, confusing-browser-globals, create-react-app, react-dev-utils, react-error-overlay, react-scripts
  • create-react-app, react-scripts
    • #8934 feat: remove typescript flag and NODE_PATH support (@mrmckeb)
  • react-scripts
  • babel-plugin-named-asset-import, babel-preset-react-app, create-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
  • eslint-config-react-app, react-scripts
  • cra-template-typescript, cra-template, create-react-app, react-app-polyfill, react-dev-utils, react-scripts
  • babel-plugin-named-asset-import, babel-preset-react-app, confusing-browser-globals, cra-template-typescript, react-dev-utils, react-error-overlay, react-scripts

🐛 Bug Fix

  • react-scripts
  • babel-preset-react-app, eslint-config-react-app, react-scripts
  • eslint-config-react-app, react-scripts
  • create-react-app
  • babel-preset-react-app
    • #9374 fix: use default modules option from preset-env (@JLHwung)
  • react-dev-utils
  • react-dev-utils, react-scripts
  • cra-template-typescript, cra-template, react-scripts
    • #8734 fix: handle templates without main package field (@mrmckeb)

💅 Enhancement

  • react-scripts
  • babel-preset-react-app, eslint-config-react-app, react-scripts
  • cra-template
  • babel-preset-react-app, react-scripts
  • react-dev-utils, react-scripts
    • #9350 Add Fast Refresh warning when using React < 16.10 (@iansu)
  • react-dev-utils, react-error-overlay, react-scripts
  • cra-template-typescript, cra-template
  • create-react-app

📝 Documentation

🏠 Internal

🔨 Underlying Tools

  • react-scripts
  • react-error-overlay, react-scripts
  • 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
  • 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
  • eslint-config-react-app, react-error-overlay, react-scripts
  • cra-template-typescript, cra-template
  • react-app-polyfill
  • react-dev-utils
  • babel-plugin-named-asset-import, babel-preset-react-app, confusing-browser-globals, create-react-app, react-dev-utils, react-error-overlay, react-scripts
  • babel-preset-react-app, cra-template-typescript, cra-template, create-react-app, react-dev-utils, react-error-overlay, react-scripts
  • babel-plugin-named-asset-import, confusing-browser-globals, create-react-app, react-dev-utils, react-error-overlay, react-scripts
  • babel-preset-react-app, create-react-app, react-dev-utils, react-error-overlay, react-scripts
  • babel-plugin-named-asset-import, babel-preset-react-app, create-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
  • eslint-config-react-app, react-scripts
  • babel-plugin-named-asset-import, babel-preset-react-app, confusing-browser-globals, cra-template-typescript, react-dev-utils, react-error-overlay, react-scripts

Committers: 63