Optional Chaining not enabled ReactNative

Question

I am getting this error when running the android project in react react native.

This is fresh install of react native version "react": "^16.3.1","react-native": "^0.57.1",

It gives error of optional chaining. Can anyone please help me how to enable optional chaining in react native.

Loading dependency graph, done.
BUNDLE [android, dev] ....../index.js ▓▓▓▓▓▓▓▓▓▓░░░░░░ 64.3% (667/832)::ffff:127.0.0.1 - - [02/Oct/2018:04:30:46 +0000] "GET /index.delta?platform=android&dev=true&minify=false HTTP/1.1" 500 - "-" "okhttp/3.10.0"
error: bundling failed: SyntaxError: C:\ReactNative\mrn\node_modules\react-native\Libraries\Components\Switch\Switch.js: Support for the experimental syntax 'optionalChaining' isn't currently enabled (103:41):

101 | // Support deprecated color props.
102 | let _thumbColor = thumbColor;

103 | let _trackColorForFalse = trackColor?.false;
| ^
104 | let _trackColorForTrue = trackColor?.true;
105 |
106 | // TODO: Remove support for these props after a couple releases.

Add @babel/plugin-proposal-optional-chaining (https://git.io/vb4Sk) to the 'plugins' section of your Babel config to enable transformation.
at _class.raise (C:\ReactNative\mrn\node_modules@babel\parser\lib\index.js:3939:15)
at _class.expectPlugin (C:\ReactNative\mrn\node_modules@babel\parser\lib\index.js:5253:18)
at _class.parseSubscript (C:\ReactNative\mrn\node_modules@babel\parser\lib\index.js:5959:12)
at _class.parseSubscript (C:\ReactNative\mrn\node_modules@babel\parser\lib\index.js:2716:51)
at _class.parseSubscripts (C:\ReactNative\mrn\node_modules@babel\parser\lib\index.js:5944:19)
at _class.parseSubscripts (C:\ReactNative\mrn\node_modules@babel\parser\lib\index.js:2669:52)
at _class.parseExprSubscripts (C:\ReactNative\mrn\node_modules@babel\parser\lib\index.js:5934:17)
at _class.parseMaybeUnary (C:\ReactNative\mrn\node_modules@babel\parser\lib\index.js:5903:21)
at _class.parseExprOps (C:\ReactNative\mrn\node_modules@babel\parser\lib\index.js:5812:21)
at _class.parseMaybeConditional (C:\ReactNative\mrn\node_modules@babel\parser\lib\index.js:5784:21)
BUNDLE [android, dev] ....../index.js ▓▓▓▓▓▓▓▓▓▓▓▓░░░░ 77.5% (752/854), failed.

score 10 · Answer 1 · edited Nov 28 '18 at 08:19

10

I got it fixed by adding file .babelrc file in root

{
  "plugins": [
    "@babel/plugin-proposal-optional-chaining"
  ],
  "presets": [
    "react-native"
  ]
}

restart metro after change .babelrc file

edited Nov 28 '18 at 08:19

Pedro Paulo

53
4

answered Oct 02 '18 at 07:28

Vinay Sikarwar

411
6
18

score 5 · Answer 2 · answered Oct 02 '18 at 07:20

5

The error says that to add @babel/plugin-proposal-optional-chaining

Try installing this

npm install --save-dev @babel/plugin-proposal-optional-chaining

answered Oct 02 '18 at 07:20

Jason Hong

79
6

3

that is installed but not enabled – Vinay Sikarwar Oct 02 '18 at 07:26
2

Try adding { "plugins": ["@babel/plugin-proposal-optional-chaining"]} to your .babelrc or run babel --plugins @babel/plugin-proposal-optional-chaining script.js – Jason Hong Oct 02 '18 at 07:34

score -1 · Answer 3 · answered Jan 30 '19 at 03:53

I have also faced this problem after upgrading my application from old react-native version to the new one. it needs some babel libraries in devDependencies.here is my devDependencies once try it

"devDependencies": { "babel-jest": "23.6.0", "jest": "23.6.0", "metro-react-native-babel-preset": "0.50.0", "react-test-renderer": "16.6.1" }, "jest": { "preset": "react-native" }

Optional Chaining not enabled ReactNative

3 Answers3

Linked