Roadmap for version 3.0

Created by: iansu

We are planning to release Create React App version 3.0 soon. This will be a relatively small release but will include a number of necessary breaking changes.

Planned Features

• Jest 24: https://github.com/facebook/create-react-app/pull/6278
• Hooks ESLint plugin: https://github.com/facebook/create-react-app/pull/5997
• TypeScript ESLint plugin https://github.com/facebook/create-react-app/pull/6513
• Add browserslist support to @babel/preset-env: #6608
• Absolute imports using jsconfig.json/tsconfig.json: https://github.com/facebook/create-react-app/pull/6656

Nice to Have Features

• babel-plugin-optimize-react: https://github.com/facebook/create-react-app/pull/6219

Refer to the 3.0 Milestone to see exactly what is included in this release.

☢️ How Can I Test This Now? ☢️

We're happy you'd like to test the next version of react-scripts! Before getting into the details, we'd like to make you aware of a few things:

1. Features may be broken or not work as expected
2. There will be more breaking changes introduced before the final release ⚠️
3. Documentation for new features is still sparse, so look through the pull requests for how they're expected to work

You can install the latest alpha version of react-scripts using one of the following commands:

$ # Create a new application
$ npx create-react-app@next --scripts-version=3.0.0-next.68 app-name
$ # Upgrade an existing application
$ yarn upgrade react-scripts@3.0.0-next.68

Upgrading from 2.0 to 3.0

• 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 https://github.com/facebook/create-react-app/blob/b0cbf2caa18ee8267855b14578ebc3dee826f552/packages/react-scripts/package.json#L83-L94 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

• We now have linting support for TypeScript files! If you're using Visual Studio Code, see https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/setting-up-your-editor.md#displaying-lint-output-in-the-editor for tips to get syntax highlighting from the ESLint extension in your .ts and .tsx files

• We now support setting basePath in jsconfig.json. To configure basePath to point to the src directory create a jsconfig.json file in your project root:

   {
     "compilerOptions": {
       "baseUrl": "src"
     }
   }

Known Issues in 3.0 Alphas

• File watching issue with Jest 24: #6646 (closed)
• Dynamic imports may not work in some cases: #6673

Please report any bugs you encounter or behavior you believe to be incorrect by creating a new issue. Have fun!