New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[bug]: Initially opened dialog causes hydration error #3613
Comments
Hi @isRyven According to the official Next.js documentation on hydration errors, a hydration error occurs when:
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:
Cheers! |
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: