[CLI] react-native bundle --minify fails with es6 for..of syntax

[jeanregisser]

react-native bundle --minify
Building package...
Build complete
/Users/jean/src/github.com/jeanregisser/MyApp/node_modules/react-native/node_modules/bluebird/js/main/promise.js:626
            throw e;
                  ^
Error: Error while minifying JS
Transformed code line: "for(var placement of placementsToTry) {"
Module name (best guess): react-native-popover/Popover
Unexpected token name «of», expected punc «;» (line: 41676, col: 18, pos: 739096)

Error
    at new JS_Parse_Error (/Users/jean/src/github.com/jeanregisser/MyApp/node_modules/react-native/node_modules/uglify-js/lib/parse.js:196:18)
    at js_error (/Users/jean/src/github.com/jeanregisser/MyApp/node_modules/react-native/node_modules/uglify-js/lib/parse.js:204:11)
    at croak (/Users/jean/src/github.com/jeanregisser/MyApp/node_modules/react-native/node_modules/uglify-js/lib/parse.js:684:41)
    at token_error (/Users/jean/src/github.com/jeanregisser/MyApp/node_modules/react-native/node_modules/uglify-js/lib/parse.js:688:9)
    at expect_token (/Users/jean/src/github.com/jeanregisser/MyApp/node_modules/react-native/node_modules/uglify-js/lib/parse.js:701:9)
    at expect (/Users/jean/src/github.com/jeanregisser/MyApp/node_modules/react-native/node_modules/uglify-js/lib/parse.js:704:36)
    at regular_for (/Users/jean/src/github.com/jeanregisser/MyApp/node_modules/react-native/node_modules/uglify-js/lib/parse.js:934:9)
    at for_ (/Users/jean/src/github.com/jeanregisser/MyApp/node_modules/react-native/node_modules/uglify-js/lib/parse.js:930:16)
    at /Users/jean/src/github.com/jeanregisser/MyApp/node_modules/react-native/node_modules/uglify-js/lib/parse.js:812:24
    at /Users/jean/src/github.com/jeanregisser/MyApp/node_modules/react-native/node_modules/uglify-js/lib/parse.js:727:24
    at block_ (/Users/jean/src/github.com/jeanregisser/MyApp/node_modules/react-native/node_modules/uglify-js/lib/parse.js:1007:20)
    at Package.getMinifiedSourceAndMap (/Users/jean/src/github.com/jeanregisser/MyApp/node_modules/react-native/packager/react-packager/src/Packager/Package.js:141:11)
    at Package.getSource (/Users/jean/src/github.com/jeanregisser/MyApp/node_modules/react-native/packager/react-packager/src/Packager/Package.js:97:17)
    at /Users/jean/src/github.com/jeanregisser/MyApp/node_modules/react-native/local-cli/bundle.js:26:37
    at tryCatcher (/Users/jean/src/github.com/jeanregisser/MyApp/node_modules/react-native/node_modules/bluebird/js/main/util.js:24:31)
    at Promise._settlePromiseFromHandler (/Users/jean/src/github.com/jeanregisser/MyApp/node_modules/react-native/node_modules/bluebird/js/main/promise.js:454:31)
    at Promise._settlePromiseAt (/Users/jean/src/github.com/jeanregisser/MyApp/node_modules/react-native/node_modules/bluebird/js/main/promise.js:530:18)
    at Promise._settlePromises (/Users/jean/src/github.com/jeanregisser/MyApp/node_modules/react-native/node_modules/bluebird/js/main/promise.js:646:14)
    at Async._drainQueue (/Users/jean/src/github.com/jeanregisser/MyApp/node_modules/react-native/node_modules/bluebird/js/main/async.js:177:16)
    at Async._drainQueues (/Users/jean/src/github.com/jeanregisser/MyApp/node_modules/react-native/node_modules/bluebird/js/main/async.js:187:10)
    at Immediate.Async.drainQueues [as _onImmediate] (/Users/jean/src/github.com/jeanregisser/MyApp/node_modules/react-native/node_modules/bluebird/js/main/async.js:15:14)
    at processImmediate [as _immediateCallback] (timers.js:358:17)

I tried it on react-native 0.4.4, 0.5.0-rc1 and the latest master.
Works fine with no minification.

[vjeux]

This is an issue with uglify-js. Do you mind reporting it there? https://github.com/mishoo/UglifyJS2 Thanks!

[vjeux]

Oh, actually nevermind I'm wrong. We made the switch to babel but we haven't enabled the for of transform yet. I just updated the es6 docs that were wrong, they indicated that we supported for of:

http://facebook.github.io/react-native/docs/javascript-environment.html#javascript-syntax-transformers

Now that we are on babel, we'll be able to let you configure which transforms you want to enable per project. This way you can enable more features depending on your risk tolerance to spec and implementation changes.

[jeanregisser]

Ok good! I'm closing this then.

[cosmith]

Is there a specific reason for for of not to be supported? Is the implementation not stable?

I added the transformer in the list in https://github.com/facebook/react-native/blob/master/packager/transformer.js#L21 but it's causing issues when bundling the code (and failing silently when encountering a for of loop). Is there a way to configure the transformers somewhere else?

[ide]

for of relies on Symbol.iterator, which is not supported in all React Native environments. To polyfill Symbol.iterator (not just Symbol) requires a runtime lib like babel-runtime. I opened an issue to consider using it, but it's not trivial to use and I ran into a bunch of issues. Maybe you can make more progress than I did.

You're also free to enable "es6.forOf" if you want to compile your own JavaScript engine where you know that you're going to have Symbol.iterator, although at that point you could use a JS engine that supports for of natively.

[cosmith]

Ok, I removed for of from my code since I was not using it that much. Thanks for the precisions!

[appden]

Running into this as well with react-native@0.13.2 and react-native-cli@0.1.7. It seems like this issue should be re-opened. The solution is definitely not to remove all uses of for of loops because the minify step fails.

[vjeux]

Well, that's not only the minify step that fails. JSC doesn't implement for of so your code is not going to work at all on device :)

[appden]

Thanks for reopening @vjeux! I get it, so Babel isn't transforming for of, which is making UglifyJS fail. It's working in the simulator for me since JSC added for of support in iOS 9.

[vjeux]

Beware that if you depend on iOS 9-specific features, people with iOS 6,7,8 will instacrash :)

[appden]

@vjeux I had no idea I was depending on iOS 9 features because I assumed the packager was using babel to transform my ES6 code. 😄

It would make sense to use the es2015 and react presets included with babel (see https://babeljs.io/docs/plugins/) and then add the additional "ES7" features on top of those. The ideal situation would be to support .babelrc files to override those defaults in case I wanted to add additional language features supported by babel, so that I'm more in control of what I can do in my code, but that can be a separate enhancement request.

[ide]

@appden RN currently uses Babel 5 and supports the old .babelrc if you want to enable features. So you could enable forOf loops (but as I mentioned earlier in this thread, we can't pull in the runtime to polyfill it on old OSes).

[jsierles]

This issue appears to have been answered adequately by suggesting enabling of this feature in .babelrc.