[5.55.3] `derived_inert` warnings

[henrykrinkle01]

Describe the bug

I got a bunch of this warning when updated Svelte to 5.55.3. This is caused by some weird interactions between a couple of shadcn-svelte, bits-ui, svelte-sonner components and page.url. Created a reproduction as requested by @dummdidumm.

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-k5x5sbng?file=src%2Froutes%2F%2Bpage.svelte,src%2Froutes%2FChild.svelte,src%2Froutes%2F%2Blayout.svelte

Logs

[svelte] derived_inert Reading a derived belonging to a now-destroyed effect may result in stale values

System Info

svelte@5.55.3
kit@2.57.1

Severity

annoyance

[einarpersson]

I see this as well. This is blocking as it breaks my app (I see stale values).

Reverting to 5.55.2 resolves it.

[dummdidumm]

Can you provide a reproduction where you see stale values? Does using $effect.root or having the derived created outside of an effect as suggested here help?

[einarpersson]

Can you provide a reproduction where you see stale values? Does using $effect.root or having the derived created outside of an effect as suggested here help?

Hi! I do not have the bandwidth to create a repro atm unfortunately.

I do want to say that the whole error message is nonsensical for me. I am saying thid as someone who have used svelte and sveltekit for years but not have the deep knowledge of the inner workings which seems to be required nowadays.

As for the warning and its explanation:

A $derived value created inside an effect...

Inside an effect? Does effect here mean $effect or something in a wider sense, and if so what? I definitely do not create a $derived in an $effect and I didn't even know it was a thing. Therefore it's hard for me to move it outside.

It would be easier to pin down if the warning pointed at the code causing the warning. But at first glance (I'll check more tomorrow) it seemed to just point at sveltekit remote function internals.

[danieldiekmeier]

I'm getting stale values when using a SvelteKit remote function. It doesn't happen every time, but whenever the warning appears in the console, from then on, the DOM will no longer update.

My component basically looks like this:

<script>
  import * as RemoteGoal from "$fns/goal.remote"

  const { goal } = $derived(await RemoteGoal.currentGoal())
</script>

{goal.books_amount}

<GoalUpdateForm />

The GoalUpdateForm calls the remote form RemoteGoal.update, which look like this:

// goal.remote.ts

export const currentGoal = query(async () => {
  const goal = await GoalRepo.currentGoal()
  return { goal }
})

export const update = form(goalSchema, async (data) => {
  await GoalRepo.update(data)
  await currentGoal().refresh()
})

I can only reproduce this if I have the component on two different routes. If I open the first route and DON'T interact, then go to the second route and call the remote form, I get the warning in the console and the DOM doesn't update. From then on, the derived is stuck.

Since the warning mentions the derived, I even tried simplifying it so that I don't call $derived at all. But the error is the same:

<script>
  import * as RemoteGoal from "$fns/goal.remote"
</script>

{(await RemoteGoal.currentGoal()).goal.books_amount}

<GoalUpdateForm />

(Since this code doesn't contain $derived or $effect at all, I must agree with @einarpersson that the error message is not very helpful in figuring out what is wrong in the code.)

Downgrading to 5.55.2 fixes it for me as well.

[henrykrinkle01]

It's hard to test for stale values specifically attributed to this warning because there are other bugs introduced in 5.55.3 that break my app entirely. It would require me to rewrite a significant portion of it to work around the bugs (related to @const). Everything was working in 5.55.2 so I'd rather downgrade and wait for a fix.

I don't have any $effect or $effect.root in the code that I own, nor do I see the needs to use them. There could be in libraries that I use, especially bits-ui. At first I thought the bug was caused by @const or something else, but then I couldn't reproduce it in a fresh project. Then I remembered that something similar happened before: an unrelated component in the layout that had $effect in its internal broke the app. Last time it was Avatar, which I replaced. Now it's Toaster from svelte-sonner.

Also, I have fork and preload-data disabled to avoid bugs related to them. Dealing with other async bugs is hard enough. So the warnings I got weren't related to navigation.

[einarpersson]

I'm getting stale values when using a SvelteKit remote function. It doesn't happen every time, but whenever the warning appears in the console, from then on, the DOM will no longer update.

My component basically looks like this:

<script> import * as RemoteGoal from "$fns/goal.remote" const { goal } = $derived(await RemoteGoal.currentGoal()) </script>

{goal.books_amount}

The GoalUpdateForm calls the remote form RemoteGoal.update, which look like this:

// goal.remote.ts

export const currentGoal = query(async () => {
const goal = await GoalRepo.currentGoal()
return { goal }
})

export const update = form(goalSchema, async (data) => {
await GoalRepo.update(data)
await currentGoal().refresh()
})

I can only reproduce this if I have the component on two different routes. If I open the first route and DON'T interact, then go to the second route and call the remote form, I get the warning in the console and the DOM doesn't update. From then on, the derived is stuck.

Since the warning mentions the derived, I even tried simplifying it so that I don't call $derived at all. But the error is the same:

<script> import * as RemoteGoal from "$fns/goal.remote" </script>

{(await RemoteGoal.currentGoal()).goal.books_amount}

(Since this code doesn't contain $derived or $effect at all, I must agree with @einarpersson that the error message is not very helpful in figuring out what is wrong in the code.)

Downgrading to 5.55.2 fixes it for me as well.

This resembles my setup and matches the behaviour I am seeing.

[dummdidumm]

should be better now but still seeing it on the original reproduction

[danieldiekmeier]

With v5.55.4, I'm not able to reproduce my problem with remote functions anymore. Thank you for the quick fix!