vue.js - Problem with hydration nuxt app. @nuxtjssvg-sprite - Stack Overflow

I have an issue with fixing nuxtjs hydration mismatch

rendered on server: href="/_nuxt/tabbar.DZ-rw7fi.svg#balance"
expected on client: href=".DZ-rw7fi.svg#balance"

The problem is in the svg-icon component from @nuxtjs/svg-sprite module. It renders relative path on server and absolute path on client

I've tried to add publicPath in

defineNuxtConfig({
  svgSprite: {
    publicPath: '...'
  }
})

But that has changed nothing

I have an issue with fixing nuxtjs hydration mismatch

rendered on server: href="/_nuxt/tabbar.DZ-rw7fi.svg#balance"
expected on client: href="http://stels-and-co-frontend-nuxt3.mt125.mt-pc.ru/_nuxt/tabbar.DZ-rw7fi.svg#balance"

The problem is in the svg-icon component from @nuxtjs/svg-sprite module. It renders relative path on server and absolute path on client

I've tried to add publicPath in

defineNuxtConfig({
  svgSprite: {
    publicPath: '...'
  }
})

But that has changed nothing

• vue.js
• nuxt.js
• hydration
• svg-sprite

Share Improve this question Follow edited Apr 3 at 8:04 kissu 47k1616 gold badges9090 silver badges189189 bronze badges asked Feb 4 at 12:11 ZloiGorohZloiGoroh 46544 silver badges1414 bronze badges 4

• Using <client-only> is not an option – ZloiGoroh Commented Feb 4 at 12:16
• How do you use it tho, it's weird that it does not resolve the same here (which should not be the case). Anyway, you can always use the official svg nuxt module or plenty of other ones if needed some with more support. – kissu Commented Feb 4 at 17:53
• @kissu I've found strange statistics on npm about this library, may that be the cause? – ZloiGoroh Commented Feb 6 at 7:02
• Nothing too weird, project is mostly abandoned. I posted an answer with the link to the official module. – kissu Commented Feb 6 at 8:41

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

After a quick check on the repo of your used module shows us that the last commit was 2 years ago, hence the support might not be as present (this would explain why some bugs are not fixed).

I recommend using the official Nuxt team's module, it might be plenty powerful for your use case.

If for some reason, that one is not enough (should be tho), you can always check the other ones too but they're not officially maintained by the Nuxt team.