andymick01/craft2prints
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix React hydration mismatch errors

Browse Source 
Add suppressHydrationWarning to html element to prevent hydration mismatch
caused by theme script setting dark class before React hydration completes.

The hydration errors were preventing checkout and other interactive features
from working properly. This tells React to ignore the mismatch on the html
element since we intentionally modify it before hydration.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Andymick
2026-07-18 06:18:02 +01:00
co-authored by Claude Haiku 4.5
parent 3d48e4d545
commit 017b68f17b
1 changed files with 1 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/layout.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
maintenanceMode && !pathname.startsWith('/admin') && !(await isAdminAuthenticated()); maintenanceMode && !pathname.startsWith('/admin') && !(await isAdminAuthenticated());
return ( return (
<html lang="en" className={`${fraunces.variable} ${inter.variable} ${mono.variable} ${caveat.variable}`}> <html lang="en" suppressHydrationWarning className={`${fraunces.variable} ${inter.variable} ${mono.variable} ${caveat.variable}`}>
<head> <head>
{/* Extra fonts available in the design tool's text options (loaded by real {/* Extra fonts available in the design tool's text options (loaded by real
family name so the canvas can reference them directly). */} family name so the canvas can reference them directly). */}