Sveltekit (adapter-static) -> vscode extension web view: Uncaught (in promise) HierarchyRequestError: Failed to execute 'appendChild' on 'Node': This node type does not support this method. · Issue #16095 · sveltejs/svelte · GitHub | Latest TMZ Celebrity News & Gossip | Watch TMZ Live
Skip to content

Sveltekit (adapter-static) -> vscode extension web view: Uncaught (in promise) HierarchyRequestError: Failed to execute 'appendChild' on 'Node': This node type does not support this method. #16095

Closed
@ktarmyshov

Description

@ktarmyshov

Describe the bug

Dear Svelte Team,

I was trying to check if there is an option to create a sveltekit adapter for vscode extension with the output of adapter-static.

I was able to create a sample project that would use the output of the demo app (sverdle removed), to see if it will run in the vscode web view.

But it seems to fail during the initialization/hydration. I debugged to some extent, and it seems that the issue is with the way how svelte searches for the dom nodes (next sibling) and how vscode web view iterates these nodes.

The problem is that the next sibling of the vscode web view also always returns #text element even if it is useless ('\n\t\t\t...' -> formatted html).

And then the svelte calls appendChild on this element and exception is thrown:

Uncaught (in promise) HierarchyRequestError: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Re (C3RrHwYz.js:468:24)
    at J (0.D7Jp7kM3.js:1:5392)
    at app.CovkB0Eo.js:2:6099
    at app.CovkB0Eo.js:2:1584
    at an (C3RrHwYz.js:812:20)
    at Rt (C3RrHwYz.js:856:12)
    at U (C3RrHwYz.js:523:4)
    at Fe (C3RrHwYz.js:584:9)
    at app.CovkB0Eo.js:2:1578
    at an (C3RrHwYz.js:812:20)

Maybe the issue is somewhere different. I tried removing different #text elements, but then I get to some calls on null (get sibling).

Would you please take a look at this and maybe suggest how to address: maybe I am removing to many \n\t things, and this needs to be done differently.

Here is the sample repo:
https://github.com/kt-npm-modules/vscode-extension

Thank you in advance!
K

Reproduction

https://github.com/kt-npm-modules/vscode-extension

Logs

Uncaught (in promise) HierarchyRequestError: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Re (C3RrHwYz.js:468:24)
    at J (0.D7Jp7kM3.js:1:5392)
    at app.CovkB0Eo.js:2:6099
    at app.CovkB0Eo.js:2:1584
    at an (C3RrHwYz.js:812:20)
    at Rt (C3RrHwYz.js:856:12)
    at U (C3RrHwYz.js:523:4)
    at Fe (C3RrHwYz.js:584:9)
    at app.CovkB0Eo.js:2:1578
    at an (C3RrHwYz.js:812:20)

System Info

System:
    OS: macOS 15.5
    CPU: (10) arm64 Apple M1 Max
    Memory: 107.47 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.3 - ~/.nvm/versions/node/v20.18.3/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.3/bin/npm
    pnpm: 10.10.0 - ~/.nvm/versions/node/v20.18.3/bin/pnpm
  Browsers:
    Chrome: 137.0.7151.69
    Safari: 18.5
  npmPackages:
    svelte: ^5.25.0 => 5.33.14 

vs code
Version: 1.100.3 (Universal)

Severity

blocking all usage of svelte

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      TMZ Celebrity News – Breaking Stories, Videos & Gossip

      Looking for the latest TMZ celebrity news? You've come to the right place. From shocking Hollywood scandals to exclusive videos, TMZ delivers it all in real time.

      Whether it’s a red carpet slip-up, a viral paparazzi moment, or a legal drama involving your favorite stars, TMZ news is always first to break the story. Stay in the loop with daily updates, insider tips, and jaw-dropping photos.

      🎥 Watch TMZ Live

      TMZ Live brings you daily celebrity news and interviews straight from the TMZ newsroom. Don’t miss a beat—watch now and see what’s trending in Hollywood.