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

Question

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

rajks24 opened this issue a year ago · comments

Rajesh Singh commented a 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

Rajesh Singh · Answer 1 · Sat May 13 2023 11:57:58 GMT+0800 (China Standard Time)

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 .

wudi · Answer 2 · Mon Jul 17 2023 11:24:42 GMT+0800 (China Standard Time)

Hello, how can I solve this problem?

Bert Van Hecke · Answer 3 · Mon Nov 06 2023 00:22:40 GMT+0800 (China Standard Time)

Same warning here.

Adeel Imran · Answer 4 · Tue Jan 02 2024 20:44:39 GMT+0800 (China Standard Time)

This issue still exists

Sergiy Dybskiy · Answer 5 · Wed Jan 17 2024 10:13:42 GMT+0800 (China Standard Time)

+1 to the issue

Cohvir · Answer 6 · Fri Jan 19 2024 06:48:36 GMT+0800 (China Standard Time)

Still exists.

Adeel Imran · Answer 7 · Fri Jan 19 2024 07:16:11 GMT+0800 (China Standard Time)

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 · Answer 8 · Fri Jan 19 2024 08:01:31 GMT+0800 (China Standard Time)

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 · Answer 9 · Sat Apr 06 2024 22:58:10 GMT+0800 (China Standard Time)

Still exists. In the Dark Mode