🐛 BUG: Astro + Svelte: two separate Svelte buttons registering a single click

[endymion1818]

What version of astro are you using?

0.21.13

What package manager are you using?

yarn

What operating system are you using?

MacOS

Describe the Bug

I'm using Svelte components in a page generated by Astro. In Astro I map over some data and render the same component multiple times. It's a button which passes some state to a Svelte store.

Expected behaviour:
Clicking one of the buttons adds one item to the cart

Actual behaviour:
Clicking one of the buttons results in all of the items being added to the cart

⚠️ https://astro.new seems to be broken

Link to Minimal Reproducible Example

Working example of the behaviour: https://deploy-preview-5--naturally-nude-artisanal.netlify.app/shop/jopulence-balm/
Code repo: https://github.com/endymion1818/nna-fe/pull/5
Proof it's not Svelte or my implementation: https://svelte.dev/repl/b975aea90f784d728c08ea1c9e42044e?version=3.46.3
StackOverflow question: https://stackoverflow.com/questions/70917148/astro-svelte-two-separate-buttons-registering-a-single-click

[jagu-sayan]

I got the same issue :)

[tony-sull]

Looks like the issue is that a new UID isn't being created for the astro-root used to hydrate each AddToCart component. The client:load hydration logic is actually included twice (once for each component), but since the UID is duplicated it ends up leading to some weird behavior once the Svelte component is rehydrated

[ClintH]

This appears to be happening with Lit components too. Running the dev server, every now and then the component is rendered twice.