"Error: Maximum call stack size exceeded". Any help please?

Hi,

I have a SPA CRUD by Laravel+Vue 3+Inertia for managing categories in a blog admin panel. and by using modal windows, all 4 operations happen inside one page. After I add Update modal I got this error:

Uncaught (in promise) RangeError: Maximum call stack size exceeded

My code: (look at Update section)

<script setup>
import { ref, watch } from 'vue';
import BreezeButton from '@/Components/Button.vue';
import BreezeInput from '@/Components/Input.vue';
import BreezeLabel from '@/Components/Label.vue';
import AdminPanelLayout from '@/Layouts/Adminpanel.vue';
import Pagination from '@/Components/Pagination.vue';
import throttle from 'lodash/throttle';
import { Head, Link, useForm} from '@inertiajs/inertia-vue3';
import { Inertia } from '@inertiajs/inertia'
import { EyeIcon, PencilSquareIcon, TrashIcon } from '@heroicons/vue/24/solid'

let props = defineProps({
    errors: Object,
    isSlugExisted: Boolean,
    categories: Object,
});

const slug = ref('');

//Create
const newCatForm = useForm({
    name: '',
    slug: slug,
    parent_id: '',
});

let isNewCatOpen = ref(false);

const submitMakeNewCat = () => {
    newCatForm.post(route('admin.categories.store'), {
        onFinish: () => {
            newCatForm.name = '';
            newCatForm.slug = '';
            newCatForm.parent_id = '';
        },
    });
    isNewCatOpen.value = false;
}


//Update
const editCatForm = useForm({ // When I comment these five lines, error is gone.
    name: '',
    slug: slug,
    parent_id: '',
});

let isEditCatOpen = ref(false);

const submitEditCat = (id) => {
    editCatForm.put(route('admin.categories.update', id), {
        onFinish: () => {
            editCatForm.name = '';
            editCatForm.slug = '';
            editCatForm.parent_id = '';
        },
    });
    isEditCatOpen.value = false;
}



//Delete
const deleteCategory = (id) => {
    Inertia.delete(route('admin.categories.destroy', id), {
        onBefore: () => confirm('Are you sure you want to delete this category?'),
        preserveState: true,
        preserveScroll: true,
    })
}


// Checking slug
watch(slug, throttle((newSlug) => {
    Inertia.visit(route('admin.categories.index'), {
        method: 'post',
        data: {slugForCheck: newSlug},
        only: ['isSlugExisted'],
        preserveState: true,
        preserveScroll: true,
    });

}, 300));


</script>

<template>

I think it's because I used "useForm" too much times, but I need it for both Create and Edit and I can't use "Inertia.post" for one of them.

I searched a lot, I found out it's about memory limits (http://net-informations.com/js/err/range.htm) but all these stuff are high level tech and I'm a junior developer. I don't know how to fix this.

Thank you for your help.

LaryAI

3 years ago

Best Answer

Level 58

The error "Maximum call stack size exceeded" is usually caused by an infinite loop or a function that calls itself too many times. In this case, it seems that the issue is caused by the slug ref being used in both the newCatForm and editCatForm objects.

To fix this, you can create a separate slugEdit ref for the editCatForm object and use it instead of the slug ref.

Here's an example of how you can modify the code:

//Create
const newCatForm = useForm({
    name: '',
    slug: '',
    parent_id: '',
});

let isNewCatOpen = ref(false);

const submitMakeNewCat = () => {
    newCatForm.post(route('admin.categories.store'), {
        onFinish: () => {
            newCatForm.name = '';
            newCatForm.slug = '';
            newCatForm.parent_id = '';
        },
    });
    isNewCatOpen.value = false;
}


//Update
const slugEdit = ref('');
const editCatForm = useForm({
    name: '',
    slug: slugEdit,
    parent_id: '',
});

let isEditCatOpen = ref(false);

const submitEditCat = (id) => {
    editCatForm.put(route('admin.categories.update', id), {
        onFinish: () => {
            editCatForm.name = '';
            editCatForm.slug = '';
            editCatForm.parent_id = '';
        },
    });
    isEditCatOpen.value = false;
}

// Checking slug
watch(slug, throttle((newSlug) => {
    Inertia.visit(route('admin.categories.index'), {
        method: 'post',
        data: {slugForCheck: newSlug},
        only: ['isSlugExisted'],
        preserveState: true,
        preserveScroll: true,
    });

}, 300));

watch(slugEdit, throttle((newSlug) => {
    Inertia.visit(route('admin.categories.index'), {
        method: 'post',
        data: {slugForCheck: newSlug},
        only: ['isSlugExisted'],
        preserveState: true,
        preserveScroll: true,
    });

}, 300));

By creating a separate slugEdit ref for the editCatForm object, you can avoid the infinite loop caused by the slug ref being used in both objects.

Please or to participate in this conversation.