SSR not working with UI5 Webcomponents

[zanfee]

Describe the bug I couldn't get this module to work with UI5 Webcomponents which is based on Lit. Not sure if this is a bug in this module or if this needs to be implemented in UI5 Webcomponents first (see https://github.com/SAP/ui5-webcomponents/issues/6626). When enabling SSR and using a component like ui5-button, I get an Error 500 saying HTMLElement is not defined, just like when this module is not installed at all.

To Reproduce Reproduction: https://stackblitz.com/edit/nuxt-starter-6zyowa?file=nuxt.config.ts SSR is turned on in nuxt.config.ts. Setting it to false will lead to the desired outcome but without SSR.

Expected behavior Nuxt not running into an error when using SSR with UI5 Webcomponents.

• Nuxt version: 3.9.0
• Browser: Edge 121.0.2277.4
• Version: 1.6.9

[prashantpalikhe]

Hey there, thanks for reporting. I will look into it when I have some time.

I do think it's the issue with the library. But worth digging into.

[steveworkman]

Looking at the source code in https://github.com/SAP/ui5-webcomponents/blob/main/packages/main/src/Button.ts#L327-L331

It looks like the component is adding an event handler in the constructor which isn't present in SSR. The authors would need to move that to the connectedCallback method for it to function correctly in SSR. I'd recommend putting this into CSR mode for now and reporting it to SAP