Illegal constructor on Safari

See original GitHub issue

I’m using the polyfill to use built-in web components on Safari, which works fine when using:

<script src="//unpkg.com/@ungap/custom-elements"></script>

However when using it as an imported package, I get the following error at component’s creation (not explicit creation through JS, but implicit through the element in HTML code).

TypeError: Illegal constructor
(anonymous function) — MyComponent.ts:24
MyComponent — MyComponent.ts:24
_handle — index.js:423
notifier — index.js:164
loop — index.js:91
loop — index.js:99
(fonction anonyme) — index.js:110

Component’s code is basically:

class MyComponent extends window.HTMLInputElement {
  constructor() {
    super()
  } 
}

Notes:

  • Env is macOS 12.2.1 with Safari 15.3 (17612.4.9.1.8) ;
  • The polyfill is imported at first statement, using import "@ungap/custom-elements". At runtime it is there and executed, and the component has been property registered (using window.customElements.define("my-input", MyComponent, {extends: "input"})) as the error occurs in the polyfill code ;
  • This issue looks similar to this stackoverflow post which has no answer.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
WebReflectioncommented, Feb 18, 2022

@Javarome for what is worth it as a hint, every single polyfill should always be loaded before anything else … we (polyfils authors) can’t fight the unknown all libraries internals do, so bring the polyfill always before everything else and code happily ever after 🥳

0reactions
Javaromecommented, Feb 18, 2022

Indeed this was an import order issue.

Doing:

import "MyComponent"
import "@ungap/custom-elements"

fails, but doing:

import "@ungap/custom-elements"
import "MyComponent"

works.

Thanks for the hint!

Read more comments on GitHub >

github_iconTop Results From Across the Web

`Uncaught TypeError: Illegal constructor.` when extending ...
So now I am wondering. What HTML elements can I extend? Why can I not extend the span element? There are a couple...
Read more >
TypeError: Illegal constructor in Safari on desktop #55 - GitHub
In Safari on desktop an Illegal constructor error is thrown, which prevents the menu from working: All of your demos seem to be...
Read more >
new CSSStyleSheet causes a TypeError: Illegal constructor
In console, try: var s = new CSSStyleSheet();. causes an exception: "TypeError: Illegal constructor." Why is that? Actual results: "TypeError: Illegal ...
Read more >
Duplicate draw.io diagram tab gives "Illegal Const...
When trying to duplicate wither of the tabs I get a popup stating "Illegal Constructor". The message in the popup is different depending...
Read more >
Safari Technology Preview Release Notes - Apple Developer
Implemented Error#cause (r274552); Optimized Boolean constructor calls in DFG and ... Fixed UTF-8 decoding to produce one replacement character per illegal ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found