1

I'm encountering difficulties when integrating Lit elements into a Nuxt project, particularly with server-side rendering (SSR). My Lit component renders correctly when the site is rendered client-side (by setting ssr: false in nuxt.config), but I face issues when using the default SSR mode. The error message I receive is: "HTMLElement is not defined." I understand the root cause of this issue and have attempted various solutions, but none have been successful.

I've explored the following resources and methods:

  • The GitHub repository nuxt-ssr-lit, which is a Nuxt3 module designed for server-side rendering and client-side hydration of Lit custom elements.
  • A workaround that involves defining HTMLElement globally: global.HTMLElement = typeof window === 'undefined' ? Object : window.HTMLElement;.

Despite consulting various AI platforms, none of the solutions provided have resolved my issue. I'm hoping a human perspective might offer a different approach or insight.

Thanks in advance!

Sidenote: I don't really care if the Lit component has to built or not prior to using it in a Nuxt project. The component itself does not have to be server side rendered either, as long as can render it in a Nuxt project.

Improve this question
1
  • Lit has node condition exports that should already alleviate that HTMLElement is not defined problem. You might be using components with a production/browser build of Lit bundled in. Commented Mar 11, 2024 at 17:07
Related questions
3
How to SSR Lit Components in Angular template using Angular Universal
1
Nuxt clientside only component
1
Nuxt 3 Hydration text mismatch in ... error when using shift()
Load 3 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.