Alokai•9mo ago

SF components Hydration node mismatch: expected on client: Symbol(v-cmt)

I’m using the <Footer /> block exactly as shown in the official Storefront UI documentation.
When running the app using Nuxt 3 with SSR enabled in development mode (via npm run dev inside a Docker container), I’m encountering the following hydration warning at runtime:

[Vue warn]: Hydration node mismatch:
- rendered on server: a.inline-flex.items-center.justify-center.font-medium.text-base.focus-visible:outline.focus-visible:outline-offset.rounded-md.disabled:text-disabled-500.disabled:bg-disabled-300.disabled:shadow-none.disabled:ring-0.disabled:cursor-not-allowed.p-2.gap-2.text-primary-700.hover:bg-primary-100.hover:text-primary-800.active:bg-primary-200.active:text-primary-900.disabled:bg-transparent.text-white.active:text-white.hover:text-white.hover:!bg-neutral-500.active:!bg-transparent  
- expected on client: Symbol(v-cmt) 
  at <SfButton key="Twitter" tag="a" square=""  ... > 
  at <Footer >

[Vue warn]: Hydration node mismatch:
- rendered on server: a.inline-flex.items-center.justify-center.font-medium.text-base.focus-visible:outline.focus-visible:outline-offset.rounded-md.disabled:text-disabled-500.disabled:bg-disabled-300.disabled:shadow-none.disabled:ring-0.disabled:cursor-not-allowed.p-2.gap-2.text-primary-700.hover:bg-primary-100.hover:text-primary-800.active:bg-primary-200.active:text-primary-900.disabled:bg-transparent.text-white.active:text-white.hover:text-white.hover:!bg-neutral-500.active:!bg-transparent  
- expected on client: Symbol(v-cmt) 
  at <SfButton key="Twitter" tag="a" square=""  ... > 
  at <Footer >

I also previously saw:

[Vue warn]: resolveComponent can only be used in render() or setup().

[Vue warn]: resolveComponent can only be used in render() or setup().

Important: These hydration mismatches happen at runtime, i — if I refresh the page, they’re gone. I’ve seen similar issues with other components like SfLink, SfListItem...

Are these components expected to work reliably with Nuxt 3 SSR, or are there specific usage patterns to avoid to prevent mismatches?

SF components Hydration node mismatch: expected on client: Symbol(v-cmt)

[Vue warn]: Hydration node mismatch:
- rendered on server: a.inline-flex.items-center.justify-center.font-medium.text-base.focus-visible:outline.focus-visible:outline-offset.rounded-md.disabled:text-disabled-500.disabled:bg-disabled-300.disabled:shadow-none.disabled:ring-0.disabled:cursor-not-allowed.p-2.gap-2.text-primary-700.hover:bg-primary-100.hover:text-primary-800.active:bg-primary-200.active:text-primary-900.disabled:bg-transparent.text-white.active:text-white.hover:text-white.hover:!bg-neutral-500.active:!bg-transparent  
- expected on client: Symbol(v-cmt) 
  at <SfButton key="Twitter" tag="a" square=""  ... > 
  at <Footer >

[Vue warn]: Hydration node mismatch:
- rendered on server: a.inline-flex.items-center.justify-center.font-medium.text-base.focus-visible:outline.focus-visible:outline-offset.rounded-md.disabled:text-disabled-500.disabled:bg-disabled-300.disabled:shadow-none.disabled:ring-0.disabled:cursor-not-allowed.p-2.gap-2.text-primary-700.hover:bg-primary-100.hover:text-primary-800.active:bg-primary-200.active:text-primary-900.disabled:bg-transparent.text-white.active:text-white.hover:text-white.hover:!bg-neutral-500.active:!bg-transparent  
- expected on client: Symbol(v-cmt) 
  at <SfButton key="Twitter" tag="a" square=""  ... > 
  at <Footer >

I also previously saw:

[Vue warn]: resolveComponent can only be used in render() or setup().

[Vue warn]: resolveComponent can only be used in render() or setup().

SF components Hydration node mismatch: expected on client: Symbol(v-cmt)

Similar Threads

SF components Hydration node mismatch: expected on client: Symbol(v-cmt)

Similar Threads

Similar Threads

Similar Threads