[Vuejs]-What causes this "maximum call stack size exceeded" error?

by

0👍

✅

As comments have mentioned previously, the error usually occurs when having an infinite loop.
As Kissu pointed out this can easily happen if you have an event that is emitted to a parent component which then changes data that is passed as props to a child component which then triggers an event to the parent and so on.

In the code you showed I can’t really find any loops, they might be in the parts you omitted.

Edit:
The infinite loop could actually be caused by the naming of your component.
You’re using <datepicker ...> inside Datepicker.vue without registering the Datepicker of vue3-datepicker there explicitly.
That probably causes vue to recursively try to mount the component in itself causing the maximum stack trace error, but that’s just a guess.

But there’s a couple issues in your code still.

First off:

<template>
  <datepicker
      @selected="handleSelect" // <-- according to the docs there are no events that the datepicker emits
      v-model="dateSelected" 
      :upper-limit="picked_to" // <-- where does the picked_to value come from?
      :lower-limit="picked_from" // <-- where does the picked_from value come from?
      class="datepicker text-center" />
</template>

<script>
    import { ref } from 'vue';
    export default {
        setup() {
        const dateSelected = ref(new Date());
        return {dateSelected}
        },

        // do not mix options & composition api
        methods: {
           handleSelect() {
             this.$emit('setDate')
           }
        }
    }
</script>

You’re mixing options and composition API, which is never a good idea.

There’s also a couple values that seemingly come from nowhere and you’re listening to a @selected event from the datepicker, which according to the docs doesn’t exist, so you’ll have to watch for changes in the selected date yourself.

The same component in the composition API would look like this:

<template>
  <Datepicker v-model="initialDate" class="datepicker text-center" />
</template>

<script>
import Datepicker from "vue3-datepicker";
import { ref, watch } from "vue";

export default {
  components: { Datepicker },
  setup(props, { emit }) {
    const initialDate = ref(new Date());

    watch(initialDate, (newDate) => {
      emit("setDate", newDate);
    });

    return { initialDate };
  },
};
</script>

I tried to recreate the example you gave in a sandbox and I do not encounter any infinite loop issues.

You might wanna check it out and compare with your code and possibly fix all the other issues first and see if that helps your situation 🙂

Leave a comment