Skip to content

@html issue on SSR hydration #3033

@half2me

Description

@half2me

Describe the bug

When you put this code anywhere in a SvelteKit page that has SSR and hydration enabled:

<p>
  {#if true}
    {@html '<p>Hey!</p>'}
  {/if}
</p>

It results in the following error when hydrating the server rendered page on the browser.
Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'node.parentNode.removeChild')

The error is only displayed on the browser console, and only when it is rendered on the server. If navigating to the page from another page (no ssr involved) then it works just fine.

Reproduction

Reproduction is pretty easy, just initialise a new Sveltekit demo app:
npm init svelte@next my-app
And insert the code snippet somewhere on the index page:

<p>
  {#if true}
    {@html '<p>Hey!</p>'}
  {/if}
</p>

Reload the page, so it gets rendered on the server.

Logs

[Error] Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'node.parentNode.removeChild')
	(anonymous function) (start.js:1210)
	asyncFunctionResume
	(anonymous function)
	promiseReactionJobWithoutPromise
	promiseReactionJob

System Info

System:
    OS: macOS 12.0.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 438.47 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.2.0 - /usr/local/bin/node
    npm: 8.1.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Safari: 15.1
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.3
    @sveltejs/kit: next => 1.0.0-next.201
    svelte: ^3.44.0 => 3.44.2

Severity

blocking all usage of SvelteKit

Additional Information

In my case, this completely breaks my page. My styles are not rendered properly, and the page is unusable.
For a temporary workaround I'm disabling SSR for that page.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions