React Native starter project bundling fails with Unexpected Token error

13
votes

I'm trying to create my first React Native app for Android using the instructions on https://facebook.github.io/react-native/docs/getting-started.html. After setting up the dependencies and connecting my Android device, I ran

react-native init app
cd app
react-native run-android

This starts the React Packager, which fails to bundle with this error:

error: bundling failed: "TransformError: /Users/luky/dev/app/index.android.js: Unexpected token ) (While processing preset: \"/Users/luky/dev/app/node_modules/babel-preset-react-native/index.js\")"

I am using:

  • OSX El Capitan 10.11.6.
  • node version 6.9.2
  • react-native version 0.47.1.

I pushed my generated project, including node_modules, to Github in case it helps: https://github.com/luky1971/react-native-app

Does anyone know why I might be getting an Unexpected token error? Any help would be greatly appreciated!

7
node.jsreact-nativebabeljs

7 Answers

20
votes

I got the same thing, it looks like the latest version of the babel preset for react native has some bugs (version 3.0.0). I went into my package.json and replaced the latest version with this:

"babel-preset-react-native": "2.1.0".

then I deleted the node_modules directory and ran npm install and it worked.

6
votes

Install [email protected] and run the project.

In the current project, do this...

yarn remove babel-preset-react-native
yarn add [email protected]

This worked for me, I hope it will for you too.

You can find more information about the error here https://github.com/facebook/react-native/issues/15513#issuecomment-322824346

2
votes

Try deleting the .babelrc file in the root directory. Or rename it. Then re-run the "react-native run-android" command. This worked for me. Good luck.

1
votes
Looking for JS files in
   /Users/admin/Desktop/CoinMarketCap 


React packager ready.

Loading dependency graph, done.
Bundling `index.ios.js`  [development, non-minified, hmr disabled]  0.0% (0/1), failed.
error: bundling failed: "TransformError: /Users/admin/Desktop/CoinMarketCap/index.ios.js: Unexpected token ) (While processing preset: \"/Users/admin/Desktop/CoinMarketCap/node_modules/babel-preset-react-native/index.js\")"

iMac-D001:CoinMarketCap admin$ react-native --v
react-native-cli: 2.0.1
react-native: 0.47.1

Fixed it for me: https://github.com/facebook/react-native/issues/15545

iMac-D001:CoinMarketCap admin$ npm uninstall babel-preset-react-native
iMac-D001:CoinMarketCap admin$ npm install [email protected]
0
votes

I cloned your project. It is working fine. You can delete node_modules folder, then npm_install. It will work fine.

0
votes

Try to set a new project, choosing the version of react-native as below:

react-native init --version="0.55.0" MyNewApp

Go to the new project directory.

CD project_name

Open the app in android studio. Open the AVD manager emulator and choose the virtual device. Then execute this command back there on the prompt:

react-native run-android

This worked for me. Hope it can help you too.

0
votes

It could also be because of a dependency that you're using and needs to be put in the preset of your babel.config.js

e.g. I ws using expo, then ejected. And one of the dependency was react-native-paper for which I had to change the babel.config.js file to get it working.