Β« Changelog History


create-react-app v3.0.0 Release Notes

Release Date: 2019-04-22 // about 5 years ago

  • 3.0.0 (April 22, 2019)

    πŸ“„ Create React App 3.0 brings some exciting new features including support for Hooks!

    πŸš€ Thanks to all the maintainers and contributors who worked so hard on this release! πŸŽ‰

    Highlights

    • Jest 24: #6278
    • πŸ‘ Hooks support: #5997
    • πŸ‘• TypeScript linting: #6513
    • πŸ’» browserslist support in @babel/preset-env: #6608
    • Absolute imports using jsconfig.json/tsconfig.json: #6656

    Migrating from 2.1.x to 3.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]

    ⬆️ 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 few 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.

    Jest 24

    πŸ’… We've updated from Jest 23 to get the latest improvements in Jest 24. We've noticed some differences in snapshot serialization in Jest 24, so you may need to adjust your tests slightly once you update. You can read more about what's changed in the Jest 24 blog post.

    πŸ‘ Hooks support

    πŸ‘• We now enforce Rules of Hooks with eslint-plugin-react-hooks. If you are breaking any of the rules of Hooks this will cause your build to fail.

    πŸ‘• TypeScript linting

    πŸ‘• We now lint TypeScript files. You can see the list of rules we enforce to check if your project is compatible. If you're using Visual Studio Code you can follow our guide to setup up your editor to display lint warnings.

    πŸ’» browserslist support in @babel/preset-env

    πŸ‘€ The browserslist config in your package.json is now used to control the output of your JavaScript files. You can use separate configuration for development and production. See here for a good starting point which gives a good development experience, especially when using language features such as async/await, but still provides high compatibility with many browsers in production

    βœ‚ Remove --no-watch flag

    🚚 We've removed the --no-watch flag from the start script in favor of Jest's own --watchAll=false.

    πŸ†• New structure in asset-manifest.json

    🚚 All asset paths have been moved under the files key in asset-manifest.json.

    πŸ†• New Features

    using jsconfig.json/tsconfig.json

    πŸ”§ We now support setting baseUrl in jsconfig.json and tsconfig.json. To configure baseUrl to point to the src directory in your JavaScript project, create a jsconfig.json file in your project root:

    ```json
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}
```

    πŸ”§ If you have a TypeScript project you can configure baseUrl the same way in your tsconfig.json.

    0️⃣ Currently the only supported options for baseUrl are node_modules (the default) and src.

    PostCSS Normalize

    πŸ’… You can now include a version of Normalize.css in your project that will use your browserslist setting to generate the appropriate styles for your target browsers. To include it simply add @import-normalize at the top of one of your CSS files.

    Detailed Changelog

    🍱 πŸš€ New Feature

    • react-scripts
    • πŸ”Œ babel-plugin-named-asset-import, confusing-browser-globals, react-dev-utils, react-error-overlay, react-scripts
    • πŸ‘• eslint-config-react-app, react-scripts
    • πŸ‘• babel-preset-react-app, eslint-config-react-app, react-scripts
    • babel-preset-react-app, react-dev-utils, react-scripts

    🍱 πŸ’₯ Breaking Change

    • react-scripts
    • babel-preset-react-app, react-app-polyfill
    • πŸ”Œ babel-plugin-named-asset-import, confusing-browser-globals, react-dev-utils, react-error-overlay, react-scripts
    • πŸ‘• eslint-config-react-app, react-scripts
    • πŸ‘• babel-preset-react-app, eslint-config-react-app, react-scripts
    • babel-preset-react-app, react-dev-utils, react-scripts

    🍱 πŸ› Bug Fix

    🍱 πŸ’… Enhancement

    • react-scripts
    • πŸ‘• babel-plugin-named-asset-import, babel-preset-react-app, confusing-browser-globals, create-react-app, eslint-config-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
    • babel-preset-react-app, react-app-polyfill
    • create-react-app
    • react-dev-utils

    πŸ“š πŸ“ Documentation

    🍱 🏠 Internal

    • Other
    • react-scripts
      • #6313 Update testMatch to also be compatible with Jest 24 (@ngbrown)
      • #4176 Remove --coverage + --watch workaround for the test command (@stipsan)
      • #6655 Change app component declaration from arrow function to regular function (@iansu)
      • #6625 change named import into default import (@xiaoxiangmoe)
      • #6621 make compiler a const not a let (@Primajin)
    • πŸ”Œ babel-plugin-named-asset-import, confusing-browser-globals, react-dev-utils, react-error-overlay, react-scripts
    • react-dev-utils
    • πŸ‘• eslint-config-react-app
      • #6662 Sync version of babel-eslint in eslint-config-react-app for react-scripts V3 (@dalcib)

    🍱 πŸ”¨ Underlying Tools

    • react-scripts
    • πŸ‘• babel-plugin-named-asset-import, babel-preset-react-app, confusing-browser-globals, create-react-app, eslint-config-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
    • babel-preset-react-app
    • babel-preset-react-app, react-dev-utils, react-error-overlay, react-scripts
    • react-dev-utils
      • #6739 Update fork-ts-checker-webpack-plugin out of alpha (@pelotom)
    • πŸ‘• eslint-config-react-app
      • #6701 Remove project property from @typescript-eslint/parser options (@jackwilsdon)
    • πŸ‘• eslint-config-react-app, react-scripts
      • #6653 Unpin eslint-config-react-hooks dependency (@iansu)
    • πŸ‘• babel-preset-react-app, eslint-config-react-app, react-scripts
    • babel-preset-react-app, create-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts

    Committers: 49