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•15mo ago

as child on the trigger?

alanOP•15mo ago

yes, exactly

iDarkLightning•15mo ago

Wdym by that

alanOP•15mo 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•15mo ago

hello guys anyone have experience with using uploadthing with pdfs?

alanOP•15mo ago

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

hadi__mk0•15mo ago

okk thank you man

alanOP•15mo 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•15mo 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

Did you find this page helpful?