Hydration crashes when using app via Google Translate (or many other HTML whitespace manipulations)

[janvogt]

Describe the bug

When visiting a non trivial Svelte 5 page using Google Translate the correct content flashes before turning into a blank page.

The reason is, that Google Translate inserts whitespace into the DOM. This breaks critical assumptions within the hydration logic. In my case a component tried to access $.child(x) while hydration_node.nodeType === TEXT_NODE. Which lead to Uncaught (in promise) DOMException: Node.appendChild: Cannot add children to a Text.

This issue is closely related to #15819, but was not fixed by PR #15851.

Reproduction

I will send a pull request with a failing test and a proposed solution.

Logs

System Info

System:
    OS: Linux 6.6 cpe:/o:nixos:nixos:24.11 24.11 (Vicuna)
    CPU: (16) arm64 Neoverse-N1
    Memory: 20.70 GB / 30.53 GB
    Container: Yes
    Shell: 3.7.1 - /run/current-system/sw/bin/fish
  Binaries:
    Node: 20.19.1 - /nix/store/k770bck0i7d6c8ffc9gb4v2rxj3dvfbs-nodejs-20.19.1/bin/node
    npm: 10.8.2 - /nix/store/k770bck0i7d6c8ffc9gb4v2rxj3dvfbs-nodejs-20.19.1/bin/npm
    pnpm: 9.15.9 - /nix/store/9ah9ki946jl3jx6lcmwvzxcx3irgji29-pnpm-9.15.9/bin/pnpm
  npmPackages:
    svelte: workspace:^ => 5.34.8

Severity

blocking all usage of svelte

[Ocean-OS]

The issue with trying to fix this is that Google could change how translate works at any time without warning, rendering any previous attempts to prevent issues useless. Other DOM-manipulating extensions have similar issues.

[janvogt]

I agree that providing official Google Translate support is unreasonable. However, hydration should not crash for any HTML. Getting a white page, because any middleware changed whitespace in HTML should never be acceptable. I will provide a PR with a failing test, that is completely unrelated to Google. Also, I believe, I have a fix, however I need to further investigate wether that fix makes sense and does not break something else.

[janvogt]

PR is opened.

[Prinzhorn]

Sorry for hijacking that issue, but I don't understand why hydration can fail at all? If there's a mismatch, then destroy everything and make it from scratch on the client. There should never be a blank page. The client has all the code needed to create a functional app without any hydration.

[janvogt]

You are exactly right. This is the core issue. Failing hydration gracefully would be an annoyance. The current state is a - imho severe - bug.

For a reproduction take a look at my pr, it contains a commit with a failing test, because hydration attempts to appendChild on a text node. So a trivial fix would be to catch that error and fail hydration. I believe the proposed solution is better, as hydration with it succeeds. And it succeeds as well for another test case related to issue #15819, where the fix was to fail gracefully.