Skip to content

fix(layout): suppress browser-extension hydration warning on <body> - #9

Merged
Steel-tech merged 1 commit into
mainfrom
fix/body-hydration-warning
Jun 18, 2026
Merged

fix(layout): suppress browser-extension hydration warning on <body>#9
Steel-tech merged 1 commit into
mainfrom
fix/body-hydration-warning

Conversation

@Steel-tech

@Steel-tech Steel-tech commented Jun 18, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Owner

The reported hydration mismatch is not a code bug — the only differing attributes are data-new-gr-c-s-check-loaded and data-gr-ext-installed, which Grammarly injects onto <body> after SSR. className matches exactly.

suppressHydrationWarning on <body> is the documented fix. It's shallow — only <body>'s own attribute diff is ignored, so real mismatches in any child component still surface.

Verified: typecheck clean · lint 0 errors · build OK.

Summary by CodeRabbit

  • Bug Fixes
    • Fixed hydration warnings that were incorrectly triggered when browser extensions modify page attributes.

@Steel-tech @claude
fix(layout): suppressHydrationWarning on <body> for browser-extension…
b1dada7 
… attrs

Grammarly and similar extensions inject data-gr-ext-installed /
data-new-gr-c-s-check-loaded onto <body> 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) <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Jun 18, 2026 •
edited
Loading

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4bf2a238-ecbf-4c62-b0a7-4e8f7d00f3f1

📥 Commits

Reviewing files that changed from the base of the PR and between 9ac5702 and b1dada7.

📒 Files selected for processing (1)
  • app/layout.tsx
📝 Walkthrough

Walkthrough

RootLayout in app/layout.tsx adds suppressHydrationWarning to the <body> element and an inline comment noting that browser extensions may inject attributes after SSR, suppressing attribute-level hydration warnings while leaving children hydration checks unaffected.

Changes

Body Hydration Warning Suppression

Layer / File(s) Summary
suppressHydrationWarning on <body>
app/layout.tsx		 Adds suppressHydrationWarning prop to the <body> element and an inline comment explaining the browser-extension attribute injection scenario that triggers the SSR mismatch.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

A bunny hopped past the body tag one day,
Extensions had sprinkled their attrs in the way.
"Suppress that warning!" the rabbit declared,
With a comment so future devs know why it's there.
🐇✨ No more red logs — hydration's repaired!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main change: suppressing a hydration warning on the element caused by browser extensions.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/body-hydration-warning

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed: one or more packages not found in the registry.

Comment @coderabbitai help to get the list of available commands and usage tips.

@Steel-tech
Steel-tech merged commit e509c96 into main Jun 18, 2026
2 checks passed
@Steel-tech
Steel-tech deleted the fix/body-hydration-warning branch June 18, 2026 07:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@Steel-tech