Hydration mismatch warning in vue >=3.4 (nuxt >=3.9) if an SVG uses `url(#id)`
andreww2012 opened this issue · 5 comments
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.
I encountered the same problem, I roll back the vue version to 3.3.8.
perhaps because of this: vuejs/core#10011