Warning: Prop `id` did not match. Server: "headlessui-menu-button-:Rl6t6:" Client: "headlessui-menu-button-:R2krkp:"

[glenncai]

What package within Headless UI are you using?
@headlessui/react

next

What version of that package are you using?

@headlessui/react: v1.7.15

next: v13.4.12

What browser are you using?

Chrome (114.0.5735.199), Microsoft Edge (114.0.1823.82)

Reproduction URL

'use client';

import { Menu } from '@headlessui/react';

export default function Home() {
  return (
    <Menu as="div" className="relative inline-flex">
      <Menu.Button>
        <span className="sr-only">Notifications</span>
        <svg className="h-4 w-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
          <path
            className="fill-current text-slate-500 dark:text-slate-400"
            d="M6.5 0C2.91 0 0 2.462 0 5.5c0 1.075.37 2.074 1 2.922V12l2.699-1.542A7.454 7.454 0 006.5 11c3.59 0 6.5-2.462 6.5-5.5S10.09 0 6.5 0z"
          />
          <path
            className="fill-current text-slate-400 dark:text-slate-500"
            d="M16 9.5c0-.987-.429-1.897-1.147-2.639C14.124 10.348 10.66 13 6.5 13c-.103 0-.202-.018-.305-.021C7.231 13.617 8.556 14 10 14c.449 0 .886-.04 1.307-.11L15 16v-4h-.012C15.627 11.285 16 10.425 16 9.5z"
          />
        </svg>
        <div className="absolute right-0 top-0 h-2.5 w-2.5 rounded-full border-2 border-white bg-rose-500 dark:border-[#182235]"></div>
      </Menu.Button>
    </Menu>
  )
}

Describe your issue

When I use Menu from @headlessui/react, the warning is produced, but this warning does not exist in next v13.4.10.

[Jaynarol]

I have same problem

[elisaado]

Downgrading to v13.4.10 fixed this for me.

[RobinMalfait]

Hey, thank you for this bug report! 🙏

We are just using the built-in useId hook from React. Can you try the following things to make sure that this problem doesn't solve itself:

1. Bump next to the latest version
2. Bump react and react-dom to the latest version (make sure the versions match)
3. Remove the .next folder
4. Remove the node_modules folder
5. npm install (or the equivalent of your package manager)
6. Restart the dev script

If after all these steps the problem persists, can you create a minimal reproduction repo and attach it to this issue?

[elisaado]

Hi, sadly bumping and then purging node_modules and .next does not resolve the issue.
I have managed to reproduce it in a clean environment (brand new app with create-next-app)

You can find the reproduction here.
https://github.com/elisaado/headless-hydration-reproduction

The Menu that is causing the hydration mismatch is in /src/app/page.tsx. Only styles applied are tailwind and of course whatever headless ships, and can be found in /src/app/globals.css.

For the sake of context and further discussion on this issue, here is the page.tsx that is causing the hydration mismatch.

"use client";

import { Menu } from "@headlessui/react";

export default function Home() {
  return (
    <main>
      <Menu>
        <Menu.Button>More</Menu.Button>
        <Menu.Items>
          <Menu.Item>
            <span>Invite a friend (coming soon!)</span>
          </Menu.Item>
        </Menu.Items>
      </Menu>
    </main>
  );
}

Next version on the reproduction repo is 13.4.12 and react and react-dom are 18.2.0.

[RobinMalfait]

Thanks for this @elisaado! Do you mind pushing those changes as well? The repo itself seems to be a single commit without Headless UI installed.

[RobinMalfait]

I can reproduce this without Headless UI in Next.js with the app router.

Opened an issue on the Next.js repo so that we can track the issue over there and hopefully this is solved soon!

Opened the issue here: vercel/next.js#53110

Going to close this issue for now since it is a bug in Next.js and not in Headless UI. Thanks for the reproduction @elisaado!

[elisaado]

Oops, sorry, indeed forgot to push those changes, they are pushed now. Thanks for opening the issue on next :)

Same here using HeadlessUI Radio Group example from website:

"@headlessui/react": "^1.7.16",
 "next": "13.4.12",

[amiryxe]

I have the same problem with Disclosure module.

[mywebjunction]

Dear mate Eli Saado, I'm also facing same issue. Should I downgrade from next v13.4.12 to v13.4.10? Or is there any solution for this error?

Downgrading to v13.4.10 fixed this for me.

Dear mate Eli Saado, I'm also facing same issue. Should I downgrade from next v13.4.12 to v13.4.10? Or is there any solution for this error?

Downgrading to v13.4.10 fixed this for me.

I ended up just ignoring the warning in Chrome console and I'll keep an eye out for headlessui new release and upgrade

[Alshie]

Hey folk - it's not an issue with headless ui - the problem is in nextjs.

It has been fixed in the nextjs canary releases and should go live in the next release from them