Hydration issue when loading HTML content from the server

[DaFrenchFrog]

Describe the bug

Following this issue and advice from @brunnerh, I'm posting the issue here.

I want to load HTML content from the server (initially supabase but I framed the issue) and display it on the page.
If I don't encapsulate the content in a {@html ...} it logically shows as plain text, but when I add it doesn't show and I get a hydration_html_changed issue.

Reproduction

I tried to set a REPL but $appdoes not compile

<!-- +page.server.js -->
export async function load({ url }) {
	return { personalMessage: '<h1>personalMessage</h1>' };
}

<!-- +page.svelte -->
<script>
    import { page } from '$app/state';
    console.log(page.data.personalMessage); // Logs content correctly
</script>

<h2>Hey !</h2>
<div>
    <!-- Displays HTML content as plain text -->
    {page.data.personalMessage}

    <!-- Nothing shows + hydration_html_changed warning -->
    {@html page.data.personalMessage}
</div>

Logs

[vite] connecting...
client:614 [vite] connected.
+page.svelte:4 <h1>personalMessage</h1>
+page.svelte:4 [svelte] hydration_html_changedThe value of an `{@html ...}` block near src/​routes/​test/​+page.svelte:8:0 changed between server and client renders. The client value will be ignored in favour of the server valuehttps://svelte.dev/e/hydration_html_changed

System Info

System:
    OS: macOS 14.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 653.75 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.10.0 - ~/.nvm/versions/node/v22.10.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v22.10.0/bin/npm
  Browsers:
    Chrome: 131.0.6778.140
    Safari: 17.1
  npmPackages:
    svelte: ^5.0.0 => 5.14.0

Severity

annoyance

[brunnerh]

There seems to be an issue with the data when retrieved from $app/state, using the prop does not cause the mismatch:

<!-- +page.svelte -->
<script>
  const { data } = $props();
</script>

<h2>Hey !</h2>
<div>
  {data.personalMessage}
  {@html data.personalMessage}
</div>

The log statement in the component logs undefined on the server.

[zarir94]

Any solution yet? I would use $props but doing so, it turns into runes mode. And I can't convert all reactive values to fix error of saying $derived, $effect needs to be used. So is there any way to fix it without going into runes mode?

[paoloricciuti]

Any solution yet? I would use $props but doing so, it turns into runes mode. And I can't convert all reactive values to fix error of saying $derived, $effect needs to be used. So is there any way to fix it without going into runes mode?

You can also export let data and do {@html data.personalMessage}

[dummdidumm]

This is a bug in $app/state therefore transfering to the kit repo

[eltigerchino]

I can't seem to reproduce this using the latest version of SvelteKit. Presumably, this has been fixed by #13192 because I can only reproduce it if I install SvelteKit 2.12.1, the version before the fix was released.