how to resolve hydration failed error when including button shadcn dialog

I have this dialog built out of shadcn's components:

import { Button } from "./ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "./ui/dialog";

export default function CreateThingDialog() {
  return (
    <Dialog>
      <DialogTrigger>
        <Button variant="outline">Create thing</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you sure absolutely sure?</DialogTitle>
          <DialogDescription>
            This action cannot be undone. This will permanently delete your
            account and remove your data from our servers.
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
}

import { Button } from "./ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "./ui/dialog";

export default function CreateThingDialog() {
  return (
    <Dialog>
      <DialogTrigger>
        <Button variant="outline">Create thing</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you sure absolutely sure?</DialogTitle>
          <DialogDescription>
            This action cannot be undone. This will permanently delete your
            account and remove your data from our servers.
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
}

which is giving me this error:

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <button> in <button>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
button
_c
./src/components/ui/button.tsx (40:11)
button
eval
./node_modules/@radix-ui/react-primitive/dist/index.mjs (44:26)
eval
./node_modules/@radix-ui/react-dialog/dist/index.mjs (109:28)
Provider
./node_modules/@radix-ui/react-context/dist/index.mjs (47:28)
$5d3850c4d0b4e6c7$export$3ddf2d174ce01153
./node_modules/@radix-ui/react-dialog/dist/index.mjs (77:28)
CreateThingDialog
ThingsClient
./src/app/matters/things-client-component.tsx (22:89)

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <button> in <button>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
button
_c
./src/components/ui/button.tsx (40:11)
button
eval
./node_modules/@radix-ui/react-primitive/dist/index.mjs (44:26)
eval
./node_modules/@radix-ui/react-dialog/dist/index.mjs (109:28)
Provider
./node_modules/@radix-ui/react-context/dist/index.mjs (47:28)
$5d3850c4d0b4e6c7$export$3ddf2d174ce01153
./node_modules/@radix-ui/react-dialog/dist/index.mjs (77:28)
CreateThingDialog
ThingsClient
./src/app/matters/things-client-component.tsx (22:89)

but goes away when I remove the Button component. wai?! thanks!

Solution:

as child on the trigger?

Jump to solution

9 Replies

Solution

iDarkLightning•8mo ago

as child on the trigger?

alan•8mo ago

yes, exactly

iDarkLightning•8mo ago

Wdym by that

alan•8mo ago

I thought when you asked as child on the trigger , you meant

<DialogTrigger>
        <Button variant="outline">Create thing</Button>
      </DialogTrigger>

<DialogTrigger>
        <Button variant="outline">Create thing</Button>
      </DialogTrigger>

I see now that I may need to add asTrigger to the DialogTrigger component let me try that now oh awesome. that fixed it

hadi__mk0•8mo ago

hello guys anyone have experience with using uploadthing with pdfs?

alan•8mo ago

@hadi__mk0 I don't. sorry. I might though in the near future! (not that that helps you now 😦 )

hadi__mk0•8mo ago

okk thank you man

alan•8mo ago

you can ask the specific question in a separate thread here, though I'm not sure what the adoption is like, but from the videos, it sounds like it's fairly high now

hadi__mk0•8mo ago

ohh i did askk but i want to know like if i can embed the uploaded pdfs in my web page so the user can see them

Gaming

Programming

how to resolve hydration failed error when including button shadcn dialog