search

prashantpalikhe / nuxt-ssr-lit

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

"Hydration value mismatch" during conditional rendering #155

Closed xander-marjoram closed 2 months ago

xander-marjoram commented 3 months ago

Describe the bug When using the contents of an object prop to conditionally render elements, hydration fails due to a mismatch error. A fuller description with a code example is available in this minimal reproduction: https://github.com/xander-marjoram/nuxt-lit-ssr-issue-repro

To Reproduce Steps to reproduce the behavior:

  1. Clone the above repo.
  2. Follow the readme instructions to install and set up.
  3. Build and run the app.
  4. You should see the hydration mismatch error in the browser console (screenshot below).

Expected behavior When SSR is enabled, the prop should have the correct value when rendering on the client. Ideally, there should then be no mismatch, and hydration should succeed without error.

Screenshots 2024-07-22 13_24_32

xander-marjoram commented 3 months ago

In the render function, you can see that I am logging the value of the propObject prop. I made the following observations, which may be of interest:

ssr value in Nuxt config Server Client
true Value logged correctly undefined
false n/a Value logged correctly
prashantpalikhe commented 3 months ago

@xander-marjoram I think this is related to this research I had done on hydration issue for complex object types with Vue.

Read more here

https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/34#issuecomment-1325563509

prashantpalikhe commented 3 months ago

@xander-marjoram Vue has fixed the issue on their end that causes this hydration issue for us.

https://github.com/vuejs/core/issues/7203

Can you please try again with the latest version of Vue

xander-marjoram commented 2 months ago

@prashantpalikhe Sorry for the delayed reply, this did manage to fix our issues! Thanks for letting me know