Svelte 5: Why is this object a Proxy only when the `page` field is 1? about svelte HOT 10 CLOSED

The proxy inconsistency has been fixed by #11860.
The fix has been released with [email protected]; installing that in the reproduction will cause the serialization error for every page.

That the error previously was consistent for the first page might have to do with some caching by Tanstack Query.

I outlined out how the error can be dealt with via $state.snapshot and think this issue could be closed.

from svelte.

E.g. here in the page:

let listInput = $derived({
-	pagination,
+	pagination: $state.snapshot(pagination),
	condition,
	orderBy: [order]
});

(There are probably other valid locations, but I think the function does currently not check deeply within the object.)

from svelte.

As soon as the object passes through a property, there might not be a way around that.

from svelte.

Proxies are created dynamically as needed when properties are modified in the tree, so the object structure can change internally.
If you need to make sure there are no proxies, you have to use $state.snapshot.

I would say this is neither a Svelte nor query issue.

from svelte.

@brunnerh but why I'm having issue only when pagination is {"page":1,"size":5}?

And not for page 2, 3, 4 and so on?

Can you suggest a way to fix it?

@brunnerh I tried what you suggested, but it's the same. I updated the question too.

from svelte.

It starts out with a proxy because the object is passed around through props.
The reassignment then removes this again (there might actually be a bug here if it does not get added back on modification - #11859).

There are various ways to avoid the issue, like not binding objects (<Pagination bind:pagination />) but rather use primitives (<Pagination bind:page bind:size />) or use events instead of bindings.

But if you have objects that are involved with state, the only safe thing to do is using $state.snapshot or manually creating a plain object.

from svelte.

But if you have objects that are involved with state, the only safe thing to do is using $state.snapshot or manually creating a plain object.

Can I ask you how?

from svelte.

@brunnerh even if I use this:

<Pagination {pagination} onchange={(value) => pagination = value} />

The first one is a Proxy!

from svelte.

E.g. here in the page:

let listInput = $derived({
-	pagination,
+	pagination: $state.snapshot(pagination),
	condition,
	orderBy: [order]
});

(There are probably other valid locations, but I think the function does currently not check deeply within the object.)

This is actually working for me

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

Consider that sometimes stackblitz doesn't recompute.

That said why are you getting this from the props of a +page.svelte? You can't receive other props than data, form and children...i think the fact that is a proxy is because is the default value of a prop

from svelte.

pagination: $state.snapshot(pagination)

Yeah. This works.

why are you getting this from the props of a +page.svelte?

Just an example. My real code is more complex.

from svelte.