You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
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:
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 editorEdit 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
System Info
Severity
annoyance
The text was updated successfully, but these errors were encountered: