ui
ui copied to clipboard
shadcn-ui
Light and dark mode server issue
Hi, on every page load, im getting this error. The only thing I can see in the log is "light" and it kind of seems like its stemming from some sort or light and dark mode issue. Not sure if its specifically related to shadcnUI?
Warning: Prop className did not match. Server: "__variable_ccafe3 light" Client: "__variable_ccafe3" at html at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/components/redirect-boundary.js:64:9) at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/components/redirect-boundary.js:71:11) at NotFoundErrorBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/components/not-found-boundary.js:33:9) at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/components/not-found-boundary.js:40:11) at ReactDevOverlay (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9) at HotReload (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:276:11) at Router (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/components/app-router.js:93:11) at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/components/error-boundary.js:61:9) at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/components/error-boundary.js:86:11) at AppRouter (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/components/app-router.js:332:13) at ServerRoot (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/app-index.js:153:11) at RSCComponent at Root (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/app-index.js:170:11) w
abhinav
`import { ThemeProvider } from "@/components/theme-provider"; import "./globals.css"; import SupabaseProvider from "./supabase-provider"; import { Inter } from "next/font/google"; import { cn } from "@/lib/utils"; import { Analytics } from "@vercel/analytics/react";
const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap", });
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" className={${inter.variable}}>
<body className={cn("min-h-screen bg-background font-sans antialiased")}>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
<SupabaseProvider>
{children}
<Analytics />
</SupabaseProvider>
</ThemeProvider>
); } `
Were you able to solve this? I'm also facing this with latest next and shadcn
This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.
