getting warning in console for Extra attributes from the server: class,style #7
Comments
|
this issue occurs for |
|
Hello, how can I solve this problem? |
It looks like this is a bug in shadcn w/ next-themes cf. shadcn/next-contentlayer#7
* 🆙 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)
|
Same warning here. |
|
This issue still exists |
|
+1 to the issue |
|
Still exists. |
|
The issue is fixed after adding 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 |
|
Still exists. In the Dark Mode |
|
+1 issue |
|
Hiding
I guess hiding warnings is considered a solution these days. |
|
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>
);
}``` |
and others
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 devin browser consoleThe text was updated successfully, but these errors were encountered: