MenuBar : [Vue warn]: Hydration attribute mismatch on primevue: "^3.51.0"

[nirwannursabda]

dependencies:

"primevue": "^3.51.0"
"nuxt-primevue": "^0.3.1"

There is warning in dev console using Prime Menu Bar

[Vue warn]: Hydration attribute mismatch on <li id=​"pv_id_4_0" style class=​"sm:​relative sm:​w-auto w-full static" role=​"menuitem" aria-label=​"Home" aria-level=​"1" aria-setsize=​"5" aria-posinset=​"1" data-pc-section=​"menuitem" data-p-highlight=​"false" data-p-focused=​"false">​…​​

• rendered on server: id="pv_id_4_0"
• expected on client: id="pv_id_1_0"
  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 <MenubarSub ref=fn id="pv_id_1" role="menubar" ... >
  at <Menubar model= (5) [{…}, {…}, {…}, {…}, {…}] >
  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
  at

Works with rollback to version

"primevue": "3.49.1",
"nuxt-primevue": "^0.3.1"

[nisegami]

There's a PR on the primevue repo that is supposed to fix it, but I haven't been able to test it personally primefaces/primevue#5567

[i7slegend]

Yeah, unfortunately it's from MR primefaces/primevue#5486
primefaces/primevue#5567 should revert it for SSR

[atakantepe]

Hi, If the issue continues with the latest version, please re-open the issue. I believe there was a fix from primevue core repo

[nirwannursabda]

thanks @atakantepe
it's solved with "primevue": "^3.52.0"