sveltees6-proxysvelte-5

Why is this object a Proxy only when the page field is 1?

Steps to reproduce:

  1. Open the reproduction

  2. Open the browser console

  3. When the project starts it will errors with:

    Uncaught (in promise) DOMException: Failed to execute 'put' on 'IDBObjectStore': #<Object> could not be cloned.

    image

    This is happening because IndexedDB cannot serialize and persist a Proxy object which is pagination in this case.

    But...

  4. If you click on "Next" button the pagination changes from {"page":1,"size":5} to {"page":2,"size":5} and IndexedDB persists the object with no issues!

  5. Even stranger: if you click on the "Previous" button it changes from page:2 to page:1 and the error is here again!

image

Why the first page is a Proxy object and the following pages not?

Solution

  • Its not strange or wierd at all!

    As mentioned in my comment, svelte 5 changed the way reactivity works using signals. In svelte 5 reactivity is now nested by default using proxy's.

    Whats happening inside Pagination.svelte, is that you defined a bindable prop

    let {
    conditions,
    pagination = $bindable()
}: Props = $props();

    If you do a console log just underneath this, you will see that pagination gets wrapped inside a proxy.

    The library you using (@tanstack/svelte-query) is probaly not compatiable yet with svelte 5

    The following code is why initialy the pagination property is an proxy, but after changing page its not anymore.

    You are overwriting the entire object, instead of just updating its properties.

    // Dont do this in svelte 5, this causes it to lose its `proxied` state.
pagination = { ...pagination, page: pagination.page + 1 };

    That was svelte 4's way of telling that something changed. In svelte 5 this will become

    // Do this in svelte 5
pagination.page = pagination.page + 1;

    Using the "old" svelte 4 method will not properly propagate changes through your app in svelte 5, so make sure you update the object properties instead of redefining the entire object.