React-native: Update babel-preset to use babel 7

[n1ru4l]

Currently an new generated react-native project uses babel @ version 6 for transpiling the source files.
Since babel is close to releasing version 7 it would make sense to update the setup (including babel-preset-react-native).

Environment

Environment:
  OS:  macOS Sierra 10.12.6
  Node:  8.9.4
  Yarn:  1.3.2
  npm:  5.6.0
  Watchman:  Not Found
  Xcode:  Xcode 9.2 Build version 9C40b
  Android Studio:  3.0 AI-171.4443003

Packages: (wanted => installed)
  react: 16.3.0-alpha.1 => 16.3.0-alpha.1
  react-native: 0.54.0 => 0.54.0

Expected Behavior

Updating to babel 7 is possible.

Actual Behavior

babel-preset-react-native is incompatible with babel7.

Steps to Reproduce

Create a new project with react-native init. Upgrade to babel 7 (yarn install -D -E @babel/core [email protected])

Run the bundle script: yarn react-native bundle --entry-file index.js --bundle-output lel.js

[hramos]

This is incoming. Please check back again next week.

[n1ru4l]

Awesome thank you 😊

[TareqElMasri]

What is the update for this?

[hramos]

It's still being worked on. We hit some snags, which reminded me that posting ETAs is not a good idea. So, look for it "soon" ;)

[deepsweet]

https://github.com/facebook/react-native/commit/f8d6b97140cffe8d18b2558f94570c8d1b410d5c

[kelset]

Babel7 will land with 0.56, closing this.

[danielgindi]

Babel7 landed and broke everything. Not such a good idea after all. :sweat_smile:

---

Edit: Just had to add a smiley there.

[kelset]

Babel7 landed and broke everything.

Can you be more specific and less passive aggressive? There are a few known issues at the moment but it's not "everything". So please refrain from posting comments like that.

[danielgindi]

@kelset No problem :-) Didn't mean to sound aggressive.
I guess I mistakenly assumed that it was broken for everyone, and I just moved on and didn't upgrade to 0.56.*.
Anyway what happens is that babel is not setup correctly, and all the import statements and other TypeScript stuff from the react native cli is not transpiled. It fails specifically on the first import statement in the cli's code.
I tested on macOS too - where a different error was raised - but I can't recall.

If you ask me - it's about the babel preset not being configured right, but npm outdated will not shout that there's something outdated.

[danielgindi]

Okay I just found out that the CHANGELOG contains a statement about the babel-preset, and I missed it. It's tagged as next, so npm does not tell us about it.

I apologize for making a mountain out of nothing!

[danielgindi]

Okay sorry for polluting, but I tried again.
Started with create-react-native-app, then react-native-git-upgrade next, then added the new babel preset (not added automatically!), added it to .babelrc, npm ied, and then react-native start still spits out:

import type {CommandT} from './commands';
       ^^^^

SyntaxError: Unexpected identifier

[kelset]

@danielgindi open a dedicated issue instead of polluting this.

[Bizarrus]

Install older version, for sample:

react-native init --version="0.55.4" YourProject

It seem's working here.

[alawneh0]

@Bizarrus +1