Hydration attribute mismatch on Icons

[rizen]

Describe the bug

While using PrimeVue 3.47.2 with Nuxt 3.10.0 (but this also happens with older versions as well) if you add the sortable attribute to a DataTable Column and then refresh the page to get a server side render of the page, you'll get a hydration mismatch. It appears to have something to do with the sort icon.

It might be that you should be generating IDs using Nuxt 3.10's new useId composable.

Here's the really ugly error message:

[Vue warn]: Hydration attribute mismatch on
"

• rendered on server: clip-path="url(#pv_icon_clip_pv_id_93)"
• expected on client: clip-path="url(#pv_icon_clip_pv_id_1)"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch."
  "
  "
  " at <SortAltIcon"
  "sorted=null"
  "sortOrder=0"
  "class="p-sortable-column-icon""
  " ..."
  ">"
  "
  "
  " at <HeaderCell"
  "key=0"
  "column="
  {__v_isVNode: true, __v_skip: true, type: Object, props: {field: "props.username", header: "Username", sortable: ""}, key: null, …}
  "index=0"
  " ..."
  ">"
  "
  "
  " at <TableHeader"
  "columnGroup=undefined"
  "columns="
  [Object, Object, Object, Object, Object] (5)
  "rowGroupMode=null"
  " ..."
  ">"
  "
  "
  " at <VirtualScroller"
  "ref="virtualScroller""
  "items="
  [Object, Object, Object] (3)
  "columns="
  [Object, Object, Object, Object, Object] (5)
  " ..."
  ">"
  "
  "
  " at <DataTable"
  "value="
  [Object, Object, Object] (3)
  "stripedRows="""
  "onSort=fn"
  ">"
  "
  "
  " at <Index"
  "onVnodeUnmounted=fn"
  "ref=Ref<"
  undefined
  ">"
  ">"
  "
  "
  " at <Anonymous"
  "key="/user/admin""
  "vnode="
  {__v_isVNode: true, __v_skip: true, type: Object, props: Object, key: null, …}
  "route="
  {fullPath: "/user/admin", hash: "", query: {}, name: "user-admin", path: "/user/admin", …}
  " ..."
  ">"
  "
  "
  " at <RouterView"
  "name=undefined"
  "route=undefined"
  ">"
  "
  "
  " at "
  "
  "
  " at <Default"
  "ref=Ref<"
  undefined
  ">"
  ">"
  "
  "
  " at <LayoutLoader"
  "key="default""
  "layoutProps="
  {ref: RefImpl}
  "name="default""
  ">"
  "
  "
  " at <NuxtLayoutProvider"
  "layoutProps="
  {ref: RefImpl}
  "key="default""
  "name="default""
  " ..."
  ">"
  "
  "
  " at "
  "
  "
  " at <App"
  "key=3"
  ">"
  "
  "
  " at "

Reproducer

https://stackblitz.com/edit/primevue-nuxt-issue-template-r2uh4n?file=app.vue

PrimeVue version

3.47.2

Vue version

3.x

Language

ES6

Build / Runtime

Nuxt

Browser(s)

Safari 17

Steps to reproduce the behavior

1. Add sortable to a DataTable Column.
2. Refresh the page so you get a server side render.
3. Look at your console.log

Expected behavior

No error should be generated in the console log. If you either remove sortable or wrap the DataTable in client-only then it works fine.

[rizen]

Note that this happens with other things that display icons also. For example if you:

<Message severity="error" :closable="false">
   message goes here
</Message>

Message causes the same problem when trying to display the icon related to the message severity when you get a server side render of this control. And again wrapping it in <client-only> will fix the error.

[mertsincan]

Hi,

This issue has already been fixed in the next version. Best Regards,