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

Answer 1

package.json

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom"
  },
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
    "customize-cra": "^0.4.1",
    "react-app-rewired": "^2.1.3"
  }
  ...other
}

---

config-overrides.js

const { useBabelRc, override } = require('customize-cra');
module.exports = override(useBabelRc());

---

.babelrc

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

detailed blogpost

Answer 2

React scripts 3.3.0 and above supports it. There is no need to install the react-scripts@next.

Just put in the package.json "react-scripts": "^3.3.0" and it will work.

Answer 3

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