Polymer 2: Maximum call stack size exceeded

Referencing an element with legacy mixins in its own definition causes a hard to debug error

Lately, we suddenly saw many of those errors in the Dev Tools console:

Uncaught RangeError: Maximum call stack size exceeded.
at HTMLElement._stampTemplate (template-stamp.html:417)
at HTMLElement._stampTemplate (property-effects.html:2240)
at HTMLElement.ready (element-mixin.html:651)
at HTMLElement.ready (legacy-element-mixin.html:151)
at HTMLElement.ready (class.html:205)
at HTMLElement._enableProperties (property-accessors.html:494)
at HTMLElement.connectedCallback (element-mixin.html:633)
at HTMLElement.connectedCallback (legacy-element-mixin.html:81)
at HTMLElement._attachDom (element-mixin.html:695)
at HTMLElement._readyClients (element-mixin.html:668)
Uncaught RangeError: Maximum call stack size exceeded.
at HTMLElement.fire (legacy-element-mixin.html:338)
at HTMLElement._fireResize (iron-resizable-behavior.html:142)
at HTMLElement.notifyResize (iron-resizable-behavior.html:92)
at HTMLElement._notifyDescendant (iron-resizable-behavior.html:180)
at HTMLElement._onIronRequestResizeNotifications (iron-resizable-behavior.html:160)
at HTMLElement.handler (template-stamp.html:92)
at HTMLElement.fire (legacy-element-mixin.html:338)
at HTMLElement._requestResizeNotifications (iron-resizable-behavior.html:201)
at HTMLElement.attached (iron-resizable-behavior.html:64)
at HTMLElement.attached (class.html:214)

Debugging the issue proved to be rather hard because there were no reference which element caused the issue.

In the end, the root cause turned out to be a Polymer ES6 class element which used Polymer.mixinBehaviors (to include a Polymer 1 behaviors). By accident we had referenced the element in its own definition:

<dom-module id="my-element">
<template>
<my-element></my-element>
</template>
  <script>

class MyElement extends
Polymer.mixinBehaviors([ MyPolymer1Behavior ],
Polymer.Element) {
static get is() { return 'my-element'; }
}
customElements.define(MyElement.is, MyElement);

</script>
</dom-module>

In hindsight, unbelievable obvious… but well, only in hindsight.

Happy coding!

Want to learn more about Polymer? Have a look to all our Medium posts on Polymer.