-
Notifications
You must be signed in to change notification settings - Fork 490
webcomponents-loader usage causes IE11 SCRIPT28 Out of stack space #972
Comments
Although it's not a viable approach for my purposes, I tried loading The result was interesting. My reading of this is that Although I didn't think this was really the issue, I went back to synchronously loading and tried loading just a <script src="//cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.min.js"></script>
<script src="./@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> Again, this is |
<script src="//cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="./@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> This also prevents the error, which may be useful to someone. To narrow it down, though, I created a polyfills file so I could build and test combinations of different specific polyfills.jsimport 'core-js/fn/symbol'; app index.html<head>
<script type="text/javascript" src="polyfills.js"></script>
<script src="./@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
</head> This also resolves the IE 11 error. I'd love to understand why the What appears to be fixing the problem here is that a Remember, I'm not trying to bundle So, from my perspective at the moment, it appears that this package is using a broken |
I've looked a little bit more into the In comparison, Just a thought, since I'm not 100% sure this is the issue, but it certainly looks that way to me right now. |
I am encountering the same issue testing on IE11 a Polymer 3 PWA built for differential serving with Polymer bundler . |
@morewry Thanks for the very thorough investigation and sorry for running into this complicated issue.
This appears to be WIP by @bedeoverend at polyfillpolyfill/polyfill-service#1376
I am curious as well, as our IE11 are passing just fine. I wonder what the difference in configuration is. If you are able to figure it out, do you mind filing a PR on this repo with a regression test? That would be greatly appreciated to make sure we do not regress in the future. That said, I would be open to switching to a different Symbol polyfill, if these are fixing the real-world issues and we do not regress for current users. For that, we need 1. regression tests for the current issues 2. pick a good polyfill ( If you do not have time for all 3 action points, please work on action point 1 and I can work from there. Once again thanks for your efforts thus far and hopefully we can address this in the near future! |
I am most likely in a place of diminishing returns. I know that replacing the In terms of what I'm doing now, I'm exploring some possibilities inspired by https://github.com/webcomponents/webcomponentsjs/issues/891, because it seemed promising from my perspective. Unfortunately, I was shortly stymied in my reverse engineering. I can't quite tell why the
I've gotten as far as creating my own entrypoint for the polyfills I know I need. // for CustomEvent; also includes Object.assign and Array.from (unnecessarily for me)
import '@webcomponents/webcomponents-platform/webcomponents-platform.js';
import '@webcomponents/shadydom/src/shadydom.js';
import '@webcomponents/custom-elements/src/custom-elements.js'; According to
Some of these are handled in ways the plugin doesn't deal with (e.g. Does this look right? It seems like a reasonable list of things that might be used in these polyfills, but I rely a great deal on documentation to help me understand third party implementations.
|
I sort of left out an important point, which was to ask, given the things included in import '@webcomponents/webcomponents-platform/webcomponents-platform.js';
import '@webcomponents/template/template.js';
import '@webcomponents/webcomponentsjs/src/promise.js';
// what's this for? import '@webcomponents/webcomponentsjs/src/symbol.js';
// what's this for? import '@webcomponents/webcomponentsjs/src/flag-parser.js';
import '@webcomponents/shadydom/src/shadydom.js';
import '@webcomponents/custom-elements/src/custom-elements.js';
import '@webcomponents/shadycss/entrypoints/scoping-shim.js';
// what's this for? import '@webcomponents/url/url.js';
// what's this for? import '@webcomponents/webcomponentsjs/src/baseuri.js';
// what's this for? import '@webcomponents/webcomponentsjs/src/unresolved.js'; What are the commented out items needed for? |
And would it be possible to get a file in the distribution of @webcomponents/webcomponents-platform that doesn't pre-bundle |
And one last question, the additional code with events / flushing that's in import '@webcomponents/webcomponents-platform/webcomponents-platform.js';
import '@webcomponents/shadydom/src/shadydom.js';
import '@webcomponents/custom-elements/src/custom-elements.js'; I figured I was going to have a few more steps before I got to a working state. |
A summary, in case these last few posts were unclear: While I'd like to help, I don't yet feel capable of writing unit tests around the I don't understand why a number of things are in the bundle. I'd like to know purpose of all of these:
In addition,
|
First of all, this is not the case that this issue only happens to you. It happens to all of my colleagues around working with web components. The only fix that sort of worked for us is including the full Since 2.x was released it became less stable. First of all, now it works only with the loader file I see there is a fix from @azakus regarding timing issues #982 (comment) Hopefully this will make the polyfill more stable and allow to include only the necessary polyfills. |
But I still feel like the webcomponents polyfill can be improved a lot. I don't understand why would anyone include any polyfills into another polyfill. In a perfect world you should not rely on the feature which requires polyfill if you are writing another polyfill. Next, if you do want to use such a feature, just require it as a prerequisite for using your polyfill. Most app developers will include all necessary polyfills anyway, because much 3rd party code is using modern features and the code must work in IE11. So this is not a big deal to configure some extra polyfills specifically for webcomponents polyfill. I can imagine that you wanted to simplify the usage of Web Components for new comers and make the code work with just one simple script tag I debugged the loader behavior if all the necessary polyfills are present at the time the loader is executed. And in IE11 it still loads the bundle with polyfills injected So I'm even more confused now about what is expected behavior of the loader and if there are any tests checking for the correct behavior. |
FYI #982 (& |
Closing this per above comment. We are discussing the decision of external polyfill inclusion in #1007 |
Thanks, all! |
@TimvdLippe as of 2.1.3 I'm still having the same issue. It seems that #982 fixed it, then probably #1005 broke it again (not sure) |
@JeanRemiDelteil I think at this point it is better to use #1007 then. |
@TimvdLippe Maybe, however, even with a "barren" bundle, (which would be good to provide), the other bundles including the Symbol polyfill would still be broken. It's pretty sad to have a regression on a patch version. |
@JeanRemiDelteil We ran into the regression as well in our Polymer tests and this issue is on our radar. We are discussing potential solutions later this week and hope to have a working strategy next week. |
i'm also getting out of stack space in es5 build of my webcomponent, only in pages with large DOM, my polyfills.ts is different: import 'core-js/es6/object'; for simple short pages its working fine in IE11 and Edge. |
@liorwohl for now you should stick to previous working version: |
but im using this: |
For anyone running into this issue, we've created a language polyfills free webcomponent polyfills loader based on dynamic imports: https://open-wc.org/building/polyfills-loader.html |
We had the same problem. In our case it worked once after deleting the cache. For us it worked to change the server cache settings. |
We're facing the same issue here. I'm not sure whether it is a webcomponentsjs issue or a Babel issue, so I filed the bug at Babel first: aurelia/cli#843 (comment) |
@TimvdLippe Any news ? Since this issue is closed it may have disappear from the radars, but new functionalities keep getting added ('prepareAdoptedCssText' for ex.) but it's broken on IE11. I'm pretty reluctant to drop full support of IE11, I have a minimum working state to maintain for accessibility. At least update the readMe to remove compatibility with IE11 ! |
The polyfill works with IE11, however if you use a certain combination of polyfills together with this polyfill, it could break. Per our investigation, this is not so much of an issue of our polyfill per-se. However, we are shipping additional non-webcomponents polyfills currently that could potentially become problematic. For that improvement, please see #1007. Note that you can already use the regular bundles as-is. You will only run into potential issues if you use the loader. If you are running into issues with the loader, I encourage you to check out https://open-wc.org/building/polyfills-loader.html |
I'm checking https://open-wc.org/building/polyfills-loader.html |
I just want to send these guys flowers |
I am having a complicated-for-me issue with my Web Components and
webcomponents-loader
in@webcomponents/webcomponentsjs@2.0.2
. This issue has been encountered by others before, but the information in the issues has not been sufficient for me to track down the root cause or fix it.I work on a shared library consumed by multiple applications, so I have Web Components published as npm modules. The component I'm debugging is (currently) built with Rollup using Babel@6. It is configured to use
babel-plugin-transform-custom-element-classes
andbabel-plugin-transform-runtime
viababel-preset-env
withbabel-runtime
as a dependency.Ultimately, these are the ones that are identified as needed in runtime for the Web Component:
babel-runtime/core-js/object/set-prototype-of
babel-runtime/core-js/reflect/construct
babel-runtime/core-js/object/get-prototype-of
babel-runtime/helpers/classCallCheck
babel-runtime/helpers/createClass
babel-runtime/helpers/possibleConstructorReturn
babel-runtime/helpers/inherits
babel-runtime/core-js/json/stringify
babel-runtime/core-js/object/freeze
babel-runtime/core-js/object/values
babel-runtime/core-js/object/keys
babel-runtime/core-js/object/assign
babel-runtime/helpers/defineProperty
babel-runtime/core-js/weak-map
babel-runtime/helpers/slicedToArray
babel-runtime/core-js/object/entries
babel-runtime/helpers/get
Next, the Web Component is used in an application. The application I'm debugging is an Angular 1.x application (however, I don't think it being Angular is particularly relevant to the issue). The application is built with Webpack using Babel@6 with
babel-preset-env
.At that point, we still need Web Component polyfills, for which we are attempting to use the
webcomponents-loader
in@webcomponents/webcomponentsjs@2.0.2
. My recommendation to my users is including the Web Component polyfills via a script tag in thehead
.The bundled application is included via a script tag in the
body
. This includes the Web Component, the polyfills listed above viababel-runtime
, and the application's code.In IE 11, I get a stack overflow error:
SCRIPT28: Out of stack space
inFile: webcomponents-sd-ce-pf.js, Line: 55, Column: 813
. This corresponds to the line that readsdefProp(this, tag, defValue(value, { c: true, w: true }));
.I have read some of the other issues about this error from this and other projects, including #942 and #968. Like #968, if I load all of
core-js
beforewebcomponents-loader
, the error goes away.However, I don't view this as a fix and need to isolate the root problem further.
As a library author, I don't have day-to-day oversight of the application builds. It's in no one's best interest for me to ask for a bunch of special configuration and knowledge about "chunking"or "load order" from each application team. Luckily, as an internal library author, I know our support needs, so my goal is to get this to a place where it more-or-less works like your typical third party npm dependency with a typical Webpack configuration.
We're on track for that with the current "runtime" setup, except for Web Component polyfills and this error. Web Component polyfills can remain an un-bundled exception that has to be loaded independently--but not if it means I have to reinvent the way we're doing everything else due Web Component polyfills needing other polyfills that can't work in tandem with our application bundles and the polyfills inside it. Or whatever the issue is.
On which note... It was hard to tell, but it seemed like #942 identified the issue as being conflicting polyfills for
Promise
, but that doesn't seem likely in this scenario. As you can verify in the runtime list above, I am not directly usingPromise
in the Web Component and the app is using Angular 1.x's$q
instead of native promises, so noPromise
polyfill except the one inwebcomponents-loader
should be loaded (and that's the case, so far as I can tell in the final Webpackvomitbundle). But there was also some stuff about Google Closure in there... I couldn't really tell what the problem and solution were from reading it.Some additional issues:
jods4/aurelia-webpack-build#33aurelia/cli#843
aurelia/skeleton-navigation#821
angular/zone.js#316
zloirock/core-js#143
zloirock/core-js#96
preactjs/preact#453
SharePoint/sp-dev-docs#888
I keep coming back to the idea that we should externalize and conditionally load all of our polyfills, possibly via https://polyfill.io, but since none of the Web Component polyfills are on already on there, that option has been more than I've had time to take on. Especially in terms of limiting the potential polyfills to only things that are used...which would be nice.
The text was updated successfully, but these errors were encountered: