Next.js Discord

Discord Forum

Getting a className error on newly created project

Answered
Gharial posted this in #help-forum
Open in Discord
GharialOP
I'm noticing that on a new project, there is immediately a className error coming from the layout.tsx file. I'm wondering if this is a known error in new apps and if there has been some fix around it?

Also if you know anything about the extra attributes error that would be great. I would like to start a new project with a clean terminal preferably.
Answered by Gharial
Solved:

https://github.com/vercel/next.js/discussions/41816

https://stackoverflow.com/questions/53381500/what-is-vsc-initialized

If you have browser extensions that update classes on your DOM tree, Next.js will warn you about it
View full answer

9 Replies

GharialOP
The error does not seem to come from the next/font/google itself since the error does not persist when declaring the font in the page.tsx file.

The error seems to reside when adding className declarations on the body tag
GharialOP
It seems that "body is not touched after server side rendering"

That is possibly the issue here:
https://stackoverflow.com/questions/49609211/next-js-custom-class-on-body-using-document-js
GharialOP
Interestingly enough, you can add the font declaration in the html tag and it does not trigger the error

That is also how it is set up in the docs
https://nextjs.org/docs/app/building-your-application/optimizing/fonts
GharialOP
Solved:

https://github.com/vercel/next.js/discussions/41816

https://stackoverflow.com/questions/53381500/what-is-vsc-initialized

If you have browser extensions that update classes on your DOM tree, Next.js will warn you about it
Answer
GharialOP
oh cool! Is there a config for that?
Northeast Congo Lion
there is no config, but LastPass honestly just is a pain in the ass lol
lots of browser addons just throw weird console errors
@Gharial oh cool! Is there a config for that?
joulev
No config. Just throw suppressHydrationWarning to the <body> element to silence this error