React Native SyntaxError in node_modules/react-native/index.js: Unexpected token, expected "{" (13:7) on Android Build

Question

I have initialized a react-native-project and converted it to use TypeScript. I also setup the project to compile to web, android, and ios. Webpack was installed to launch the web version. I got everything working on Web and iOS just fine but when I run yarn android and build to android I get a Syntax error in the Metro window and on the android simulator coming from the index.js file inside the react-native project under node_modules.

This is only happening on Android. I have installed a number of babel plugins and presets so I'm not sure why this index.js file is not working for Android but works correctly on iOS. Any help would be great. I have uploaded the project in a public repo.

I have the starter project available in a github repo so you can pull down my exact setup. https://github.com/hybridmindset/liveapp

I am running on a Mac OS version Catalina 10.15.4 Node v14.0.0

Metro server window with Error

Android Simulator Window with Error

Did you solve it? I'm having the same problem, but with iOS. — Bernardo SOUSA
– Bernardo SOUSA, Commented Jul 2, 2020 at 15:20
Interestingly, I'm also having this problem with the master branch of my project, which builded just fine last week and produced a bundle that is currently in production. That makes me think the problem comes from the state of the tooling, not from its configuration. — Bernardo SOUSA
– Bernardo SOUSA, Commented Jul 3, 2020 at 13:34
Re-cloning the rep and setting babel to its defaults solved it for me. — Bernardo SOUSA
– Bernardo SOUSA, Commented Jul 3, 2020 at 14:52

mukesh · Accepted Answer · 2020-05-04 03:02:16Z

2

This might help. Here is my .babelrc: { "presets": [ "@babel/preset-env", "@babel/preset-react", "@babel/preset-flow" ] }

https://github.com/babel/babel/issues/9351

answered May 4, 2020 at 3:02

mukesh

311 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Lavon Woods Over a year ago

Look at the babel.config in my repo. I'm already using those presets and it is still not working. My issue looks different than yours. Thanks for commenting tho.

stigi · Accepted Answer · 2020-08-21 15:10:19Z

0

If this issue happens to you while upgrading to React Native 0.63 the discussion in this PR might be for you: https://github.com/facebook/react-native/pull/29477

Depending on your situation it might be enough to update your Bundle React Native code and images build phase in Xcode to set this environment variable at the top:

PROJECT_ROOT="$SRCROOT/.."

Alternatively you can apply the changes from mentioned PR using https://github.com/ds300/patch-package.

answered Aug 21, 2020 at 15:10

stigi

6,7383 gold badges43 silver badges51 bronze badges

Comments

mm_ · Accepted Answer · 2021-10-14 06:10:13Z

0

You might be missing

config{
    ...
    externals : {
        'react': 'React',
        'react-native': true,
    },

in webpack.config.js

answered Oct 14, 2021 at 6:10

mm_

1,7352 gold badges20 silver badges42 bronze badges

Comments

Flávio Henrique · Accepted Answer · 2022-02-16 13:28:03Z

0

I was having the same issue, but the solution of @mukesh fixed for me.

I update my react-native to version 0.67.2 and add @babel/preset-env and @babel/preset-flow to my babel.config.js

answered Feb 16, 2022 at 13:28

Flávio Henrique

311 bronze badge

Collectives™ on Stack Overflow

React Native SyntaxError in node_modules/react-native/index.js: Unexpected token, expected "{" (13:7) on Android Build

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related