[WCJS] Uncaught error in IE11: SCRIPT5045 Assignment to read-only properties is not allowed in strict mode`

[LarsVonQualen]

Hi, so I have to support IE11, i know, not ideal.

When i include the webcomponents-bundle.js file, IE will throw this error SCRIPT5045: Assignment to read-only properties is not allowed in strict mode here: https://github.com/webcomponents/custom-elements/blob/master/src/CustomElementRegistry.js#L267

I'm not sure exactly why, or if this is even an issue, everything seems to actually work, it's just an annoyance, and i guess there's the risk of IE showing an unexpected error popup to the user.

It seems to me that the error should be handled gracefully thus not ending in console output.

Any thoughts? Or maybe even a way to get the error to go away? 😄

[web-padawan]

One case I'm aware of is attempting to assign element.style property in IE11, e.g. the error you've encountered will be thrown when you try to remove style like this:

element.style = '';

[LarsVonQualen]

So this would be triggered if i have some JS that tries to assign anything to the style property of the custom element?

[web-padawan]

Yes, you can still use e.g.element.style.display = 'none' but not reassign the whole property. I'm not sure if that's the case for you, it's just the only one I have encountered so far.

[dfreedm]

Can you provide an reproduction of the error?

[Sijmen]

I've ran into the same issue while developing a custom component with Angular. In the angular docs it says:

In browsers that support Custom Elements natively, the specification requires developers use ES2015 classes to define Custom Elements - developers can opt-in to this by setting the target: "es2015" property in their project's tsconfig.json. As Custom Element and ES2015 support may not be available in all browsers, developers can instead choose to use a polyfill to support older browsers and ES5 code.

So I changed the target in the tsconfig.json from 'es2015' to 'ES5' and the read-only strict error disappeared. For me it was a blocking issue, as it crashed the script and the elements were never loaded.

[sguft]

We ran into this problem as well and the problem seems to be that in custom-elements.min.js we have a combination of "use strict" as well as assignment to window.CustomElementRegistry which is considered a read-only property in strict mode and causes this error in IE11.

This is easily reproducable by trying out the following in the console in IE11:

(function() { 'use strict'; window.CustomElementRegistry = ''; }());

We fixed it on our side by removing "use strict" from custom-elements.min.js, but I don't expect this to be the official way to fix it - however it allowed us to continue until the library has been fixed. I hope my additional info here will help that process.

[icyerasor]

This is easily reproducable by trying out the following in the console in IE11:

(function() { 'use strict'; window.CustomElementRegistry = ''; }());

We fixed it on our side by removing "use strict" from custom-elements.min.js, but I don't expect this to be the official way to fix it - however it allowed us to continue until the library has been fixed. I hope my additional info here will help that process.

can still confirm this behavior / fix. Any update on when this could be fixed to avoid having to use local modifications?

Update: no idea what changed(updated to angular 11 and npm updates), but now i can use

import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements';

without any modifcation to custom-elements.min.js 🤷‍♂️

[wbern]

I can confirm that the fix @sguft mentioned by removing "use strict" fixed it.. We searched all our code for typescript projects that target ES2015 as @Sijmen mentioned but all were targeting es5.

The offending file for us was indeed a .ts file however.

[SmallhillCZ]

I tried updating to Angular 11, but the error is still there, so can't confirm @icyerasor's update from https://github.com/webcomponents/polyfills/issues/115#issuecomment-611644891

I can confirm the error is something around window.CustomElementRegistry=$ (in minified compiled file i.e. https://github.com/webcomponents/custom-elements/blob/c078ea4201c82551462ccace1ae91e22b576beb8/src/CustomElementRegistry.js#L273)

[amelnikoff]

In my case with Angular 10 I had this line first import 'document-register-element'; before import '@webcomponents/custom-elements';

'document-register-element' enabled strict mode. Putting it after 'webcomponents' solves error.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.