nuxt.jshydrationsvg-sprite

Problem with hydration nuxt app. @nuxtjs/svg-sprite

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"

enter image description here

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

Solution

  • 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.