8000 Updating a component moves the component outside of Root svelte component · Issue #8317 · sveltejs/svelte · GitHub
[go: up one dir, main page]
Skip to content

Updating a component moves the component outside of Root svelte component #8317

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
tremendus opened this issue Feb 24, 2023 · 3 comments
Closed

Updating a component moves the component outside of Root svelte component #8317

tremendus opened this issue Feb 24, 2023 · 3 comments

Comments

@tremendus
Copy link
tremendus commented Feb 24, 2023 •
edited
Loading

Describe the bug

The seems to be a reproducible bug somewhere between Vite and Svelte 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:
image

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
@Algoinde
Copy link

This actually seems like a Svelte Dev Tools bug. Just had it, disabled the addon, the problem went away.

@tremendus
Copy link
Author

Ah! Yes ... finally someone else noticed this! I'll file in DevTools, good spot!

@matteocontrini
Copy link

For reference, this is still happening today and the corresponding issue to watch is the following: sveltejs/svelte-devtools#125

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@matteocontrini @tremendus @Algoinde
0