getting warning in console for Extra attributes from the server: class,style

rajks24 commented 1 year ago

Issue : getting warning in console for Extra attributes from the server: class,style

template version: "version": "0.1.0"

Description:

Getting warning when run npm run dev in browser console

Warning: Extra attributes from the server: class,style
html
RedirectErrorBoundary@webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9
RedirectBoundary@webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:25
NotFoundErrorBoundary@webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:33:9
NotFoundBoundary@webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:40:66
ReactDevOverlay@webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9
HotReload@webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:276:39
Router@webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:90:130
ErrorBoundaryHandler@webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:62:9
ErrorBoundary@webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:56
AppRouter@webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:372:48
ServerRoot@webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:154:25
RSCComponent
Root@webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:171:25

rajks24 commented 1 year ago

this issue occurs for npm run dev, and not for npm run build. The issue was resolved after adding suppressHydrationWarning in layout Eg: <html lang="en" suppressHydrationWarning> . Seems occurs as needed because using next-themes .

WuChenDi commented 1 year ago

Hello, how can I solve this problem?

BertVanHecke commented 1 year ago

Same warning here.

adeelibr commented 11 months ago

This issue still exists

sergical commented 10 months ago

+1 to the issue

Cohvir commented 10 months ago

Still exists.

adeelibr commented 10 months ago

The issue is fixed after adding suppressHydrationWarning in layout Eg: <html lang="en" suppressHydrationWarning>

It is also part of the documentation in shadcn, I in the dark mode section

Cohvir commented 10 months ago

The issue is fixed after adding suppressHydrationWarning in layout Eg: <html lang="en" suppressHydrationWarning>

It is also part of the documentation in shadcn, I in the dark mode section

I think it should be at least mentioned in the docs. The suppressHydrationWarning is not even highlighted, it's hard to spot the first time.

Relax9 commented 8 months ago

Still exists. In the Dark Mode

huyennhat-dev commented 4 months ago

+1 issue

jarrodmedrano commented 4 months ago

Hiding

The issue is fixed after adding suppressHydrationWarning in layout Eg: <html lang="en" suppressHydrationWarning>

It is also part of the documentation in shadcn, I in the dark mode section

I guess hiding warnings is considered a solution these days.

Gsync commented 23 hours ago

If the error is caused by shadcn themeprovider and goes way by removing this element then rather than suppressing the warning, you could also lazy load the ThemeProvider as highlighted here https://github.com/pacocoursey/next-themes?tab=readme-ov-file#avoid-hydration-mismatch

Note: Please test the production build, this might throw dynamic server usage error during build and using "force-dynamic" might help to resolve this


// layout.tsx

import dynamicImport from "next/dynamic";
export const dynamic = "force-dynamic"; // this might resolve the dynamic server usage error

const ThemeProvider = dynamicImport(
  () => import("@/components/theme-provider").then((mod) => mod.ThemeProvider),
  {
    ssr: false,
    loading: () => (
      // Optional: Add skeleton loader here
      <div className="min-h-screen bg-background" />
    ),
  }
);

export default function RootLayout({ children }: Readonly<Props>) {
  return (
    <html lang="en">
      <body
        className={cn(
          "min-h-screen bg-background font-sans antialiased",
          inter.variable
        )}
      >
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}```

shadcn / next-contentlayer

getting warning in console for Extra attributes from the server: class,style #7