search

prashantpalikhe / nuxt-ssr-lit

SSR support for Lit elements in Nuxt3
Other
47 stars 7 forks source link

Hydration node mismatch / Multiple versions of Lit warnings #73

Closed fernandofranca closed 1 year ago

fernandofranca commented 1 year ago

I set up a small sample project using Nuxt@3.0.0 nuxt-ssr-lit@1.5.1-beta.2.

In the project I added a simple Lit component and a Nuxt page using that component.

When I start the Nuxt in development mode I get two warnings:

Multiple versions of Lit loaded. Loading multiple versions is not recommended. See https://lit.dev/msg/multiple-versions for more information.

[Vue warn]: Hydration node mismatch:

  • Client vnode: div
  • Server rendered DOM: ​…​​
    at at at

I'm not sure why it is reporting multiple versions of Lit, as when I run yarn why lit I only see one version of Lit being used.

$ yarn why lit
├─ @lit-labs/ssr-client@npm:1.1.1
│  └─ lit@npm:2.7.3 (via npm:^2.0.0)
│
├─ @lit-labs/ssr@npm:3.1.2
│  └─ lit@npm:2.7.3 (via npm:^2.7.0)
│
└─ nuxt-app@workspace:.
   └─ lit@npm:2.7.3 (via npm:2.7.3)

If I remove the Lit elements from the template, the "Hydration node mismatch warning" goes away. When I remove the import for the custom component, the "Multiple versions of Lit" warning also goes away.

To Reproduce Steps to reproduce the behavior:

  1. Clone the reproduction repo: https://github.com/fernandofranca/nuxt-3-lit-ssr
  2. Install with yarn
  3. Start the dev server with yarn dev
  4. Open the browser console to find the warning messages

Expected behavior No warning messages.

Additional context Add any other context about the problem here.

steveworkman commented 1 year ago

The hydration mis-match issue is the same as #34 - and we're awaiting approval for a patch to vue/runtime-core to get that fixed.

Lit version mis-match can also be for slightly different versions of @lit/reative-element - can you double-check that?

prashantpalikhe commented 1 year ago

Hi @fernandofranca

It seems that a prelease version was being installed. I have made v1.5.1 available which should remove the Hydration mismatch issue.

Can you try uninstalling and installing the module again?

Regarding the multiple version of Lit, on dev mode, if you inspect litHtmlVersions in the browser console, you will see

image

This causes the multiple Lit version issue. But this is stripped off in the production build.

We can look into it why exactly this occurs in dev mode. But I have not done that yet since it is harmless and is not ending up in the prod. build.

fernandofranca commented 1 year ago

Thanks for the fast response @prashantpalikhe 🙇‍♂️!

I can confirm version 1.5.1 solves the "Hydration node mismatch" warning 🎉.

Regarding the "Multiple versions of Lit" warning it is still there, hopefully is not a big deal.

litHtmlVersions was showing two different versions ['2.7.2', '2.7.3']. I set yarn resolution to load only 2.7.3, but it still warns and now shows that same version twice, as in your screenshot.

@steveworkman Regarding @lit/reactive-element, I have a single version installed: 1.6.1.

prashantpalikhe commented 1 year ago

@fernandofranca Yeah, in prod mode, confirm that you only have one version being loaded. Should be good.

If you confirm that, I can go ahead and close this issue :)