You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Using a Dialog component, which is initially opened, throws a hydration exception.
Affected component/components
Dialog
How to reproduce
1. Initiate latest next project:
npx create-next-app@latest dialog-bug-shadcn --typescript --tailwind --eslint
cd dialog-bug-shadcn
2. Initiate shadcn:
npx shadcn-ui@latest init
3. Add Dialog component:
npx shadcn-ui@latest add dialog
4. Use the Dialog component with open property set to true:
import{Dialog,DialogContent,DialogDescription,DialogHeader,DialogTitle,}from"@/components/ui/dialog";exportdefaultfunctionHome(){return(<divclassName="p-4"><Dialogopen={true}modal={false}><DialogContent><DialogHeader><DialogTitle>Are you 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></div>);}
Sytem:
OS: macOS 14.4.1 23E224 arm64
Host: MacBookPro18,3
Kernel: 23.4.0
CPU: Apple M1 Pro
GPU: Apple M1 Pro
Browser:
Arc
Version 1.40.0 (49176)
Chromium Engine Version 124.0.6367.79
Before submitting
I've made research efforts and searched the documentation
I've searched for existing issues
The text was updated successfully, but these errors were encountered:
While rendering your application, there was a difference between the React tree that was pre-rendered from the server and the React tree that was rendered during the first render in the browser.
Since the dialog initially requires JavaScript to render, a discrepancy can arise. After the server renders the HTML, the client-side JavaScript executes and potentially introduces new HTML content, which may not match the HTML that was rendered by the server.
To solve this, you have two options:
Import the Dialog component dynamically on the client side and disable SSR (Server-Side Rendering) for it: const Dialog = dynamic(() => import('@/components/ui/dialog').then((mod) => mod.Dialog), { ssr: false });
Delay rendering until after the server has finished generating the HTML. This can be managed by checking a state that is set only on the client:
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, [])
When isClient is true, it indicates that the client has taken over rendering from the server.
Describe the bug
Using a Dialog component, which is initially opened, throws a hydration exception.
Affected component/components
Dialog
How to reproduce
1. Initiate latest next project:
npx create-next-app@latest dialog-bug-shadcn --typescript --tailwind --eslint cd dialog-bug-shadcn
2. Initiate shadcn:
3. Add Dialog component:
4. Use the
Dialog
component withopen
property set totrue
:5. Run the next dev server:
Codesandbox/StackBlitz link
https://stackblitz.com/edit/stackblitz-starters-c11bus
Logs
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
Expected server HTML to contain a matching
<div>
in<div>
.Callstack
System Info
Before submitting
The text was updated successfully, but these errors were encountered: