-
-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Description
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
promiseReactionJobSystem 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.2Severity
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.