21

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.

Hafiz Temuri
  • 2,838
  • 6
  • 27
  • 54
  • You could use [typescript 3.7](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining). Optional chaining is now a natively supported function. – Nicolas Nov 28 '19 at 17:11
  • I am using TypeScript `^3.7.2`. Or at least thats what my `package.json` says. I have tried `npm install` too. – Hafiz Temuri Nov 28 '19 at 17:12

3 Answers3

28

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

LukeP
  • 1,337
  • 13
  • 22
  • 1
    Can you use optional chaining on `react-scripts 3.3.0` without using TS? – Badrush Jan 24 '20 at 16:45
  • No - optional chaining is a TypeScript feature that needs to be transpiled to JavaScript to work in browsers or NodeJS. – LukeP Jan 24 '20 at 23:49
  • @Badrush Optional Chaining is TS feature, how can you use it without TS? Its like me saying, can I just eat the yolk without breaking the egg. The simple answer is NO! But lets hope they add it to vanilla JS soon. – Hafiz Temuri Mar 26 '20 at 21:16
7

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.

Elisha Sterngold
  • 1,673
  • 1
  • 12
  • 12
6

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

Medet Tleukabiluly
  • 9,929
  • 3
  • 30
  • 56
  • I mentioned that in OP, I dont want to re-wire the whole thing. `"So my question is how can I enable optional chaining without re-wiring the whole CRA?"` – Hafiz Temuri Dec 03 '19 at 17:48
  • 1
    How do I use `customize-cra` if I am already using it to override the config? Eg: ```module.exports = function override(config) { config.resolve.modules = [path.resolve(__dirname, 'src'), 'node_modules']; return config; };``` – Subhendu Kundu Dec 04 '19 at 19:02