Hydration mismatch warning in vue >=3.4 (nuxt >=3.9) if an SVG uses url(#id)

[andreww2012]

Describe the bug

Hello! I started to get hydration mismatch warnings in Vue 3.4 (Nuxt 3.9) on custom SVGs that have url(#id) expressions.

This is happening because here https://github.com/unplugin/unplugin-icons/blob/68ec8987b75537b79d5fb526d58d81b910d6a77e/src/core/svgId.ts different IDs are generated on client and server.

I'm not totally sure why this is needed, but at least having a way to disable this behavior would be nice. (Or perhaps you can now somehow make use of Nuxt 3.10's useId?)

By the way, I had an idea to patch-package the random ID generation, but was stopped by the fact that the compiled file that includes this code has a random name (chunk-...). I'm wondering why it is so?

Reproduction

https://stackblitz.com/edit/nuxt-starter-hglscy?file=assets%2Ficons%2Flogoo.svg

System Info

Doesn't matter, I believe.

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• nuxt-starter-hglscy (Open reproduction)

[21stc-09]

I encountered the same problem, I roll back the vue version to 3.3.8.

perhaps because of this: vuejs/core#10011

[sardor01]

I'm also having similar issue. @userquin can you help us with this? any suggestions?