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)
@andfaulkner stop… I didn’t saw your code. Plain objects are not iterable. You can use something like
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
es6-shim
supportSymbol.iterator
only with nativeSymbol
and causes conflicts in your case. Usebabel/polyfill
/core-js
instead ofes6-shim
.