Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hydration node mismatch: - Client vnode: svg #101

Open
Oluwafemi21 opened this issue Aug 27, 2023 · 6 comments
Open

Hydration node mismatch: - Client vnode: svg #101

Oluwafemi21 opened this issue Aug 27, 2023 · 6 comments

Comments

@Oluwafemi21
Copy link

This issue is caused because rendering on the server side does not render the icon until the client side. Although I temporarily fix this warning using the <ClientOnly> tag

@Sun-ZhenXing
Copy link

I think this is a serious bug, and it doesn't seem to have been a problem before I used Nuxt 3.7.

image

@shynline
Copy link

Same issue for me when I use v-show on an Icon or a component that has Icon somewhere inside it no matter the depth

@Sun-ZhenXing
Copy link

This issue seems to have been fixed. There is no error when using 0.6.1.

{
    "nuxt": "^3.8.0",
    "nuxt-icon": "^0.6.1",
    "vue": "^3.3.7"
}

@gertjanjansen
Copy link

I'm running into the same kind of hydration issues with the latest version:

Screenshot 2023-12-21 at 11 41 36

@tguelcan
Copy link

tguelcan commented Jan 17, 2024

Still on

any workaround or updates?

@Endermanch
Copy link

I recently found a nice read on why server-side rendered websites require a completely different approach when rendering on both server and client side to not cause hydration mismatches. The official source (Iconify website) states that the only true solution to that would be utilization of a Shadow DOM. Read here: https://iconify.design/docs/iconify-icon/#ssr

With that said, nuxt-icon library is currently using @iconify/vue, which is not recommended by the Iconify author. He recommends using iconify-icon instead, which solves the hydration mismatch problem among many others when using SSR. Read here: vuetifyjs/vuetify#7821 (comment)

Nuxt being an SSR-first framework, I believe it deserves the cleanest SSR solution for icons. I have proposed a shift towards iconify-icon here: #139

Still on

any workaround or updates?

Unfortunately, the workaround would be to disable SSR on your project entirely, or render icons on the client side only by using Nuxt-specific <ClientOnly> tag. I don't think disabling icons on the server side impacts SEO, so the latter would be your workaround of choice. My personal workaround was to uninstall the module and write my own wrapping <iconify-icon>. If you want to go the scenic path like me, there's also a tutorial for Nuxt developers: https://iconify.design/docs/iconify-icon/#nuxt. While it's sort of sluggish, it gets the job done and there are no more hydration mismatches.

However, I still do believe the root problem must be solved, and that is to move over to the SSR-friendly solution on an SSR-first framework.

amandesai01 added a commit to profilecity/vidur that referenced this issue Aug 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants