babeljs - How to enable optional chaining with Create React App and TypeScript

Question

Support for the experimental syntax 'optionalChaining' isn't currently enabled

I was getting the above error. I followed this post and added "@babel/plugin-proposal-optional-chaining": "^7.7.4" into my devDependencies.

Then I am getting this error,

Add @babel/plugin-proposal-optional-chaining (https://git.io/vb4Sk) to the 'plugins' section of your Babel config to enable transformation.

So I followed this post and added .babelrc file into my project's root

{
    "presets": ["react", "es2015","stage-1"],
    "plugins": ["transform-runtime", "transform-optional-chaining"]
}

This did not seem to do anything. I also heard someone mentioning that Create React App does not let you modify babel's configurations. So my question is how can I enable optional chaining without re-wiring the whole CRA?

P.S. I am using "typescript": "^3.7.2", or at least that is what my package.json says. I tried npm install to ensure it is updated. Not sure if CRA doing something weird underneath and using older version of TypeScript somehow.

---

EDIT: When I started the project with CRA, I believe we were using TypeScript: 3.6.x. I wanted to use Optional Chaining, so I changed my package.json file to "typescript": "^3.7.2" then npm install. I think the problem is, TypeScript knows that I am using 3.7.2, but CRA still have older configuration and I am not sure how I can update that.

Answer 1

Create-React-App uses babel to transpile the TypeScript so it isn't using your npm installed version of TypeScript. Version 3.3.0 of react-scripts supports TypeScript 3.7. You can install it and use it with:

• yarn add react-scripts@3.3.0

  -or-

• npm install -s react-scripts@3.3.0