sveltejs / sveltejs/kit

Page crashes upon refresh

Open
#13,631 2 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

svelte 5
Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked StackBlitz reproduction and compare navigation with a page refresh. Inspect the mentioned PageComponent.svelte, +page.svelte, layout.svelte, and root.svelte files, focusing on the $props() call and the --input-width style variable passed to Fieldset. Done means the page refreshes without the HierarchyRequestError in both development and production builds.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.