CODEWITHSUNDEEP
typescriptreact-native
Lavon Woods
Lavon Woods

Reputation: 51

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

Upvotes: 5

Views: 8206

Answers (4)

Flávio Henrique
Flávio Henrique

Reputation: 31

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

Upvotes: 0

mm_
mm_

Reputation: 1735

You might be missing

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

in webpack.config.js

Upvotes: 0

stigi
stigi

Reputation: 6711

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.

Upvotes: 0

mukesh
mukesh

Reputation: 31

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

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

Upvotes: 2

Related Questions