[1.x] Fix "DataCloneError: <Object> could not be cloned" (#1967)

* Fix "DataCloneError: <Object> could not be cloned" * Update changelog
inertiajs · Sep 18, 2024 · 91deb73 · 91deb73
1 parent d32a252
commit 91deb73
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ For changes prior to v1.0.0, see the [legacy releases](https://legacy.inertiajs.
 
 - [Svelte] Add Svelte 5 support ([#1970](https://github.com/inertiajs/inertia/pull/1970))
 - [Svelte] Add Svelte TypeScript support ([#1866](https://github.com/inertiajs/inertia/pull/1866))
+- Fix `DataCloneError: <Object> could not be cloned` ([#1967](https://github.com/inertiajs/inertia/pull/1967))
 - Fix form helper `transform` return type in React adapter ([#1896](https://github.com/inertiajs/inertia/pull/1896))
 - Use updater function in `setData` in `useForm` hook in React adapter ([#1859](https://github.com/inertiajs/inertia/pull/1859))
 - Skip intercepting non-left button clicks on links ([#1908](https://github.com/inertiajs/inertia/pull/1908), [#1910](https://github.com/inertiajs/inertia/pull/1910))

diff --git a/packages/core/src/router.ts b/packages/core/src/router.ts
@@ -32,6 +32,7 @@ import {
 import { hrefToUrl, mergeDataIntoQueryString, urlWithoutHash } from './url'
 
 const isServer = typeof window === 'undefined'
+const cloneSerializable = <T>(obj: T): T => JSON.parse(JSON.stringify(obj))
 
 export class Router {
   protected page!: Page
@@ -484,12 +485,12 @@ export class Router {
 
   protected pushState(page: Page): void {
     this.page = page
-    window.history.pushState(page, '', page.url)
+    window.history.pushState(cloneSerializable(page), '', page.url)
   }
 
   protected replaceState(page: Page): void {
     this.page = page
-    window.history.replaceState(page, '', page.url)
+    window.history.replaceState(cloneSerializable(page), '', page.url)
   }
 
   protected handlePopstateEvent(event: PopStateEvent): void {

diff --git a/packages/vue3/src/useForm.ts b/packages/vue3/src/useForm.ts
@@ -242,7 +242,7 @@ export default function useForm<TForm extends FormDataType>(
     (newValue) => {
       form.isDirty = !isEqual(form.data(), defaults)
       if (rememberKey) {
-        router.remember(cloneDeep(newValue.__remember()), rememberKey)
+        router.remember(newValue.__remember(), rememberKey)
       }
     },
     { immediate: true, deep: true },

diff --git a/packages/vue3/src/useRemember.ts b/packages/vue3/src/useRemember.ts
@@ -1,5 +1,4 @@
 import { router } from '@inertiajs/core'
-import cloneDeep from 'lodash.clonedeep'
 import { isReactive, reactive, ref, Ref, watch } from 'vue'
 
 export default function useRemember<T extends object>(
@@ -18,7 +17,7 @@ export default function useRemember<T extends object>(
   watch(
     remembered,
     (newValue) => {
-      router.remember(cloneDeep(hasCallbacks ? data.__remember() : newValue), key)
+      router.remember(hasCallbacks ? data.__remember() : newValue, key)
     },
     { immediate: true, deep: true },
   )