Page crashes upon refresh

[NinjaInShade]

Describe the bug

If you look at the reproduction stackblitz, click the "go to page" link, the page loads, and renders, without error. As soon as you then refresh that page, you get a "Uncaught (in promise) HierarchyRequestError: Failed to execute 'appendChild' on 'Node': This node type does not support this method." error. This completely breaks the page and you cannot recover.

I'm not entirely sure what is causing this. Some observations:

• In PageComponent.svelte, the error goes away when you remove either:
  • The $props() call in the <script></script>
  • The --input-width style variable that is passed into the Fieldset component

I am able to provide more info and help in any way I can - this bug is currently blocking my next deployment and I can't find a suitable workaround right now without a massive time commitment.

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-scix6sg7?file=src%2Froutes%2F%2Bpage.svelte

Logs

client.js?v=ea032cef:318 Uncaught (in promise) HierarchyRequestError: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

	in PageComponent.svelte
	in +page.svelte
	in layout.svelte
	in root.svelte

System Info

System:
    OS: Linux 6.8 Linux Mint 21.3 (Virginia)
    CPU: (12) x64 AMD Ryzen 5 7600 6-Core Processor
    Memory: 18.18 GB / 30.32 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
Binaries:
    Node: 23.6.0 - ~/.nvm/versions/node/v23.6.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v23.6.0/bin/npm
Browsers:
    Chrome: 133.0.6943.98
npmPackages:
    @sveltejs/adapter-node: ^5.2.11 => 5.2.11 
    @sveltejs/kit: ^2.15.1 => 2.15.1 
    @sveltejs/vite-plugin-svelte: ^5.0.3 => 5.0.3 
    svelte: ^5.16.0 => 5.16.0 
    vite: ^6.0.6 => 6.0.6

Severity

blocking an upgrade

Additional Information

One more thing to note is that this happens on both the development and production build.

[eltigerchino]

I wonder if this is a cyclical import issue. PageComponent.svelte imports components.js which imports PageComponent.svelte. If I remove the cyclical import, it seems to work without any crash.

<script>
-   import C from './components.js';
+	import Fieldset from './Fieldset.svelte';

  const { foo } = $props();
</script>

<div>
    <Fieldset --input-width="250px" />
	<Fieldset --input-width="250px" />
</div>

[NinjaInShade]

I wonder if this is a cyclical import issue. PageComponent.svelte imports components.js which imports PageComponent.svelte. If I remove the cyclical import, it seems to work without any crash.

<script> - import C from './components.js'; + import Fieldset from './Fieldset.svelte'; const { foo } = $props(); </script>

It's possible, although it confuses me why removing the $props or style variable makes the bug not happen.

If it helps this wasn't a bug before I updated my sveltekit dep, however the jump was fairly steep, going from 2.5.18 to 2.15.1.