Problem in Vue / Nuxt - Hydration Children Mismatch

[bllchmbrs]

What component (if applicable)

• URL for category: Marketing
• Component name: Headers
  Specific Component

Describe the bug

To Reproduce
Steps to reproduce the behavior:

I receive the following warning when opening a page with this navigation component.

chunk-BVQHDTV7.js:1449 [Vue warn]: Hydration children mismatch in <div>: server rendered element contains fewer child nodes than client vdom. 
  at <Portal> 
  at <ForcePortalRoot force=true > 
  at <Dialog as="div" class="lg:hidden" onClose=fn  ... > 
  at <Navigation> 
  at <Default ref=Ref< undefined > > 
  at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot>

On initial page loadWhen clicked it throws the following error:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
    at remove (chunk-BVQHDTV7.js:9137:26)
    at Object.remove (chunk-BVQHDTV7.js:7982:7)
    at unmount (chunk-BVQHDTV7.js:7603:20)
    at unmountComponent (chunk-BVQHDTV7.js:7692:7)
    at unmount (chunk-BVQHDTV7.js:7593:7)
    at unmountChildren (chunk-BVQHDTV7.js:7712:7)
    at unmount (chunk-BVQHDTV7.js:7621:9)
    at unmountComponent (chunk-BVQHDTV7.js:7692:7)
    at unmount (chunk-BVQHDTV7.js:7593:7)
    at unmountComponent (chunk-BVQHDTV7.js:7692:7)

Interestingly, if I comment out this code:

<Dialog as="div" class="lg:hidden" @close="mobileMenuOpen = false" :open="mobileMenuOpen"....
...
</Dialog> 

The main menu works fine (but obviously the mobile menu doesn't).

Expected behavior
I would expect it to not throw any errors.

Screenshots
If applicable, add screenshots to help explain your problem.

Browser/Device (if applicable)

• OS: Mac
• Browser Chrome
• Version 115.0.5790.170

"vue": "^3.3.4"
"nuxt": "^3.6.5",

Additional context

On second thought: On second thought, this might be a problem with the dialog in headlessui. Since if I comment out that code, it works fine.

On third thought: This is a global problem with all header components in tailwindui. I cannot use any of the headers provided by tailwindui because of this. Can you all please prioritize fixing this? it's a pretty critical issue (either here or in headless ui) because it renders these components incomplete. If it is a headless ui bug, please tell me where to post it.

[reinink]

Hey! Thanks for bringing this to our attention. You're correct, this is an issue with the <Dialog> component in Headless UI — it is not SSR compatible. That's because it uses portals. Here is a related issue about this same problem: tailwindlabs/headlessui#1496

The simple workaround here is to wrap your dialog in a <ClientOnly> component:

<ClientOnly>
  <Dialog as="div" class="lg:hidden" @close="mobileMenuOpen = false" :open="mobileMenuOpen">
    <!-- ... -->
  </Dialog>
</ClientOnly>

That said, we are going to have a look and see if there is anything we can do in Headless UI to prevent this SSR warning from happening. I'll report back once I know more 👍

[reinink]

Hey! Just an update here. We made some changes to Headless UI today that should fix this issue without the need for using the <ClientOnly> component. You can find that fix here: tailwindlabs/headlessui#2700

While we haven't done a new release yet, you can install this version already using our insiders channel:

npm install @headlessui/vue@insiders

Again, that should fix things for you, but let us know if not!

[bllchmbrs]

Sweet! Thanks, will test this out today and see how it goes!!!

[alfredlua]

Using @headlessui/vue@insiders fixed the issue for me. Thanks, @reinink!

Thanks @bllchmbrs for bringing this up too. I was stuck on this for quite a while.