Skip to content

fix: warn instead of crash on invalid HTML nesting around islands#3762

Merged
bartlomieju merged 2 commits into
mainfrom
fix/dom-nesting-hydration-warning
Apr 9, 2026
Merged

fix: warn instead of crash on invalid HTML nesting around islands#3762
bartlomieju merged 2 commits into
mainfrom
fix/dom-nesting-hydration-warning

Conversation

@bartlomieju

Copy link
Copy Markdown
Contributor

Summary

  • When a block-level element (e.g. <div>) is placed inside an inline element (e.g. <p>) that wraps an island, the browser fixes the invalid nesting by splitting the parent, moving Fresh's comment markers into different DOM nodes
  • Previously this caused a fatal DOMException during hydration, crashing all client-side JS on the page
  • Now Fresh detects that start.parentNode !== end.parentNode before calling createRootFragment, logs a descriptive error message explaining the invalid nesting, and skips the broken island instead of crashing

Example of the error message:

Fresh hydration error: the island "BugIsland" has invalid HTML nesting.
Its start and end markers were reparented by the browser into different
DOM nodes. This is usually caused by placing a block-level element
(like <div>) inside an inline element (like <p> or <span>). Check the
HTML around this island for invalid nesting.

Closes #2121

Test plan

  • All 24 existing island tests pass
  • Manually verify with <p><MyIsland /></p> where MyIsland returns <div> — should log error instead of crashing

🤖 Generated with Claude Code

bartlomieju and others added 2 commits April 9, 2026 10:10
)

When block-level elements (like <div>) are placed inside inline
elements (like <p>), the browser reparents the island markers into
different DOM nodes. Previously this caused a fatal DOMException
during hydration. Now Fresh detects the mismatched markers and logs
a descriptive error message, skipping the broken island instead of
crashing the entire page.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Verifies that placing a block-level island (<div>) inside a <p>
logs an error instead of crashing, and the rest of the page
remains functional.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@bartlomieju bartlomieju merged commit af3f30d into main Apr 9, 2026
9 checks passed
@bartlomieju bartlomieju deleted the fix/dom-nesting-hydration-warning branch April 9, 2026 10:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improper DOM nesting leads to fatal DOMException on hydration - consider warning in dev mode?

1 participant