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

Open
@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