Strange reactive behavior (5.28.2 or later)

[sinbino]

Describe the bug

In some cases, the reactive is not working properly.
I have provided a link to the reproduced code for the svelte5 REPL, please check it out.
This problem has been happening since 5.28.2 and does not seem to occur in 5.28.1 or earlier.
This may be similar to #15853.

Reproduction

https://svelte.dev/playground/4b1cfa51635243a193a7f76ad7696b17?version=5.30.1

Steps to reproduce the issue:

1. enter text in inputValue1 of store#0.
2. enter text in inputValue2 of store#0.
3. outputValue of store #0 is changes.
4. Press ADD STORE to add store#1.
5. enter text in inputValue1 of store#1.
6. enter text in inputValue2 of store#1.
7. outputValue of store#1 does not change. Is the reactive broken?

The problem does not seem to occur in 5.28.1.
https://svelte.dev/playground/4b1cfa51635243a193a7f76ad7696b17?version=5.28.1

Logs

System Info

System:
    OS: Linux 5.15 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (12) x64 11th Gen Intel(R) Core(TM) i5-11400 @ 2.60GHz
    Memory: 6.78 GB / 15.42 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 22.12.0 - /usr/local/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.9.0 - /usr/local/bin/npm
    pnpm: 10.10.0 - /usr/local/bin/pnpm
  npmPackages:
    svelte: ^5.28.2 => 5.28.2

Severity

blocking an upgrade

[endigo9740]

Hey folks, Chris here from Skeleton. We're seeing similar behavior as well.

See this thread:
skeletonlabs/skeleton#3543 (comment)

To provide some context:

• We use Zag.js to provide the primitives for our components
• Folks are reporting issues with our Tabs component, but only after migrating Svelte (ex: 5.30.1)
• Rolling back to 5.28.6 appears to resolve the issue

Let me be clear that I don't believe Zag to be at fault here - it's just a means to see the issue in play. We shouldn't expect breaking changes from a minor point release of Svelte like this, so something is amiss.

[paoloricciuti]

We shouldn't expect breaking changes from a minor point release of Svelte like this, so something is amiss.

It's obviously not a breaking change, it's just a bug.

However it feels weird because the releases you are referencing didn't touch anything in the reactivity part from what I can see (also those are different versions)...will check later what is going on

[gyzerok]

Our app also got broken after recent update. The reason in our case was that apparently sync flushing changed runtime order of execution.

The following code previously would work:

<script>
helper({
  get bar() { return state.length }
})

const foo = $state([])
</script>

Not sure if that's related, but wanted to share in case it'll help the investigation.

[paoloricciuti]

What would that code do? It seems broken at the JS level

[paoloricciuti]

Btw I'm pretty sure this is a duplicate of this

#15829

Let's keep it open for the moment but I'll keep an eye on it

[gyzerok]

What would that code do? It seems broken at the JS level

Would need to copy to much internal details to give a good idea. And I agree, the order of initialization is incorrect on our side anyway. However before some things were happening in microtasks which are now synchronous and that's why it wasn't a problem for several months, but is a problem now.

[paoloricciuti]

What would that code do? It seems broken at the JS level

Would need to copy to much internal details to give a good idea. And I agree, the order of initialization is incorrect on our side anyway. However before some things were happening in microtasks which are now synchronous and that's why it wasn't a problem for several months, but is a problem now.

It feels weird anyway, if you can provide a reproduction we can take a look

[gyzerok]

It feels weird anyway, if you can provide a reproduction we can take a look

I'll see if I can make it, there is also lexical involved in this code

[endigo9740]

Quick follow up - I ran the same test today for our Tabs component with Svelte version 5.33.10 and the original issue seems to be resolved. I can't vouch for everyone else, but may be worth testing again on your end.

[MrVauxs]

Updating to both 5.33.11 and 5.33.10, I can still replicate this issue with Skeleton components.

[endigo9740]

@MrVauxs we had something similar reported on Discord

When I tested this was in a fresh new project, so I might recommend testing that and copying the tabs directly from the Skeleton docs to replicate. That was working.

So perhaps updating the svelte dependency is not enough? Perhaps is an intersection of a couple dependencies?

[MrVauxs]

I can replicate the issue not happening on a fresh install, but I still cannot find a solution for existing projects. I unfortunately cannot downgrade to 28 due to bits-ui dependency.

However, I have found an interesting quirk to the specific Skeleton Tabs example. It also updates when you change focus, or generally click anywhere else.

chrome_huW48m5zvN.mp4

[endigo9740]

However, I have found an interesting quirk to the specific Skeleton Tabs example. It also updates when you change focus, or generally click anywhere else.

@MrVauxs if you believe that to be a bug on the Skeleton end, file a bug on our side. Let's not trouble the Svelte folks with unrelated issues.