🐛 BUG: Svelte if statements break after HMR

[bholmesdev]

What version of astro are you using?

1.0.0-beta.42

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac, Windows

Describe the Bug

When using a Svelte conditional based on a state variable:

<script>
let count = 0
</script>

{#if count % 2 === 0}
<p>It's even!</p>
{/if}

...changes to any file in the dev server (including the astro template rendering the component) will break hydration. See the error message below from the clientside console:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'removeChild')
    at detach (chunk-4S6C63PG.js?v=86714e0a:321:19)
    at detach_dev (chunk-4S6C63PG.js?v=86714e0a:1809:3)
    at Object.destroy [as d] (Wrapper.svelte? [sm]:16:32)
    at Object.destroy [as d] (Content.svelte? [sm]:2:38)
    at chunk-4S6C63PG.js?v=86714e0a:1019:17
    at run (chunk-4S6C63PG.js?v=86714e0a:19:10)
    at Array.forEach (<anonymous>)
    at run_all (chunk-4S6C63PG.js?v=86714e0a:25:7)
    at check_outros (chunk-4S6C63PG.js?v=86714e0a:1000:5)
    at Object.update [as p] (Content.svelte? [sm]:7:22)

A page refresh fixes this.

Note: To see the error in the example linked below:

1. make an edit to the index.astro file
2. save
3. click the button in the preview

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-uqfwdr-jnpvhj?file=src/pages/index.astro

• does not break production builds
• bumping back to beta.37 fixes the issue

Participation

• I am willing to submit a pull request for this issue.

[caioferrarezi]

Just a little comment, we had this error in production in a component with a await statement, but I couldn't reproduce this in stackblitz yet.