Create-react-app: Update Babel to support new TypeScript 3.7.2 syntax features

[DillonFlohr]

Is your proposal related to a problem?

When updating my projects TypeScript version to the new 3.7.2 and trying to use the new syntax, such as optional chaining:

foo?.bar()

I get an error during runtime saying that Babel does not support this feature:

Support for the experimental syntax 'optionalChaining' isn't currently enabled
Add @babel/plugin-proposal-optional-chaining (https://git.io/vb4Sk) to the 'plugins' section of your Babel config to enable transformation.

Describe the solution you'd like

It would be nice if the Babel config made by CRA would install these new features. I do not want to have to eject to customize my Babel config.

Describe alternatives you've considered

I've tried installing the Babel plugin as described here with no luck:
https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator

[C-Higgins]

Even after installing the babel plugins, the eslint-typescript package has not updated far enough to fully support optional chaining and nullish coalescing: https://github.com/typescript-eslint/typescript-eslint/issues/1116

This change will need to wait for them as well

[JoshClose]

Would CRA even use a babel plugin for this? I would think typescript itself would be doing this. If I eject a CRA typescript project the only dependencies for typescript are typescript, @typescript-eslint/eslint-plugin, and @typescript-eslint/parser. I'm actually very surprised that after updating to typescript 3.7.2 that it didn't just work.

Can you explain why it doesn't just work? Are the eslint dependencies what is showing the compile error?

[zaunermax]

The problem here is that typescript is only used to type-check the code. The actual transpilation is done by babel. That's also the reason why CRA emits the code first (the app already reloads) and then afterward says that it's waiting for the type checking results.

So even though the app would pass the type check, babel woult still fail to transpile the new typescript features like optional chaining.

That's the reason why updating to a newer TS version is not enough.

[miraage]

Related to #7438

[ianschmitz]

Dupe of #7431. We'll be releasing support in the next few days.

[Deniscapp]

Hey guys, but I see that now react-app preset contains in its dependencies both @babel/plugin-proposal-optional-chaining and @babel/plugin-proposal-nullish-coalescing-operator.
Shoudn't at this point, having

"presets": [
    "react-app"
  ]

be enough? Without adding them as plugins?

[rhyek]

I'm still waiting for a CRA release to start using TS 3.7 for all our projects (monorepo).