OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Vaadin 24 with custom js webcomponent giving Uncaught TypeError: Illegal constructor

  • Thread starter Thread starter Mari
  • Start date Start date
M

Mari

Guest
We have a vaadin flow App. We migrated from Vaadin 14 to Vaadin 24, had some issues but managed to figure them out. One thing left is custom webcomponent that another team provides. It is working fine in their project (using webpack 5). It used to work in our project (Vaadin 14) but once we migrated to Vaadin 24 they had to bump versions of npm packages in order for it to work in our Vaadin 24 app.

The setup:

JS webcomponent files:

  1. my-comp.js (no changes in upgrade)

Code:
import { MyComp } from './src/MyComp'
import { MyCompPreview } from './src/MyCompPreview'

window.customElements.define('my-comp', MyComp)
window.customElements.define('my-comp-preview', MyCompPreview)
  1. MyComp: (did not have contstructor earrlier, ive tried to delete but it does not change the outcome)

Code:
export class MyComp extends ScopedElementsMixin(LitElement) { 
  constructor () {
    super() //all of this is called cuz ive debugged it
  }

  static get properties () {
    return {
      place: String,
      dir: String,
      data: Object,
      pars: Object
    }
  }

  async firstUpdated (changedProperties) {
    console.log("first updated")
    this.data = JSON.parse(this.data);
    console.log("place id -> ", this.place);
    console.log("dir -> ", this.dir);
    console.log("data -> ", this.pars);
    super.firstUpdated(changedProperties)
  }
}
  1. MyCompPreview (no changes in upgrade)

Code:
export class MyCompPreview extends MyComp {
  static get properties () {
    return {
      ...super.properties,
      factory: Function
    }
  }

  firstUpdated () {
    console.log("preview first updated")
    super.firstUpdated()
  }
}

And the java file that we use to integrate it with vaadin:

Code:
@Tag("my-comp-preview")
@JsModule("./src/comps/my-comp.js")
public class MyComp extends Component implements HasSize, HasStyle {

    public MyComp(String place, String json) {
        setProps(place, json);
    }

    public void setProps(String place, String json) {
        setData(json);
        setPlace(place);
        setDir(place);
    }

    public void setPlace(String place) {
        this.getElement().setProperty("place", place);
    }

    public void setData(String jsonData) {
        this.getElement().setProperty("data", jsonData);
    }

    public void setDir(String dir) {
        this.getElement().setProperty("dir", dir);
    }

}

The error im getting when trying to instatiate and view the component:

Code:
generated-flow-imports-rV4Ldkr4.js:833 Uncaught TypeError: Illegal constructor
    at MyCompPreview.attachShadow (generated-flow-imports-rV4Ldkr4.js:833:25)
    at MyCompPreview.createRenderRoot (generated-flow-imports-rV4Ldkr4.js:858:31)
    at MyCompPreview.connectedCallback (indexhtml-BXsH_avb.js:7202:30)
    at MyCompPreview.connectedCallback (indexhtml-BXsH_avb.js:7655:11)
    at hw (FlowClient-DK6yuSTc.js:6304:20)
    at Cw (FlowClient-DK6yuSTc.js:5567:25)
    at Zx.$x [as eb] (FlowClient-DK6yuSTc.js:9072:7)
    at vB (FlowClient-DK6yuSTc.js:5538:15)
    at ur (FlowClient-DK6yuSTc.js:7417:9)
    at Jr.Kr [as C] (FlowClient-DK6yuSTc.js:8602:7)
    at Ok (FlowClient-DK6yuSTc.js:3662:15)
    at Tk.Vk [as db] (FlowClient-DK6yuSTc.js:8078:7)
    at Ln.Mn [as I] (FlowClient-DK6yuSTc.js:8315:14)
    at FlowClient-DK6yuSTc.js:5352:14

the attachShadow method listed in the stacktrace:

Code:
attachShadow(options) {
  const { scopedElements } = (
    /** @type {typeof ScopedElementsHost} */
    this.constructor
  );
  const shouldCreateRegistry = !this.registry || // @ts-ignore
  this.registry === this.constructor.__registry && !Object.prototype.hasOwnProperty.call(this.constructor, "__registry");
  if (shouldCreateRegistry) {
    this.registry = new CustomElementRegistry(); /// ERROR is thrown here, this.registry is undefined
    for (const [tagName, klass] of Object.entries(scopedElements ?? {})) {
      this.registry.define(tagName, klass);
    }
  }
  return super.attachShadow({
    ...options,
    // The polyfill currently expects the registry to be passed as `customElements`
    customElements: this.registry,
    // But the proposal has moved forward, and renamed it to `registry`
    // For backwards compatibility, we pass it as both
    registry: this.registry
  });
}

The component is used to display different layouts based on json data and place/dir properties. We have other webcomponents integrated like this but never met this behaviour. To make sure that this is not the issue with our project ive downloaded the vaadin-start-app and just copied all the needed files and sadly the problem persists.

I've read vaadin docs as well as open-wc docs and there is not much about it. There is no sign of calling 'new MyCompPreview" anywhere in the code, both components (MyComp and MyCompPreview) are defined as customElemeents and all of it used to work in Vaadin 14. I have also tried to work it out with the developer of js component but he has no clue what vaadin does under the hood and it seems really hard to debug.

What am i missing here? Did anyone meet that problem with Vaadin + webcomponents? Can anyone point me in the right direction?

<p>We have a vaadin flow App. We migrated from Vaadin 14 to Vaadin 24, had some issues but managed to figure them out. One thing left is custom webcomponent that another team provides. It is working fine in their project (using webpack 5). It used to work in our project (Vaadin 14) but once we migrated to Vaadin 24 they had to bump versions of npm packages in order for it to work in our Vaadin 24 app.</p>
<p>The setup:</p>
<p>JS webcomponent files:</p>
<ol>
<li>my-comp.js (no changes in upgrade)</li>
</ol>
<pre><code>import { MyComp } from './src/MyComp'
import { MyCompPreview } from './src/MyCompPreview'

window.customElements.define('my-comp', MyComp)
window.customElements.define('my-comp-preview', MyCompPreview)
</code></pre>
<ol start="2">
<li>MyComp: (did not have contstructor earrlier, ive tried to delete but it does not change the outcome)</li>
</ol>
<pre><code>export class MyComp extends ScopedElementsMixin(LitElement) {
constructor () {
super() //all of this is called cuz ive debugged it
}

static get properties () {
return {
place: String,
dir: String,
data: Object,
pars: Object
}
}

async firstUpdated (changedProperties) {
console.log("first updated")
this.data = JSON.parse(this.data);
console.log("place id -> ", this.place);
console.log("dir -> ", this.dir);
console.log("data -> ", this.pars);
super.firstUpdated(changedProperties)
}
}
</code></pre>
<ol start="3">
<li>MyCompPreview (no changes in upgrade)</li>
</ol>
<pre><code>export class MyCompPreview extends MyComp {
static get properties () {
return {
...super.properties,
factory: Function
}
}

firstUpdated () {
console.log("preview first updated")
super.firstUpdated()
}
}
</code></pre>
<p>And the java file that we use to integrate it with vaadin:</p>
<pre><code>@Tag("my-comp-preview")
@JsModule("./src/comps/my-comp.js")
public class MyComp extends Component implements HasSize, HasStyle {

public MyComp(String place, String json) {
setProps(place, json);
}

public void setProps(String place, String json) {
setData(json);
setPlace(place);
setDir(place);
}

public void setPlace(String place) {
this.getElement().setProperty("place", place);
}

public void setData(String jsonData) {
this.getElement().setProperty("data", jsonData);
}

public void setDir(String dir) {
this.getElement().setProperty("dir", dir);
}

}
</code></pre>
<p>The error im getting when trying to instatiate and view the component:</p>
<pre><code>generated-flow-imports-rV4Ldkr4.js:833 Uncaught TypeError: Illegal constructor
at MyCompPreview.attachShadow (generated-flow-imports-rV4Ldkr4.js:833:25)
at MyCompPreview.createRenderRoot (generated-flow-imports-rV4Ldkr4.js:858:31)
at MyCompPreview.connectedCallback (indexhtml-BXsH_avb.js:7202:30)
at MyCompPreview.connectedCallback (indexhtml-BXsH_avb.js:7655:11)
at hw (FlowClient-DK6yuSTc.js:6304:20)
at Cw (FlowClient-DK6yuSTc.js:5567:25)
at Zx.$x [as eb] (FlowClient-DK6yuSTc.js:9072:7)
at vB (FlowClient-DK6yuSTc.js:5538:15)
at ur (FlowClient-DK6yuSTc.js:7417:9)
at Jr.Kr [as C] (FlowClient-DK6yuSTc.js:8602:7)
at Ok (FlowClient-DK6yuSTc.js:3662:15)
at Tk.Vk [as db] (FlowClient-DK6yuSTc.js:8078:7)
at Ln.Mn [as I] (FlowClient-DK6yuSTc.js:8315:14)
at FlowClient-DK6yuSTc.js:5352:14
</code></pre>
<p>the attachShadow method listed in the stacktrace:</p>
<pre><code>attachShadow(options) {
const { scopedElements } = (
/** @type {typeof ScopedElementsHost} */
this.constructor
);
const shouldCreateRegistry = !this.registry || // @ts-ignore
this.registry === this.constructor.__registry && !Object.prototype.hasOwnProperty.call(this.constructor, "__registry");
if (shouldCreateRegistry) {
this.registry = new CustomElementRegistry(); /// ERROR is thrown here, this.registry is undefined
for (const [tagName, klass] of Object.entries(scopedElements ?? {})) {
this.registry.define(tagName, klass);
}
}
return super.attachShadow({
...options,
// The polyfill currently expects the registry to be passed as `customElements`
customElements: this.registry,
// But the proposal has moved forward, and renamed it to `registry`
// For backwards compatibility, we pass it as both
registry: this.registry
});
}
</code></pre>
<p>The component is used to display different layouts based on json data and place/dir properties.
We have other webcomponents integrated like this but never met this behaviour. To make sure that this is not the issue with our project ive downloaded the vaadin-start-app and just copied all the needed files and sadly the problem persists.</p>
<p>I've read vaadin docs as well as open-wc docs and there is not much about it. There is no sign of calling 'new MyCompPreview" anywhere in the code, both components (MyComp and MyCompPreview) are defined as customElemeents and all of it used to work in Vaadin 14.
I have also tried to work it out with the developer of js component but he has no clue what vaadin does under the hood and it seems really hard to debug.</p>
<p>What am i missing here? Did anyone meet that problem with Vaadin + webcomponents? Can anyone point me in the right direction?</p>
 

Latest posts

Top