Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
rajks24 opened this issue May 13, 2023 · 11 comments
Open

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

rajks24 opened this issue May 13, 2023 · 11 comments

Comments

@rajks24
Copy link

rajks24 commented May 13, 2023

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
Copy link
Author

rajks24 commented May 13, 2023

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
Copy link

Hello, how can I solve this problem?

usatie added a commit to usatie/pong that referenced this issue Nov 1, 2023
@usatie
Fix Warning: Extra attributes from the server: class,style in console
dccf9d7 
It looks like this is a bug in shadcn w/ next-themes

cf.
shadcn/next-contentlayer#7
usatie added a commit to usatie/pong that referenced this issue Nov 2, 2023
@usatie
🆙 Update dependencies (nextjs14) (#22)
9cce0e9 
* 🆙 Update dependencies (nextjs14)

* Fix nginx config for ws error

https://gist.github.com/kocisov/2a9567eb51b83dfef48efce02ef3ab06

* Fix `Warning: Extra attributes from the server: class,style` in console

It looks like this is a bug in shadcn w/ next-themes

cf.
shadcn/next-contentlayer#7

* ♻️ Stop using `src` directory for Next.js

* Add Makefile target `update` to update dependencies

* Fix frontend Dockerfile to copy package-lock.json (Fix #20)
@BertVanHecke
Copy link

Same warning here.

@adeelibr
Copy link

adeelibr commented Jan 2, 2024

This issue still exists

@sergical
Copy link

+1 to the issue

@Cohvir
Copy link

Cohvir commented Jan 18, 2024 •
edited
Loading

Still exists.

@adeelibr
Copy link

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
Copy link

Cohvir commented Jan 19, 2024

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
Copy link

Relax9 commented Apr 6, 2024

Still exists. In the Dark Mode

@huyennhat-dev
Copy link

+1 issue

@jarrodmedrano
Copy link

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.

jatnerubia added a commit to jatnerubia/fix-my-grammar-ai-client that referenced this issue Sep 15, 2024
@jatnerubia
fix: warning in console for extra attributes from the server
f9df102 
reference: shadcn/next-contentlayer#7
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
10 participants
@jarrodmedrano @sergical @adeelibr @Relax9 @rajks24 @WuChenDi @Cohvir @BertVanHecke @huyennhat-dev and others