DOM Exception when trying to set/unset array of objects in Inertia form

[iamohd-zz]

Versions:

• @inertiajs/inertia version: 0.8.6
• @inertiajs/inertia-vue3 version: 0.3.6

Describe the problem:

DOM exception is thrown when trying to set then unset an array of objects in form object.

DOMException: Failed to execute 'replaceState' on 'History': [object Object] could not be cloned.

Steps to reproduce:

Create Inertia form object

data() {
    return {
        form: this.$inertia.form({
             users: [
                 {id: 1, name: 'Benjamin White'},
                 {id: 2, name: 'Dr. Lexi Crooks Sr.'},
                 {id: 3, name: 'Mohammed'},
              ],
        })
    }
}

Now if you try to set users with the following values it will throw an exception

[
    {id: 1, name: 'Benjamin White'},
    {id: 2, name: 'Dr. Lexi Crooks Sr.'},
]

It will throw the following exception

Uncaught (in promise) DOMException: Failed to execute 'replaceState' on 'History': [object Object] could not be cloned.

However, if you set remember attribute in the form to false, this will not happen.

[lucasromanojf]

I have the same. As a temporary workaround, I disabled remember state for the forms:

useForm({ ... }, { remember: false })

[pascut]

Same problem here,

Versions:

@inertiajs/inertia version: 0.8.6
@inertiajs/inertia-vue3 version: 0.3.6

Describe the problem:

DOM exception is thrown when trying to set then unset an array of objects in form object.

DOMException: Failed to execute 'replaceState' on 'History': [object Object] could not be cloned.

I just installed Laravel Jetstream, the issue appears on the api-tokens page.

[dillingham]

confirmed, same as @pascut in jetstream. also reported here https://github.com/laravel/jetstream/issues/739

[reinink]

This has been fixed in #587. Please let me know if this problem persists. 👍

[ordago]

I'm getting the same error with the vue2 adapter

"@inertiajs/inertia": "^0.9.1",
"@inertiajs/inertia-vue": "^0.6.2",