-
SummaryI freshly created a new project Additional informationThis is the error I got when I added the component to my page for testing.
Error: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
https://react.dev/link/hydration-mismatch
...
<Router actionQueue={{state:{...}, ...}} assetPrefix="">
<HistoryUpdater>
<RuntimeStyles>
<HotReload assetPrefix="">
<ReactDevOverlay state={{nextId:1, ...}} dispatcher={{...}}>
<DevRootNotFoundBoundary>
<NotFoundBoundary notFound={<NotAllowedRootNotFoundError>}>
<NotFoundErrorBoundary pathname="/" notFound={<NotAllowedRootNotFoundError>} notFoundStyles={undefined} ...>
<RedirectBoundary>
<RedirectErrorBoundary router={{...}}>
<Head>
<link>
<script>
<script>
<RootLayout>
<html
lang="en"
- className="hydrated"
>
...
...
at createUnhandledError (http://localhost:3000/_next/static/chunks/node_modules_next_dist_client_9bb038._.js:744:19)
at handleClientError (http://localhost:3000/_next/static/chunks/node_modules_next_dist_client_9bb038._.js:905:98)
at console.error (http://localhost:3000/_next/static/chunks/node_modules_next_dist_client_9bb038._.js:1036:56)
at emitPendingHydrationWarnings (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:2766:103)
at completeWork (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:7226:102)
at runWithFiberInDEV (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:631:20)
at completeUnitOfWork (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:7996:23)
at performUnitOfWork (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:7938:28)
at workLoopSync (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:7829:40)
at renderRootSync (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:7810:13)
at performWorkOnRoot (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:7553:148)
at performSyncWorkOnRoot (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:8395:9)
at flushSyncWorkAcrossRoots_impl (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:8322:199)
at dispatchEvent (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:10682:174)
at dispatchDiscreteEvent (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:10645:64)This is the code of the import { Badge } from "@/components/ui/badge";
import {
InputOTP,
InputOTPGroup,
InputOTPSeparator,
InputOTPSlot,
} from "@/components/ui/input-otp";
export default function Home() {
return (
<>
<Badge variant="outline">Badge</Badge>
<InputOTP maxLength={6}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>
</>
);
}This is the info Operating System:
Platform: win32
Arch: x64
Version: Windows 11 Home Single Language
Available memory (MB): 7861
Available CPU cores: 12
Binaries:
Node: 23.1.0
npm: 10.9.0
Yarn: 1.22.19
pnpm: N/A
Relevant Packages:
next: 15.0.3 // Latest available version is detected (15.0.3).
eslint-config-next: N/A
react: 19.0.0-rc-66855b96-20241106
react-dom: 19.0.0-rc-66855b96-20241106
typescript: 5.6.3
Next.js Config:
output: N/AI would be very grateful for any help or suggestions. ExampleNo response |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 9 replies
-
|
Doesn't the Error Overlay show where the issue happened? It is also a good idea to discard browser extensions, so try it out on an incognito window. If that works, then it is an extension that's messing things up, or rather, triggering the issue. Let's start with that, before diving into more complicated stuff. |
Beta Was this translation helpful? Give feedback.
-
|
It was the Chrome extension in my case... |
Beta Was this translation helpful? Give feedback.
-
|
I just experienced the same error. When I run localhost in my incognito browser, the bug disappears. Error below: 
|
Beta Was this translation helpful? Give feedback.
-
|
Apologies for the back-to-back posts. I noticed that in the final line of my error code, the element within my component---located within my Root Layout file (i.e., app/layout.js) is listed with the property 'data-arp=""'. Adding that to my client made the error go away. Not sure what the 'data-arp' property does, or why it gets shed from server to client, but adding it did the trick! |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
Add the className="hydrated" in the html tag and also add cz-shortcut-listen="true" in body tag |
Beta Was this translation helpful? Give feedback.
-
it is the same for me, was searching for the error for hours smh, thanks |
Beta Was this translation helpful? Give feedback.
-
|
On coginito my app going blank
…On Tue, 3 Dec 2024, 1:06 am ihorml, ***@***.***> wrote:
No way to reproduce, was long time ago... but I highly recommend anyone to
debug it in incognito without any extensions to validate issue on your side
first.
—
Reply to this email directly, view it on GitHub
<#72537 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AQVBDG7MXPKV7KPILNQD6BL2DS4VDAVCNFSM6AAAAABRPHM7O6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCNBUGA3TIMQ>
.
You are receiving this because you commented.Message ID: <vercel/next.
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
Repository? |
Beta Was this translation helpful? Give feedback.
It was the Chrome extension in my case...