Console Error when an Inertia link is clicked: Uncaught DOMException: Failed to execute 'replaceState' on 'History' #1652

connecteev · 2023-08-22T04:36:31Z

connecteev
Aug 22, 2023

The following repo from codecourse.com implements infinite scroll using inertia:
https://github.com/codecourse/inertia-infinite-scroll

I started with this repo and was able to get this running: so far so good.

However, when I modify the Index.vue file like so:
(here, I wrapped the contents of the old Index.vue file inside <BlankLayout> tags)

<template>
    <BlankLayout>
        <Head title="Test Infinite Scrolling" />
        <div class="max-w-2xl mx-auto my-12 space-y-12">
            <div v-for="dummyPost in dummyPosts.data" :key="dummyPost.id">
                <h1 class="font-bold text-3xl">{{ dummyPost.id }}: {{ dummyPost.title }}</h1>
                <p class="mt-2 text-lg">{{ dummyPost.teaser }}</p>
            </div>
            <div ref="last" class="-translate-y-32"></div>
        </div>
    </BlankLayout>
</template>

<script setup>
import { Head } from '@inertiajs/vue3';
import BlankLayout from "@/Layouts/BlankLayout.vue";
import { ref } from 'vue';
import { useIntersectionObserver } from '@vueuse/core';
import axios from 'axios';

const props = defineProps({
    dummyPosts: Object
});

const last = ref(null);

const { stop } = useIntersectionObserver(last, ([{ isIntersecting }]) => {
    if (!isIntersecting) {
        return;
    }
    axios.get(`${props.dummyPosts.meta.path}?cursor=${props.dummyPosts.meta.next_cursor}`).then((response) => {
        props.dummyPosts.data = [...props.dummyPosts.data, ...response.data.data];
        props.dummyPosts.meta = response.data.meta;

        if (!response.data.meta.next_cursor) {
            stop();
        }
    })
})
</script>

where resources/js/Layouts/BlankLayout.vue contains:

<template>
    <div>
        <div class="fixed z-50 bottom-0">
            <Link :href="route('test.index')">
                <div class="bottom-0 float-left z-50 my-2 mx-4 px-2 py-1 bg-red-500 text-white text-xs font-bold tracking-wide rounded-lg opacity-30 focus:outline-none">
                    Test page
                </div>
            </Link>
        </div>

        <slot />

    </div>
</template>

<script setup>
import {Link} from '@inertiajs/vue3';
</script>

routes/web.php:

// Test Infinite Scroll with Dummy Posts
Route::get('/infinite_scroll', DummyPostIndexController::class)->name('infinite_scroll');

DummyPostIndexController.php:

namespace App\Http\Controllers;

use App\Http\Resources\DummyPostResource;
use App\Models\DummyPost;
use Illuminate\Http\Request;
use Inertia\Inertia;

class DummyPostIndexController extends Controller
{
    public function __invoke(Request $request)
    {
        //$posts = DummyPost::latest()->cursorPaginate(10);
        $posts = DummyPost::orderBy('id', 'desc')->cursorPaginate(10);

        if ($request->wantsJson()) {
            return DummyPostResource::collection($posts);
        }

        return Inertia::render('DummyPosts/Index', [
            'dummyPosts' => DummyPostResource::collection($posts),
        ]);
    }
}

Now, when I load the /test/infinite_scroll URL and click on the "Test page" button, the link works fine.
If I then scroll down some (to trigger the infinite scroll logic), and then click on the "Test Page" button, the link does not work, and the following error is seen in the console:

runtime-core.esm-bundler.js:221 Uncaught DOMException: Failed to execute 'replaceState' on 'History': #<Object> could not be cloned.
    at C.replaceState (http://[::1]:5173/node_modules/.vite/deps/@inertiajs_vue3.js?v=50d960f3:3818:35)
    at C.saveScrollPositions (http://[::1]:5173/node_modules/.vite/deps/@inertiajs_vue3.js?v=50d960f3:3679:10)
    at C.visit (http://[::1]:5173/node_modules/.vite/deps/@inertiajs_vue3.js?v=50d960f3:3766:89)
    at onClick (http://[::1]:5173/node_modules/.vite/deps/@inertiajs_vue3.js?v=50d960f3:4220:42)
    at callWithErrorHandling (http://[::1]:5173/node_modules/.vite/deps/chunk-J6475X5X.js?v=50d960f3:1565:18)
    at callWithAsyncErrorHandling (http://[::1]:5173/node_modules/.vite/deps/chunk-J6475X5X.js?v=50d960f3:1573:17)
    at HTMLAnchorElement.invoker (http://[::1]:5173/node_modules/.vite/deps/chunk-J6475X5X.js?v=50d960f3:9397:5)

I understand that directly modifying the props is a vue.js component is an anti-pattern, but that is what the original code seems to be doing here: https://github.com/codecourse/inertia-infinite-scroll/blob/main/resources/js/Pages/Posts/Index.vue#L19C9-L19C9

What is the proper way to fix this?

Pinnokkio · 2024-03-17T20:18:24Z

Pinnokkio
Mar 17, 2024

I got the same problem. How to fix this?

[EDIT] Found a way to solve it:

Just make a "correct" clone of your previous pagination data since Vue wrappes it into a proxy.
_.cloneDeep can be imported using import _ from 'lodash'; via lodash package.

this.pagination.data = [..._.cloneDeep(this.pagination.data), ...response.data.data];

instead of

this.pagination.data = [...this.pagination.data, ...response.data.data];

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Console Error when an Inertia link is clicked: Uncaught DOMException: Failed to execute 'replaceState' on 'History' #1652

{{title}}

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Console Error when an Inertia link is clicked: Uncaught DOMException: Failed to execute 'replaceState' on 'History' #1652

connecteev Aug 22, 2023

Replies: 1 comment

Pinnokkio Mar 17, 2024

connecteev
Aug 22, 2023

Pinnokkio
Mar 17, 2024