search

shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
62.84k stars 3.53k forks source link

Light and dark mode server issue #286

Open salvinoto opened 1 year ago

salvinoto commented 1 year ago

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: PropclassNamedid not match. Server: "__variable_ccafe3 light" Client: "__variable_ccafe3" at html at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.3.1_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:64:9) at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.3.1_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:71:11) at NotFoundErrorBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.3.1_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:33:9) at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.3.1_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:40:11) at ReactDevOverlay (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.3.1_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9) at HotReload (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.3.1_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:276:11) at Router (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.3.1_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/app-router.js:93:11) at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.3.1_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js:61:9) at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.3.1_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js:86:11) at AppRouter (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.3.1_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/app-router.js:332:13) at ServerRoot (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.3.1_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/app-index.js:153:11) at RSCComponent at Root (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.3.1_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/app-index.js:170:11) w

abhinav-anshul commented 1 year ago

Can you share your component code?

salvinoto commented 1 year ago

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")}>

{children} 
  </body>
</html>

); } `

nooblyf commented 8 months ago

Were you able to solve this? I'm also facing this with latest next and shadcn

gersongams commented 4 months ago

I'm also having the same issue 😢