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

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

Solution 1:^[1]

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

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

Solution 2:^[2]

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.

Solution 3:^[3]

You might be missing

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

in webpack.config.js

Solution 4:^[4]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	mukesh
Solution 2	stigi
Solution 3	mm_
Solution 4	Flávio Henrique

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]