Fix dialog SSR crash by gating DialogPortal to client
DialogPortal aliased Radix's Portal directly, which calls createPortal(children, document.body) during render. Static prerendering (e.g. /about via InquiryDialog) has no document global and threw "document is not defined". Wrap it so the portal only mounts client-side. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012Exmd6Wn13TGp1sArgK7y4
This commit is contained in:
@@ -10,7 +10,26 @@ const Dialog = DialogPrimitive.Root;
|
|||||||
|
|
||||||
const DialogTrigger = DialogPrimitive.Trigger;
|
const DialogTrigger = DialogPrimitive.Trigger;
|
||||||
|
|
||||||
const DialogPortal = DialogPrimitive.Portal;
|
// Only render the portal on the client. During SSR/static prerendering the
|
||||||
|
// `document` global doesn't exist, and React Dom's createPortal(children,
|
||||||
|
// document.body) inside Radix's Portal would throw "document is not defined".
|
||||||
|
const DialogPortal = ({
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>) => {
|
||||||
|
const [mounted, setMounted] = React.useState(false);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
setMounted(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (!mounted) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return <DialogPrimitive.Portal {...props}>{children}</DialogPrimitive.Portal>;
|
||||||
|
};
|
||||||
|
DialogPortal.displayName = DialogPrimitive.Portal.displayName;
|
||||||
|
|
||||||
const DialogClose = DialogPrimitive.Close;
|
const DialogClose = DialogPrimitive.Close;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user