Stack Overflow on IE 11

[luke-j]

This line causes a stack overflow in IE 11.

defineProperty(objPrototype, name, d.gs(null, function (value) {
    defineProperty(this, name, d(value));
}));

Adding try, catch stops the problem (and at least allows javascript to continue executing), but obviously prevents the symbol from being named/defined:

defineProperty(objPrototype, name, d.gs(null, function (value) {
    try {
        defineProperty(this, name, d(value));
    } catch (e) {}
}));

I also tried copying the defineProperty() function, to essentially double the available stack size, like so:

  , defineProperty = Object.defineProperty, objPrototype = Object.prototype
  , definePropertyClone = defineProperty

//snip...

defineProperty(objPrototype, name, d.gs(null, function (value) {
    try {
        defineProperty(this, name, d(value));
    } catch (e) {
        definePropertyClone(this, name d(value));
    }

This just crashed IE.

I don't normally develop for IE, so I understand if this problem isn't important. I just thought I'd hear your thoughts.

[medikoo]

@luke-j thanks for reporting, it is a problem, still it's a definite IE bug.

Can you provide a code snippet that exactly reproduces that issue (?) I use es6-symbol on IE11 and all works fine on my side

[luke-j]

Either of these two lines cause the overflow, which I'm doing to iterate of NodeLists:

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

[medikoo]

I reported the IE bug to Microsoft team: https://connect.microsoft.com/IE/feedbackdetail/view/1928508/ie11-broken-getters-on-dom-objects

I've also implemented workaround for that: 54d1436

Published as v3.0.1

[mislav]

I've tried the exact same thing as @luke-j:

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

However, IE11 refused to modify NodeList.prototype and HTMLCollection.prototype this way. After the assignment, NodeList.prototype[Symbol.iterator] would still be undefined.

In the end, the only thing that worked was defining a dynamic getter via defineProperty:

if (!NodeList.prototype[Symbol.iterator]) {
  Object.defineProperty(NodeList.prototype, Symbol.iterator, {
    enumerable: false,
    configurable: true,
    get: function() { return iterator }
  })
}

Just sharing for others that might potentially stumble upon this conversation, trying to make DOM interfaces in IE11 iterable after importing this polyfill.

[mattpilott]

@mislav am i right in thinking that this:

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

is the same as?:

if (!NodeList.prototype[Symbol.iterator]) {
  Object.defineProperty(NodeList.prototype, Symbol.iterator, {
    enumerable: false,
    configurable: true,
    get: function() { return iterator }
  })
}

if (!HTMLCollection.prototype[Symbol.iterator]) {
  Object.defineProperty(HTMLCollection.prototype, Symbol.iterator, {
    enumerable: false,
    configurable: true,
    get: function() { return iterator }
  })
}

Thanks

[mislav]

@matt3224 Functionally, it's the same. Practically, the first approach doesn't work in IE11 because IE11 refuses the accept the simple assignment to NodeList.prototype[Symbol.iterator] = ....

[mattpilott]

Im finding the second also throws an error which is incredibly frustrating

[mislav]

@matt3224 This is working pretty well for us here on GitHub.com https://gist.github.com/mislav/45781f27300c82bd7905815d232862fb