ui [bug]: 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:

Describe the bug

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

Affected component/components

Dark Mdode

How to reproduce

Use Next.js with Server-Side Rendering (SSR).
Apply a dynamic className="dark" or style={{color-scheme:"dark"}} based on a condition like if (typeof window !== 'undefined').
Ensure the client and server generate different outputs for the same component.

Codesandbox/StackBlitz link

No response

Logs

...
    <Router actionQueue={{state:{...}, ...}} assetPrefix="">
      <HistoryUpdater>
      <RuntimeStyles>
      <HotReload assetPrefix="">
        <ReactDevOverlay state={{nextId:1, ...}} dispatcher={{...}}>
          <DevRootHTTPAccessFallbackBoundary>
            <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
              <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
                <RedirectBoundary>
                  <RedirectErrorBoundary router={{...}}>
                    <Head>
                    <link>
                    <script>
                    <script>
                    <RootLayout>
                      <html
                        lang="en"
-                       className="dark"
-                       style={{color-scheme:"dark"}}
                      >
                    ...
          ...

    at createUnhandledError (http://localhost:3000/_next/static/chunks/node_modules_next_dist_client_523921._.js:689:49)
    at handleClientError (http://localhost:3000/_next/static/chunks/node_modules_next_dist_client_523921._.js:856:56)
    at console.error (http://localhost:3000/_next/static/chunks/node_modules_next_dist_client_523921._.js:987:56)
    at emitPendingHydrationWarnings (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:2768:103)
    at completeWork (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:7238: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:8020:23)
    at performUnitOfWork (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:7957:28)
    at workLoopConcurrent (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:7951:58)
    at renderRootConcurrent (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:7933:71)
    at performWorkOnRoot (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:7565:175)
    at performWorkOnRootViaSchedulerTask (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:8394:9)
    at MessagePort.performWorkUntilDeadline (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_107ce8._.js:2353:64)

System Info

- 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

Before submitting

[x] I've made research efforts and searched the documentation
[x] I've searched for existing issues

Feb 24 '25 12:02 Polqt

@Polqt Hey, have you found a fix for this issue? I’m temporarily using suppressHydrationWarning on both the <html> and <body> tags, and it’s helping me get around the hydration warning for now. Here's how I did it:

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body
        suppressHydrationWarning
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Just curious if you’ve found a proper fix yet! Let me know. 😊

Mar 11 '25 17:03 AnilShebin

Mine was due to mc afee web advisory extension, it tries to manipulate the client rendered input After removing that extension, the warning is gone.

https://stackoverflow.com/questions/79244952/next-js-15-0-3-hydration-failed-because-the-server-rendered-html-didnt-match-t

Apr 02 '25 01:04 EngelbertTeh

Same for me! it was due to "Grammarly" chrome extension

Apr 02 '25 17:04 MathieuDoyon

Try running in a guest profile. It will probably run without this error.

Jul 14 '25 11:07 manojpatra061

@AnilShebin this way it gets fixed. Thanks 🤝

Aug 20 '25 04:08 sachidumaleesha

@AnilShebin this way it gets fixed. Thanks 🤝

It's suppressing the error rather than fixing it.

Aug 20 '25 11:08 rkuang9

@AnilShebin this way it gets fixed. Thanks 🤝

It's suppressing the error rather than fixing it.

Yes, you’re right. It doesn’t fully fix it, but most of the time the error comes from browser extensions changing the page. Using suppressHydrationWarning is an easy way to avoid the warning and focus on more important work.

Aug 22 '25 04:08 AnilShebin

try to use dynamic import for the NextThemesProvider

"use client";

import dynamic from "next/dynamic";
import * as React from "react";

const NextThemesProvider = dynamic(
  () => import("next-themes").then((e) => e.ThemeProvider),
  {
    ssr: false,
  }
);

export function ThemeProvider({
  children,
  ...props
}: React.ComponentProps<typeof NextThemesProvider>) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

Oct 01 '25 03:10 gfsxyz

try to use dynamic import for the NextThemesProvider

"use client";

import dynamic from "next/dynamic"; import * as React from "react";

const NextThemesProvider = dynamic( () => import("next-themes").then((e) => e.ThemeProvider), { ssr: false, } );

export function ThemeProvider({ children, ...props }: React.ComponentProps<typeof NextThemesProvider>) { return <NextThemesProvider {...props}>{children}</NextThemesProvider>; }

I was getting the hydration error and issues with the theme state on load. This fixed it for me. Thank you!

Oct 11 '25 08:10 justinjordan