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 [email protected]

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 ?

[pavinthan]

Search available port to start webpack dev server if port is not specified in env

[raix]

@iansu I saw that #6280 was moved to milestone 3 - does that mean that it will be part of this release?

[iansu]

We've just published the first alpha release of Create React App 3.0! This issue has been updated with instructions on testing the new release. If you encounter any problems please create a new issue instead of commenting here. Thanks!

[ianschmitz]

Any thoughts about supporting webpackPrefetch?

@raRaRa please follow #3319 for updates on this. We're waiting on jantimon/html-webpack-plugin#1014 to support this.

[iansu]

@raix That doesn't necessarily mean it will be included. We're considering it but we're also hoping to get 3.0 final out pretty quickly. Anything that isn't critical to the release and isn't ready will be pushed to a future version. That isn't a breaking change so it can be released at any time.

[robertvansteen]

@iansu I've created a new PR (#6656) for baseUrl support in favor of #6116 so we can hopefully get that in with 3.0

[pavinthan]

@iansu why 3.0 add ability to configure PostCSS plugins ?
please have a look into this if possible #6649

[delasierra]

It seems that React @types are not installed by using --typescript flag.

npx create-react-app@next --scripts-version=3.0.0-next.b0cbf2ca my-app --typescript

[ianschmitz]

It seems that React @types are not installed by using --typescript flag.

npx create-react-app@next --scripts-version=3.0.0-next.b0cbf2ca my-app --typescript

@delasierra please file an issue. Let's keep this issue focused on the roadmap discussions.

[stramel]

@voliva Even with typescript@next I'm still getting slow storybooks.

[iansu]

We've just published a new alpha release of Create React App 3.0! This issue has been updated with instructions on testing the new release. If you encounter any problems please create a new issue instead of commenting here.

Notable changes since the last alpha

• Add support for baseUrl in jsconfig.json (Set baseUrl from jsconfig.json/tsconfig.json #6656)
• Update to core-js 3 (Update to core-js@3 #6769)
• Upgrade to workbox-webpack-plugin v4 (Update to workbox-webpack-plugin v4 #6725)
• Enable futureEmitAssets setting in webpack config (Enable futureEmitAssets in webpack config #6696)
• Fix terser causing build to hang on WSL (fix: terser-webpack-plugin hanging on WSL #6732)
• Add PostCSS Normalize (Adds PostCSS Normalize #5810)

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

[jkdowdle]

@iansu

Not sure where the best place to open an issue is for an alpha build, but I noticed strange behavior after updating to latest alpha trying my test coverage script. Instead of running a coverage report it seems to be entering watch mode.

Here is a reproducible repo.

https://github.com/jkdowdle/creact-react-app-3.0.0-next.68-test-coverage-issue
Or

npx create-react-app@next --scripts-version=3.0.0-next.68 app-name && cd $_ && yarn test --coverage

[iansu]

@jkdowdle Please file this as a new issue so we can track it properly.

[jlarmstrongiv]

I read the “Nice to Have Features” for the 3.0 release, and was wondering whether these PR’s qualify:

• Simple electron.js support Support simple electron support via TARGET_ELECTRON env variable #5498
• Webworker support Add WebWorker Support #3660, please see the updated version WIP: Add support for WebWorker with worker-loader #5886

[iansu]

@jlarmstrongiv I don't think either of those features are going to make it into 3.0 but they're not breaking changes so we can include them in a 3.x release.

[devongovett]

jsconfig.json is not a good idea. The filename implies that it is somehow a standard JS thing, when it is actually a CRA specific thing. tsconfig.json IS a TypeScript standard thing, since it comes from the sole vendor of the TypeScript language. However, JavaScript is a standard from multiple vendors, and publishing a config file that implies that it is related to that standard will cause confusion when people switch between tools.

I would suggest renaming this file to craconfig.json or something similar, or maybe adding a cra key in package.json for this config.

[ianschmitz]

@devongovett it's a configuration file that is used by TypeScript's JavaScript language service. See http://code.visualstudio.com/docs/languages/jsconfig.

If you still have concerns maybe we could create a separate issue and discuss?

[devongovett]

Yeah, Dan already corrected me on Twitter. Even so, I don’t think propagating that config file further outside of VSCode is a good idea for the same reasons.

[ianschmitz]

The file isn't unique to VS Code. Code just happens to have TypeScript baked in 😛. But yeah let's fire up a separate issue to discuss if you prefer!

[mrmckeb]

@devongovett, as @ianschmitz said we're definitely open for discussion in an issue :)

jsconfig.json is quite powerful, and users in IDEs making use of the TypeScript service will benefit from this.

As I understand it, your concern is more that you'd like to see a config file for create-react-app. This is something we've discussed a few times, and we're definitely look at ways to make create-react-app more flexible for different users.

[CodingDive]

Very excited about CRA 3.0 especially about the eslint-hooks plugin 🎉
Could we also add #6599 to 3.0? It feels like full lerna support is one of the most requested features of the community.

[devongovett]

I don't really mind if there is or isn't a CRA specific config, I am mostly concerned with propagating a non-standard config masquerading as a standard one. It will cause confusion for people using other tools that support JavaScript but do not support this config file.

[robertvansteen]

We can specifically mention that in the documentation. But a standard needs to start somewhere, vscode has a huge user base and these users will benefit from a configuration that keeps their IDE and build tool in sync with things like auto completion. Having our own configuration file will not do that.

[mrmckeb]

Again, feel free to open an issue to discuss this further @devongovett.

[FezVrasta]

What are the breaking changes?

[Flydiverny]

Any chance we see #6280 making it in? Suppose its more under the nice to have. But PR seems ready and opens up a bit of possibilities when running multiple CRA apps locally

[iansu]

We just published Create React App 3.0! See the release notes for details about everything that's included and instructions on upgrading your apps.

Big thanks to everyone who contributed to this release and helped test the alphas! 🎉