IE11 SCRIPT28 Out of stack space in symbol.js, Stack overflow at line: 55

[18steps]

Browser: Internet Explorer 11 Libary version: both version 2.0.0 or version 2.0.2

We load webcomponents-loader.js, which in turn loads webcomponents-sd-ce-pf.js (twice, actually). For IE we do not load custom-elements-es5-adapter.js.

This happens to be a Create React App with web components script, but this error in the polyfill seems independent of that.

A similar issue seems to have occurred with Angular in https://github.com/webcomponents/webcomponentsjs/issues/942, which v2.0.2 possibly fixed (https://github.com/webcomponents/webcomponentsjs/issues/942#issuecomment-398718404).

Error shown in console:

SCRIPT28: Out of stack space
symbol.js (50,9)
SCRIPT2343: Stack overflow at line: 55

The React error screen shows Error: Out of stack space and that this error has occurred countless times:

Symbol(hasInstance).set
../../../es-symbol/sdist/symbol.js:50:8
  47 | defProp(Object.prototype, tag, {
  48 |   get: undefined,
  49 |   set: function (value) {
> 50 |     defProp(this, tag, defValue(value, { c: true, w: true }));
  51 |   },^
  52 |   configurable: true,
  53 |   enumerable: false

[18steps]

Loading https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.min.js before webcomponents-loader.js solved the issue.

[peterchappell]

I have similar issues with IE11.

• Using webcomponents-loader gives me the error "Unable to get property 'src' of undefined or null reference"
• Using webcomponents-bundle gives me the "out of stack space" error unless I add the core.js library as above.

[peterchappell]

It turns out my issue was due to trying to use webcomponentsjs with webpack - everything works okay if I'm referencing the files directly (requiring me to copy them to a public folder in my case). I wonder if it's worth leaving a note in the readme to the effect of "Don't compile these files with webpack etc".

Sorry for the interruption to the OP.

[dfreedm]

Deduping to #972 for the great in depth analysis by @morewry

[fclmman]

Loading https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.min.js before webcomponents-loader.js solved the issue.

@18steps How did load core-polyfills before the webcomponents loader. Could you please show a working exaple on using webcompoonents in angular7 cross-browser way. I spent a couple of days, but still could not get it work