DOMException: Failed to execute 'replaceState' on 'History': #<Object> could not be cloned

Versions:

• @inertiajs/inertia version: 0.9.2
• @inertiajs/inertia-vue3 version: 0.4.7

Describe the problem:

I am using Vue 3 Draggable package. In the event of dragging an element, I execute Inertia.put method and pass some data to Laravel. This is where this exception occurs.

Steps to reproduce:

For example, in Laravel pass a project with a list of columns to your view. Then use the Draggable component as following:

<Draggable
    v-model="project.columns"
    group="columns"
    item-key="id"
    @end="onColumnPositionChanged"
>
    <template #item="{element: column}">
        <KanbanColumn
             :column="column"
             :key="column.id"
         />
    </template>
</Draggable>

In event of onColumnPositionChanged, trigger Inertia.put method

const onCardPositionChanged = () => {
    Inertia.put('/some-route');
};

[coclav]

I pulled my hair on this one for months. My solution was similar to this https://github.com/inertiajs/inertia/issues/775#issuecomment-876030983 above

Spoiler : the problem was because a “Proxy” made its way to my state.

So I had to find out what couldn’t be cloned ?!

put a breakpoint there… and started to dig into the e object until i saw this

I tried to “unProxy” the value with JSON.parse(JSON.stringify(formField)), and this solved the issue.

[ewhicher]

I’m just going to pop this on here: https://web.dev/structured-clone/

It digs in to the new structuredClone() api and lists some of the shortcomings of the JSON.parse(JSON.stringify()) approach.

For anyone running into issues it might turn out to be a better option, or you might find you need a library like Lodash.

Hopefully this is helpful to anyone who has scrolled this far with no success!