search

shadcn / next-contentlayer

A template with Next.js 13 app dir, Contentlayer, Tailwind CSS and dark mode.
https://next-contentlayer.vercel.app
684 stars 93 forks source link

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

Open rajks24 opened 1 year ago

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 11 months ago

Same warning here.

adeelibr commented 10 months ago

This issue still exists

sergical commented 9 months ago

+1 to the issue

Cohvir commented 9 months ago

Still exists.

adeelibr commented 9 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 9 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 6 months ago

Still exists. In the Dark Mode

huyennhat-dev commented 3 months ago

+1 issue

jarrodmedrano commented 3 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.