Hydration Error #72537

Grenish · 2024-11-09T15:37:43Z

Grenish
Nov 9, 2024

Summary

I freshly created a new project personal-dashboard with nextjs 15 and shadcn. And when I added the component of shadcn I and added it to the code, I got error box in the corner and when I opened it, it was hydration error from nextjs. Now I'm very confuse where and how can I go wrong? npx shadcn@latest init use --legacy-peer-deps

Additional information

This 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 page.tsx

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 npx next 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/A

I would be very grateful for any help or suggestions.
Thank you

Example

No response

icyJoseph · 2024-11-09T17:15:46Z

icyJoseph
Nov 9, 2024

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.

0 replies

ihorml · 2024-11-12T03:51:15Z

ihorml
Nov 12, 2024

It was the Chrome extension in my case...

5 replies

sajjadalidev Dec 2, 2024

which chrome extension?

icyJoseph Dec 2, 2024

Post a screenshot of the error you have (specially the HTML difference)

Often the added classes or attributes can be found online, and from there we know what extension is the problem

ihorml Dec 2, 2024

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.

tylerhuyser Dec 14, 2024

I just experienced the same error. When I run localhost in my incognito browser, the bug disappears.

Error below:

tylerhuyser Dec 14, 2024

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!

sajjadalidev · 2024-12-02T20:33:35Z

sajjadalidev
Dec 2, 2024

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. ***@***.***>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hydration Error #72537

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Hydration Error #72537

Summary

Additional information

Example

Replies: 3 comments · 5 replies

Replies: 3 comments 5 replies