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
75.46k stars 4.73k forks source link

Light and dark mode server issue #286

Closed salvinoto closed 4 months 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 1 year ago

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

gersongams commented 9 months ago

I'm also having the same issue 😢

shadcn commented 4 months ago

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.