From b1dada7c2f9610b3ad3f79c4d71eab17297244a2 Mon Sep 17 00:00:00 2001 From: Victor Garcia Date: Thu, 18 Jun 2026 01:26:18 -0600 Subject: [PATCH] fix(layout): suppressHydrationWarning on for browser-extension attrs Grammarly and similar extensions inject data-gr-ext-installed / data-new-gr-c-s-check-loaded onto after SSR, tripping React's hydration-mismatch warning even though our markup is identical. The flag is shallow (body's own attributes only), so it silences the extension noise without masking real mismatches in children. Co-Authored-By: Claude Opus 4.8 (1M context) --- app/layout.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/app/layout.tsx b/app/layout.tsx index 5f61d1a..1583528 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -96,7 +96,13 @@ export default function RootLayout({ lang="en" className={cn(jetbrainsMono.variable, spaceGrotesk.variable)} > - + {/* suppressHydrationWarning: browser extensions (Grammarly, etc.) inject + attributes like data-gr-ext-installed onto after SSR. This is + shallow — it only ignores body's own attribute diff, not children. */} + {children}