Bug with SSR and Hydration (Probably Caused by @html)

[Acmion]

Describe the bug

Using multiple {@html variable} can make SvelteKit behave strangely. Essentially, the application is first SSR rendered into the correct state, then the hydration kicks in and incorrectly mutates the state.

This means that the app flickers and that the resulting state is incorrect.

Reproduction

https://github.com/Acmion/svelte-kit-ssr-bug

Logs

-

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i5-2500K CPU @ 3.30GHz
    Memory: 1.64 GB / 7.97 GB
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (95.0.1020.53)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.196
    svelte: ^3.42.6 => 3.44.1

Severity

annoyance

Additional Information

It is relatively easy to work around this problem by, for example, wrapping the {@html variable} statements in divs, like this:

<div>{@html variable}</div>

However, it is relatively hard to detect and understand what is causing this issue.

[rmunn]

Although the reproduction requires Svelte-Kit, I suspect the ultimate cause of the bug might be the @html hydration code, which lives in the Svelte repo. Specifically, in the claim_html_tag function of src/runtime/internal/dom.ts and related functions. If I'm right, it should be possible to create a REPL repro demonstrating the bug using new Component({ hydrate: true }).

[Acmion]

Yes, you are probably right.

I tried to reproduce the problem in the Svelte REPL (https://svelte.dev/repl), but got the following error:

options.hydrate only works if the component was compiled with the `hydratable: true` option

[benmccann]

@hbirler FYI in case you were interested in any more hydration edge cases

[baseballyama]

@rmunn

Are you working on this issue?
If not, I would like to work on it.

[rmunn]

@baseballyama - No, I've got my hands full with other issues at the moment.

[baseballyama]

@rmunn OK! I created PR!