Warning: Extra attributes from the server: class,style

[Chetan-KK]

trafficstars

Warning: Extra attributes from the server: class,style

while wrapping every page inside ThemeProvider this error popups

• code:

        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>

• error:

app-index.js:31 Warning: Extra attributes from the server: class,style
    at html
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:294:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:157:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:82:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:440:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:126:11)
    at RSCComponent
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:142:11)

[fbt0wizard]

I have thessame issue. only in dev, i guess it has to do with the new version of next 13.5. i will just find another ui library

[Chetan-KK]

should i avoid this warning?

[lucasbrun815]

I also have the same issue with the next 14...

[kratos-respawned]

use supressHydrationWarning inside your html tag to fix this

[Chetan-KK]

thanks

[oasaleh]

use supressHydrationWarning inside your html tag to fix this

Yes, this work. But why is the client and server are out of sync here that I have to use this?

[ThilakReddyy]

"use client";

import * as React from "react"; import { ThemeProvider as NextThemesProvider } from "next-themes"; import { type ThemeProviderProps } from "next-themes/dist/types";

export function ThemeProvider({ children, ...props }: ThemeProviderProps) { const [mounted, setMounted] = React.useState(false); React.useEffect(() => setMounted(true), []); return ( mounted && <NextThemesProvider {...props}>{children}</NextThemesProvider> ); }

well, this worked for me.

[morganfeeney]

It turns out that next-themes recommend adding suppressHydrationWarning: https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app

Note! If you do not add suppressHydrationWarning to your you will get warnings because next-themes updates that element. This property only applies one level deep, so it won't block hydration warnings on other elements.

YOLO 🤷‍♂️

[pippinmole]

"use client";

import * as React from "react"; import { ThemeProvider as NextThemesProvider } from "next-themes"; import { type ThemeProviderProps } from "next-themes/dist/types";

export function ThemeProvider({ children, ...props }: ThemeProviderProps) { const [mounted, setMounted] = React.useState(false); React.useEffect(() => setMounted(true), []); return ( mounted && <NextThemesProvider {...props}>{children} ); }

well, this worked for me.

This is actually a very bad idea. Only rendering the provider after it's mounted means a massive white flash every time you hard refresh.

[kratos-respawned]

use supressHydrationWarning inside your html tag to fix this

@shadcn I guess this solves the issue. Could you please review and mark the issue as solved? Thanks!

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[savg92]

issue still happening in Next 14.1.4

[edumoyano86]

I still have the same problem. If I use suppressHydrationWarning, I feel that it is just covering up the problem but not a solution. I would like to know if anyone found another way to solve it.

[Ako-Mawlood]

Changing ThemeProvider to this removed the warning for me.

"use client"

import * as React from "react" import {ThemeProvider as NextThemesProvider} from "next-themes" import {type ThemeProviderProps} from "next-themes/dist/types"

export function ThemeProvider({children, ...props}: ThemeProviderProps) { const [mounted, setMounted] = React.useState(false) React.useEffect(() => setMounted(true), []) return mounted && <NextThemesProvider {...props}>{children}</NextThemesProvider> }