From 5c3348ef2d89ba8cec9672025a41d9fe01fcc4eb Mon Sep 17 00:00:00 2001 From: yiekheng Date: Sun, 10 May 2026 09:00:41 +0800 Subject: [PATCH] =?UTF-8?q?fix(web):=20suppress=20hydration=20warning=20on?= =?UTF-8?q?=20html/body=20=E2=80=94=20browser=20extensions=20inject=20attr?= =?UTF-8?q?s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The remaining hydration mismatch was a stray `__gcrremoteframetoken` attribute added to by a browser extension after the document loaded. Browser extensions (password managers, accessibility tools, the Google iframe-token injector, Grammarly, etc.) routinely poke at the top-level elements before React hydrates and React 19 then flags it as a mismatch even though our code wasn't involved. `suppressHydrationWarning` on and only suppresses **attribute** differences on those elements; their children continue to be hydration-checked normally, so any real bugs still show up. Co-Authored-By: Claude Opus 4.7 (1M context) --- apps/web/src/app/layout.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index 957f6a1..3e1854c 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -20,11 +20,14 @@ export const viewport: Viewport = { export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - // Light theme is the only theme — no client-side theme switcher and - // therefore no pre-hydration `