babel-loader: for...of loop produces "Uncaught TypeError: myObject[Symbol.iterator] is not a function" error

The transpiler currently seems to be unable to handle for…of loops. Using them causes Uncaught TypeError: myObject[Symbol.iterator] is not a function

For example, the following code:

    var myObject = {
        "key1": "value1",
        "key2": "value2",
        "key3": "value3",
        "fn1": function(){ 
            console.log("fn1 ran!"); 
        },
        "fn2": function(param){
            console.log(param); 
        },
        "number1": 4
    }

    for (let item of myObject){
        console.log(item);
    }

…which gets converted into:

    var myObject = {
        "key1": "value1",
        "key2": "value2",
        "key3": "value3",
        "fn1": function fn1() {
            console.log("fn1 ran!");
        },
        "fn2": function fn2(param) {
            console.log(param);
        },
        "number1": 4
    };

    var _iteratorNormalCompletion = true;
    var _didIteratorError = false;
    var _iteratorError = undefined;

    try {
        for (var _iterator = myObject[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
            var item = _step.value;
            console.log(item);
        }
    } catch (err) {
        _didIteratorError = true;
        _iteratorError = err;
    } finally {
        try {
            if (!_iteratorNormalCompletion && _iterator["return"]) {
                _iterator["return"]();
            }
        } finally {
            if (_didIteratorError) {
                throw _iteratorError;
            }
        }
    }

…produces the following error when run:

 'Uncaught TypeError: someObj[Symbol.iterator] is not a function'
 utilMainModule  @                               app.js:28208
 (anonymous function)  @                   app.js:28316
 _curFld    @                                         app.js:28317
 __webpack_require__   @                   app.js:30
 main    @                                        app.js:523
 navdrawerModule   @                          app.js:26701
 (anonymous function)   @                  app.js:26873
 moduleNm    @                                    app.js:26875
 __webpack_require__    @                  app.js:30
                   [.............(more items)..........]
(anonymous function) @                     app.js:10
webpackUniversalModuleDefinition @ app.js:9
(anonymous function) @                     app.js:53

This occurs in both Chrome and Firefox. I’ve tried it in several different places in my codebase, with the same result every time.

About this issue

  • Original URL
  • State: closed
  • Created 9 years ago
  • Reactions: 7
  • Comments: 16 (6 by maintainers)

Commits related to this issue

Most upvoted comments

@andfaulkner stop… I didn’t saw your code. Plain objects are not iterable. You can use something like

for (let [key, value] of Object.entries(myObject)){
  console.log(key, value);
}

or add custom iterator to your object.

Have you imported the polyfill?

I was having the same problem iterating over FileReader items, finally solved it using Array.from

let files = e.target.files || e.dataTransfer.files;

Array.from(files).forEach(file => {
 // do whatever
})

es6-shim support Symbol.iterator only with native Symbol and causes conflicts in your case. Use babel/polyfill / core-js instead of es6-shim.