Skip to content

Calling super() on HTMLElement will throw illegal constructor exception #812

@MJomaa

Description

@MJomaa

Issue
You cannot extend an HTMLELement and call super() in the constructor.
I get an illegal constructor exception when I use emoji-mart in a NextJS application. First render on the server is fine, but second render on the client (navigate back and forth) will throw an exception.

Code Location
https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart/src/components/HTMLElement/HTMLElement.ts#L15

Reproduction
https://www.typescriptlang.org/play?#code/MYewdgzgLgBA6gSzAExAdwBIBUCyAZAUQBsBTAWxLFgF4AoGGKATwAcSQAzGNJVNGAITVqMAOQBXFCQ5ISyUTABki7r3QA6bPmLlKUegxgB+VSg1bCpClQMMAXDADyAIwBWJYPtrAiAQwgQMBY61lBYJNAwJAAeUJTIgYhmmLiWulQwAN4GoJBQAE7iniD5ABQAlFm2MBDibGXlANwwAPQtMAA8HTAAkkSkAOa+RDC50IXF+QYAvrQGqBUOAG4gCMhVhqPgECCk6kQgA6WiGCT9IPAlRPJNM7Sz3tuwcZEiYCT8wVZ64dAVjbQXlB1AsmkA

const WindowHTMLElement =
  typeof window !== 'undefined' && window.HTMLElement
    ? window.HTMLElement  // should not extend this
    : Object

class HTMLElementTest extends WindowHTMLElement {
  constructor() {
    super(); // Illegal constructor
  }

  do(): void {
    console.log('Hello World');
  }
}

const test = new HTMLElementTest();
test.do();

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions