ES6 for of loops stopped working after upgrading to 0.16 (clean project)

[DanielHoffmann]

I just upgraded my project from 0.15.0 to 0.16 (I created a new project from scratch and moved over my files) and now my for of loops are giving me this error:

I tested on Android only, I do not own an iOS device. The line in question is:

        let keys = Object.keys(styles);
        for (let key of keys) { //this one

Also by the way Symbol never worked on the previous version either, I actually wanted to use them, babel doesn't support them yet?

[facebook-github-bot]

Hey DanielHoffmann, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If this is a feature request or a bug that you would like to be fixed by the team, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• If you don't know how to do something or not sure whether some behavior is expected or a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• We welcome clear issues and PRs that are ready for in-depth discussion; thank you for your contributions!

[DanielHoffmann]

I tested out babel online REPL and it translates this simple for of

let keys = Object.keys({});
for (let key of keys) {
  console.log(keys);
}

into:

"use strict";

var keys = Object.keys({});
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
  for (var _iterator = keys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
    var key = _step.value;

    console.log(keys);
  }
} catch (err) {
  _didIteratorError = true;
  _iteratorError = err;
} finally {
  try {
    if (!_iteratorNormalCompletion && _iterator["return"]) {
      _iterator["return"]();
    }
  } finally {
    if (_didIteratorError) {
      throw _iteratorError;
    }
  }
}

Which indeed uses the Symbol ES6 feature, which is pretty odd feature for Babel to use, maybe it is a bug in the new version of Babel that react native started using in 0.16? This coupled with the fact that Android Javascript does not support Symbol (tested on Android 5.1) seems to be causing this problem. Either that or the Symbol polyfill is required to actually use for of loops (and somehow got removed from version 0.15 to 0.16).

[ide]

The Babel online REPL isn't a faithful representation of what's happening because the REPL uses Babel 5 while RN 0.16 uses Babel 6, not to mention potentially configuration differences (RN doesn't use babel-runtime).

Maybe you could try loose mode as a shot in the dark to see if for-of compiles to a form without Symbol. Or we could eventually try to polyfill Symbol for old phones (iOS 7 and maybe 8).

Upgrading JSC on Android is almost certainly doable but requires coordination from Facebook's side... @astreet @mkonicek what's your plan for keeping Android JSC up-to-date?

[DanielHoffmann]

I got this answer from the Babel guys:

"The expectation is that you will load babel-polyfill to load a Symbol substitute or that you'd enable loose mode forOf. This behavior hasn't changed between Babel 5 and Babel 6 as far as I'm aware."

It seems that react native is indeed missing the Symbol polyfill.

@ide Hm, I just changed all my fors to forEachs so this bug is not affecting me anymore (just a test project so there is not much code) but how do I tell react native to run Babel in loose mode?

[ide]

You can stick options in here: https://github.com/facebook/react-native/blob/master/packager/react-packager/.babelrc. I'm not familiar with the specifics of loose mode though so it might just be an exercise in futility.

[skevy]

This is almost certainly a lack of a Symbol polyfill in JavaScriptCore. I've personally used the babel-polyfill (http://babeljs.io/docs/usage/polyfill/) to fix it...there are other Symbol polyfills that may be smaller (since babel-polyfill polyfills lots of things). Use at your discretion and let us know if it fixes it!

Closing for now as it's related to a specific use case.