[Packager] ES6 Modules feature

[alinz]

One of the feature that I really want to have is the new module syntax in es6. By brining Babeljs into the eco system I thought I can use it. Unfortunately, es6.modules are not part of the whitelist :(

To me es6 module removes a lot of code and makes the code more readable and clean.

Any thoughts on this?

p.s. I know module feature is not ready yet, but the whole point of using Babel is to use the next generation syntax safely. Well, I hope I my assumption is right. :D

[jtremback]

More detail: #1451

I'm going to just use browserify + babelify before sending files to the packager to get around these issues. I'll post an example in an hour or so.

EDIT: This doesn't work.

[euforic]

@jtremback you can just use the babel cli tool directly to pre-compile, but being able to do this directly in the react-native packager would be much nicer.

Below is an example script I added to my package json to do this.

$ ./node_modules/.bin/babel ./src/ --out-dir ./lib/ --stage 0 --ignore '/node_modules/' --optional runtime --watch &

Then just make your index.ios.js like this:

require('./lib');

One thing to note: Sometimes the react packager runs after the babel compile so you need to save twice to see your changes.

[alinz]

@euforic I rather modify packager/transformer.js and add 'es6.modules' into the whitelist than go through all these hacks. I wish we could override the whitelist with .babelrc. crossing finger to see this feature soon.

@jtremback any news on your side? Do you think we might be able to override whitelist with .babelrc file?

[jtremback]

@euforic I tried that, had some other issues, specifically around Babel runtime. I could look into it more, but I'm just going to try to get some work done with the packager as-is for now. Having Browserify concatenate it doesn't work because of the native modules.

@alinz see this: #1451

[euforic]

@jtremback @alinz I hacked together some of my build scripts into a makeshift cli tool if you guys are still looking for a fix. It's definitely not my best work but It has been getting me by until es6 modules work in the packager.

Github: bh5-js/rctapp
NPM: rctapp

It can do the following:

• Run Babeljs transpiler
• Start React Native Packager / Server
• Builds Xcode project
• Install App on iOS Simulator
• Launch App on iOS Simulator

[jtremback]

@euforic 👏

[alinz]

@brentvatne Do you know any way to get es6.modules working? I have tried custom transofrm, .babelrc, even @euforic's way, nothing seems to work and I keep getting this error. It seems no matter how hard I try I can't get es6.modules to work.

Need HELP please...

[brentvatne]

Hi @alinz - I believe this is related to #1924

Try making this simple change to node_modules/react-native/packager/packager.js: https://gist.github.com/brentvatne/794a77917d7a4b3cce5b/revisions (the one line resetCache option)

This is an example of a working babelrc: https://github.com/brentvatne/react-native-animated-demo-tinder/blob/master/.babelrc

[alinz]

@brentvatne thanks a lot. It works.

[euforic]

@brentvatne @alinz Just a heads up. I added support to the rctapp tool to clean the cache $ rctapp clean cache

[ryanmcdermott]

If anyone else encounters this issue, where you have a .babelrc file but React Native won't use your ES6/ES7 settings, please try the rctapp provided by @euforic This worked great for me. I ran rctapp clean cache and it fixed my issue.

[quantuminformation]

I'm not clear how to get es6 modules in a new RN 0.16.0-rc project.

[satya164]

@quantuminformation:ES6 modules are already supported by default in React Native. However there are some bugs preventing it to work in 0.16.0-rc, which will be fixed in 0.16.0