SSR Nuxt 3 customElements.get error

[kevinrodrigues]

Describe the bug

I'm using the nuxt-ssr-lit package in a repo (Nuxt 3) and have followed the implementation guidelines. While using this in SSR mode I seem to get errors. When it is not in SSR mode then it runs and serves a page up fine. I've tried quite a few different things and then decided to build a separate standalone reproduction to see if it was related to our setup or if it was something else. The standalone project also has the same issue. The error message is shown in the screenshot below and there is a also a link to the issue codewise. Would appreciate if anyone with the same issue may have experienced this and has a solution or workaround for this.

To Reproduce Steps to reproduce the behavior:

1. Go to: https://stackblitz.com/edit/github-28mlcy?file=app.vue
2. Run yarn build && yarn preview
3. See error appear (screenshot below)

Expected behavior There should be no error when SSR is enabled inside of the nuxt.config.ts file (line 3).

Screenshots

• Nuxt version: [e.g. 3.10.1]
• Browser [chrome]
• Version [latest]

Additional info

I have noticed if I do not render a web component within the layouts directory (default.vue) and at the pages > index.vue we still get the error but on a second page refresh the component renders (the error duplicates in terminal every time you refresh the page though but the component does render in the browser). Seems related to the plugin but I am unsure why at those levels it errors but removing components at those specific levels on second refresh renders something. Steps below to reproduce it:

1. In app.vue comment out the <NuxtLayout> wrapper (which contains a web component - <pie-link>).
2. Run yarn build && yarn preview
3. Notice that the error returns but on a second page refresh the component renders fine even though I have a web component within the components folder being rendered on another page.
4. When you add back the <NuxtLayout> code and rebuild then refreshing the page on second refresh wont render anything again.

[prashantpalikhe]

@kevinrodrigues Hey there, I can have a look later. But my hunch is that the component is stripped away from the server build. If you can already look in that direction, that would be great.

Make sure your link/button components' code are loaded on the server too.

[prashantpalikhe]

@kevinrodrigues If you add this to the nuxt.config.ts

nitro: {
    moduleSideEffects: ['@justeattakeaway/pie-link', '@justeattakeaway/pie-button'],
  },

Everything works.

Not sure why your imports are being stripped off in the server build though. Maybe the sideEffects configuration in the package.json for your component packages need to be configured differently?

[kevinrodrigues]

@kevinrodrigues If you add this to the nuxt.config.ts

nitro: {
    moduleSideEffects: ['@justeattakeaway/pie-link', '@justeattakeaway/pie-button'],
  },

Everything works.

Not sure why your imports are being stripped off in the server build though. Maybe the sideEffects configuration in the package.json for your component packages need to be configured differently?

Sorry for the delay. I will take a look at this config change today. I'm not sure either why our components could be stripped but ill take a look at our individual components too. Ideally i'd want the component to be configured correctly instead of adding this setting in for all components as I'd have to add each component to the moduleSideEffects array otherwise.

Thanks alot for taking a look at this!

[prashantpalikhe]

@kevinrodrigues No worries. I will leave this open until we get to the bottom of this :) Let me know what you find.

[kevinrodrigues]

@prashantpalikhe So i've had a play around and it works in our mono-repo with the moduleSideEffects setting against nitro within the nuxt app that consumes the components (the config you provided above)

Removing this setting from the defineNuxtConfig breaks it again so I think there is something up with the sideEffects at component level or something else. I have also tried to set the following sideEffects : false at component level (e.g within pie-button) as i'd like to avoid the array of components having to be included in the nitro object as each time we include a new component we'd have to update the nitro setting but this seems to break too. With sideEffects there might be a particular setup we need to make sure nothing is "pruned" so I'll keep looking at this but I saw something about a similar issue and maybe the nitro setting you provided might be the only work around.

https://github.com/nuxt/nuxt/issues/20707

[prashantpalikhe]

Alright, I will close this issue then.