Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[android / ios] bundling failed: "TransformError #15513

Closed
esganzerla opened this issue Aug 16, 2017 · 35 comments
Closed

[android / ios] bundling failed: "TransformError #15513

esganzerla opened this issue Aug 16, 2017 · 35 comments
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.

Comments

@esganzerla
Copy link

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

  1. react-native -v:
    react-native-cli: 2.0.0
    react-native: n/a - not inside a React Native project directory
    (I was inside the folder, version is: 0.47.1)
  2. node -v: v7.10.0
  3. npm -v: 4.2.0
  4. yarn --version: 0.17.10

Then, specify:

  • Target Platform: Android, iOS
  • Development Operating System: macOS Sierra 10.12.6
  • Build tools: Using Xcode 8.3.3 and Android Studio 2.3

Steps to Reproduce

  1. react-native init rn_reproduce_transform_error
  2. cd rn_reproduce_transform_error
  3. react-native run-ios or react-native run-android

Expected Behavior

Should show the default "Welcome to React Native!" screen.

Actual Behavior

bundling failed: "TransformError: /Users/eduardo/Desktop/rn_reproduce_transform_error/index.ios.js: Unexpected token ) (While processing preset: "/Users/eduardo/Desktop/rn_reproduce_transform_error/node_modules/babel-preset-react-native/index.js")"

Same error occurs when I tried to update RN version to 0.48.0-rc.1
SyntaxError: Unexpected token )

Reproducible Demo

https://github.com/esganzerla/rn_reproduce_transform_error

Notes

@tmartres
Copy link

Had the same issue and after restarting my computer the issue went away for me. You might have to just close and restart your terminal and simulator too.

@kamavingah
Copy link

+1

experiencing the same issue on run-android aswell as run-ios

@amerej
Copy link

amerej commented Aug 16, 2017

@tmartres Restarting don't work for me

@esganzerla
Copy link
Author

Restarting didn't help here too.

@esganzerla
Copy link
Author

I've just found a workaround:

yarn remove babel-preset-react-native
yarn add babel-preset-react-native@2.1.0

The hole is probably deeper, but that is works for me.

@jarecsni
Copy link

I've tried to create a new RN app by RNCA (Expo) and then eject it. Works perfectly fine, although it runs on React Native 0.46.1, so I'm guessing this is an issue with 0.47.

@charpeni
Copy link
Contributor

charpeni commented Aug 16, 2017

Thank you for reporting and for the workaround @esganzerla.

It seems an issue with babel-preset-react-native@3.0.0 that was released earlier.

@jeanlauliac How should we fix this issue? Add a specific major version in react-native-cli? Or something has been planned?

`jest babel-jest babel-preset-react-native react-test-renderer@${reactVersion}`

cc @ericnakagawa who's on call.

@charpeni
Copy link
Contributor

@facebook-github-bot label Tooling

@sachinwak
Copy link

uninstalling and installing babel-preset-react-native works for me thanks a lot @esganzerla

@ivanzotov
Copy link
Contributor

ivanzotov commented Aug 16, 2017

Spent a lot of time trying to fix this issue, PR #15516 but I still don't understand why it works.

@ivanzotov
Copy link
Contributor

I just moved plugins from plugins.push(... to const plugins = [...]

@ivanzotov
Copy link
Contributor

ivanzotov commented Aug 16, 2017

@cpojer any ideas? it seems these changes break it – 4caf794

@charpeni
Copy link
Contributor

charpeni commented Aug 16, 2017

It's because trailing commas in function parameter lists are not supported.

@ivanzotov
Copy link
Contributor

@charpeni exactly

@cpojer
Copy link
Contributor

cpojer commented Aug 16, 2017

Needs node 8. Feel free to remove that and the @Format annotation, I guess.

ivanzotov referenced this issue Aug 16, 2017
Reviewed By: mjesun

Differential Revision: D5631078

fbshipit-source-id: a8d4955a723c1846b9406e734c3e3fa2c0df3fb7
@Ibrokola
Copy link

It is a bug an the work around that worked for me was to edit dependency of babel in package.json to "babel-preset-react-native": "2.1.0". After which I deleted node_modules and re-installed the npm (npm install). Then it worked like a charm.

@Ibrokola
Copy link

Ibrokola commented Aug 17, 2017 via email

@mohammedhammoud
Copy link

mohammedhammoud commented Aug 17, 2017

This fixed it for me:
yarn add react@16.0.0-alpha.12 react-test-renderer@16.0.0-alpha.12

@gedeagas
Copy link
Contributor

Thx a lot dude @esganzerla , your workaround fixed my problem

@coryarmbrecht
Copy link

Since I'm not using yarn, @Ibrokola 's solution fixed it for me (Thanks!), but I'm curious about what that version jump (3 -> 2) could do.

@guoliang1206
Copy link

for my case , it need execute npm install babel-preset-react-native@2.1.0 --save-dev , it works for me .

@ShubhamBabhulkar
Copy link

For npm Following Command are work for me
$ npm uninstall babel-preset-react-native
$ npm install babel-preset-react-native@2.1.0

@ShubhamBabhulkar
Copy link

If you Still Getting Problem in babel-preset-react-native then try Following Process

package.json

"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.47.1",
"babel-preset-react-native": "2.1.0" --------->Here
},

Delete 'Node_modules' folder from react native project manually
and run followinf Commands in react native project
$ npm install
$ npm start -- --reset-cache
$ react-native run-android

@Ibrokola
Copy link

Ibrokola commented Aug 18, 2017 via email

@cheng-kang
Copy link

Check index.ios.js, see if there is a trailling comma. If so, delete it. It works for me.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  // ↑ here, delete it
});

@cyorobert
Copy link

@Ibrokola's solution fixed this issue for me. Thanks!

@zhiyingzzhou
Copy link

@ShubhamBabhulkar it works for me,thank you!

@golestanirad
Copy link

golestanirad commented Aug 20, 2017

@Ibrokola thanks worked for me.

  1. delete node_modules folder
  2. go to package.json and change babel-preset-react-native: 3.0.0" to babel-preset-react-native: 2.1.0"
  3. run "npm install"

@zuhrisaifudin
Copy link

this works ..thanks guys

@SambitPrakash
Copy link

@esganzerla thank you a lot. I uninstall yarn and reinstall it. It worked for me.

@GuiMend
Copy link

GuiMend commented Aug 21, 2017

thanks a lot @esganzerla, i installed yarn and then added that babel-preset... and it worked for me!

@jmgallo55
Copy link

Hey Guys-
Nothing new, just writing what worked for me:

  1. npm install --save-dev babel-preset-react-native@2.1.0
  2. npm install
  3. react-native run-android

@varunagg45
Copy link

@cheng-kang your answer worked. I did all the steps necessary, yarn delete yarn add, npm install, uninstall, babel preset version upgrades but nothing worked but your solution.

@nikkwong
Copy link

nikkwong commented Jun 4, 2018

I'm running into this in babel-preset-react-native: ^5.0.0. Anyone else having this problem? I've tried several different versions of babel-preset-react-native and haven't had any luck. Been debugging it for 7-8 hours now. Clearing xcode caches, npm caches, deleting and reinstalling pods, node modules, restarting process on :8081, where else could this be coming from? ...

error: bundling failed: SyntaxError: /nikkwong/index.js: Unexpected token < (19:12)
  17 |     render() {
  18 |         return (
> 19 |             <View>Hi</View>
     |             ^
  20 |         )
  21 |     }
  22 | }

@sujitpk-perennial
Copy link

@nikkwong are you able to solve this issue?

@facebook facebook locked as resolved and limited conversation to collaborators Aug 16, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Aug 16, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests