Failed to execute 'replaceState' on 'History': #<Object> with Sortable.js

Versions:

• vue version 3.0.5
• @inertiajs/inertia version 0.9.0
• @inertiajs/inertia-vue3 version 0.4.0

Describe the problem:

Similar to here, I have this problem when using Sortable.js / VueDraggable: https://github.com/inertiajs/inertia/issues/730

app.js?id=f8cbfda01b9810c19e0f:2 DOMException: Failed to execute 'replaceState' on 'History': #<Object> could not be cloned.
    at e.n.replaceState (/js/app.js?id=f8cbfda01b9810c19e0f:2:28191)
    at e.n.saveScrollPositions (/js/app.js?id=f8cbfda01b9810c19e0f:2:21087)
    at e.n.visit (/js/app.js?id=f8cbfda01b9810c19e0f:2:25155)
    at onClick (/js/app.js?id=f8cbfda01b9810c19e0f:2:11402)
    at At (/js/app.js?id=f8cbfda01b9810c19e0f:2:657430)
    at Pt (/js/app.js?id=f8cbfda01b9810c19e0f:2:657508)
    at HTMLAnchorElement.n (/js/app.js?id=f8cbfda01b9810c19e0f:2:708099)

Steps to reproduce:

Sort elements with sortable.js or Vue draggable and click on any Inertia link.

Similar to the linked thread, I can fix it by modifying the minified javascript file with this:

n.replaceState=function(e){this.page=e,e=JSON.parse(JSON.stringify(e)),window.history.replaceState(e,"",e.url)}

[SimonJ]

I had the same issue. I fixed it by adding

onMounted(() => {
  JSON.parse(JSON.stringify(this.yourDATA))
})

[grantholle]

After lots of work, I’ve found out that if you try to modify a prop directly in a component, it will cause this error. This tripped me up with object references (oh javascript). Cloning the prop I needed to do work on solved me issues.