Updating a component moves the component outside of Root svelte component when dev tools is enabled

Describe the bug

The seems to be a reproducible bug somewhere in dev tools that causes a component being updated in the editor to become moved outside of the Root svelte component according to Svelte developer tools which causes subsequent HMRs to fail and errors to be thrown in the console. As well, it causes styling and layout to brake on load and reload when using libraries like Shoelace HTML component library.

Steps for reproduction are below.

Symptoms:

Errors:

[HMR][Svelte] Failed to rerender <+page>

TypeError: node.parent is undefined
    removeNode create:118
    d create:280
    destroy_component index.mjs:1974
    $destroy index.mjs:2105
    $destroy index.mjs:2259
    $replace svelte-hooks.js:267
    refreshComponent proxy.js:171
    rerender proxy-adapter-dom.js:77
    reload proxy.js:408
    reload proxy.js:406
    applyHmr hot-api.js:150
    accept client.ts:539
    fetchUpdate client.ts:456
    queueUpdate client.ts:307
    queueUpdate client.ts:307

Reproduction

Reproducible repo: https://github.com/tremendus/svelte-vite-dom-bug

Videos showing the install and the reproducible bug are below: Fresh install: https://youtu.be/enuE_XJHjhA Bug, showing bug in action: https://youtu.be/1D6r_b6A3jk

Run npm run dev Open your browser to the URL in the console Open Svelte developer tools and split console (so you can see both at the same time) Note that there is a single Root component and that your home Page component is nested within the Root component Open your editor Open /src/routes/+page.svelte in your editor Edit the text and save Look at Svelte Dev Tools - the Page component is now located as a sibling to the Root component and no longer nested within as before. Make another change to the text save. Errors are thrown ... presumably because the component isn't at the location in the DOM Tree where either Vite or Svelte (not sure which) expects it to be. NOTE: subsequent change to the component will force a refresh, fixing the problem, until you make a change and save again and the whole cycle starts over again.

Logs

Errors:

[HMR][Svelte] Failed to rerender <+page>

TypeError: node.parent is undefined
    removeNode create:118
    d create:280
    destroy_component index.mjs:1974
    $destroy index.mjs:2105
    $destroy index.mjs:2259
    $replace svelte-hooks.js:267
    refreshComponent proxy.js:171
    rerender proxy-adapter-dom.js:77
    reload proxy.js:408
    reload proxy.js:406
    applyHmr hot-api.js:150
    accept client.ts:539
    fetchUpdate client.ts:456
    queueUpdate client.ts:307
    queueUpdate client.ts:307

System Info

System:
    OS: macOS 13.1
    CPU: (8) arm64 Apple M1
    Memory: 145.53 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    npm: 9.2.0 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 110.0.5481.177
    Firefox: 111.0
    Safari: 16.2
  npmPackages:
    svelte: ^3.54.0 => 3.55.1

Severity

annoyance

sveltejs / svelte-devtools