Nuxt Maximum call stack size exceeded

Question

I tried to set the interval for the function to delete it when the component will be destroyed but get this error. And can't find any solution for this.

My interval function:

<script>
export default {
  data: () => ({
    ordersInterval: null,
  }),

  async fetch() {
    const data = await this.$axios.post(`${this.apiURL}orders`, {
      per_page: this.$store.state.pagination.per_page,
      page: this.$store.state.pagination.current_page,
    })
    this.orders = data.data.data
    this.$store.dispatch('changePaginationData', {
      paginationData: data.data.meta,
    })
    this.ordersInterval = setInterval(() => {
      this.filterOrders()
    }, 10000)
  },
}
</script>

How can I fix this error?

Generally call stack exceptions are called when you have some kind of uncontrolled recursion in your code. Try to find it. It might not be in this code you have shown — Martin Kumecký, Aug 10 '21 at 09:04
It is in this code. If I set just setInterval() without variable it works fine — 10k20, Aug 10 '21 at 09:09
This one is indeed some lifecycle or some infinite loop issue usually. — kissu, Aug 10 '21 at 12:05

score 0 · Answer 1 · answered Aug 10 '21 at 10:11

ESlint is complaining and marking it as an error.
It's probably because fetch() needs to know when the fetching is done at some point, for helpers like $fetchState.pending especially.

I've used a setInterval in some of my code but it's called on an event. You could eventually have a watcher and call the setInterval when it's true (toggling it in your fetch() hook).

If you can, try to use websockets or a system a bit more flexible than polling.
Polling can be tricky to write also (with this), here is a good answer on how to to write it: https://stackoverflow.com/a/43335772/8816585

Nuxt Maximum call stack size exceeded

1 Answers1