Roadmap for version 3.0

[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: Update to Jest 24 #6278
• Hooks ESLint plugin: Support React Hooks (#5602) #5997
• TypeScript ESLint plugin Add TypeScript linting support #6513
• Add browserslist support to @babel/preset-env: Support browserslist in @babel/preset-env #6608
• Absolute imports using jsconfig.json/tsconfig.json: Set baseUrl from jsconfig.json/tsconfig.json #6656

Nice to Have Features

• babel-plugin-optimize-react: Adds Babel plugin babel-plugin-optimize-react #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

  create-react-app/packages/react-scripts/package.json

  Lines 83 to 94 in b0cbf2c

  	"browserslist": {
  	"production": [
  	">0.2%",
  	"not dead",
  	"not op_mini all"
  	],
  	"development": [
  	"last 1 chrome version",
  	"last 1 firefox version",
  	"last 1 safari version"
  	]
  	}

  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: Update Jest to fix watch bug #6646
• Dynamic imports may not work in some cases: dynamic import are unrecognized in 3.0.0-next.b0cbf2ca, compile fails #6673

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

[miraage]

Not sure if it is a good place to ask, but.. could you share your intentions regarding RHL support? Can we expect it to be supported out of the box?

[amshtemp]

It would be nice if these two css features get included too:

• Support scoped CSS in the same file (Support scoped CSS in the same file #5224)
• CSS Modules with TypeScript: css-modules-typescript-loader (CSS Modules with TypeScript: css-modules-typescript-loader #5677)

[iansu]

@miraage I do not have any information to share about hot loader support.

@amshtemp Both of those issues are just proposals with no PR so it's very unlikely they will be included.

This is going to be a small release because we need to upgrade Jest due to the security issue with Jest 23. Once this is out we will immediately start work on version 4.0 so it's possible these features could be included then.

[mrmckeb]

@amshtemp, as previously stated on #5677, we aren't planning to add anything like that for now as it's not a good DX. We do want a solution, we just need the right one.

[robertvansteen]

Regrading the Typescript aliases (#6116) could the team give a little bit more details about how you would like this to work? There are still some questions/inconsistencies that I need some clarity on before I can continue working on the aliases part.

[cassiozen]

With hooks, it seems like class-based components will be used less and less. Should the default App component be function-based? (references #6451)

[iansu]

@cassiozen Yes, we will want to convert the template component to a function for v3. I'll add that to the list.

[fchienvuhoang]

love it!

[raRaRa]

Any thoughts about supporting webpackPrefetch?

[pavinthan]

Load PostCSS config file from project root directory if exists ?