Why would the <Modal> component cause a hydration error in Next 15?

[jordanthornquest]

Hello folks,

I'm attempting to use the <Modal> component from react-aria-components in Next 15.5.2 using the App Router. I have a component with this structure:

"use client";

import { Button, DialogTrigger } from "react-aria-components";
import { Dialog } from "./Dialog";
import { Modal } from "./Modal";

export function MobileNavbar() {
  return (
    <nav className="flex grow items-center justify-between md:hidden">
      <DialogTrigger>
        <Button
          className="flex items-center text-button-100"
          name="Open navigation menu"
        >
          Menu
        </Button>
        <Modal isDismissable>
          <Dialog className="flex flex-col gap-large">
            {({ close }) => (
              <header className="flex items-center gap-base">
                <h2 className="font-heavy text-paragraph-100">Menu header</h2>
              </header>
            )}
          </Dialog>
        </Modal>
      </DialogTrigger>
    </nav>
  );
}

But see this error when attempting to render:

Any thoughts on potential misconfigurations or setup requirements I'm missing that would cause this? It only appears to happen with certain buttons, other components also don't appear to trigger this. This also appears to happen when using a custom trigger with a generic <button> tag with the <Pressable> component, and seems tied to the generated id value created by React Aria.

[jordanthornquest]

Well, this is embarrassing. This issue was due to a separate function actually causing the hydration error. Specifically, a function that uses the window global outside of a useEffect or a client-side callback. It's unfortunate that Next/React didn't identify that this function was the actual culprit, but it's good to know this isn't a react-aria-components issue.

Thanks everyone ✨