CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Nate
Nate

Reputation: 413

Vue.js Error in nextTick: "RangeError: Maximum call stack size exceeded" & RangeError: Maximum call stack size exceeded

I am creating a SPA in Vue.js using a template.

I created a side bar component and importing it to a view where the side bar will be showing. When I add the side bar to the component I will encounter the following errors.

RangeError: Maximum call stack size exceeded

[Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded"

I have tried the solution stated on this Stack Overflow post, but it doesn't work on my side.

Here is the sample code of my Sidebar.vue:

<template>
  <side-bar>
    <template slot="links">
      <side-bar-item
        :link="{
          name: 'Home',
          icon: 'ni ni-shop',
          path: '/widgets'
        }"
      ></side-bar-item>
    </template>
  </side-bar>
</template>

<script>
  export default {
    name: "SideBar"
  };
</script>

And I am trying to import my sidebar to the Dashboard.vue page.

<template>
  <div>
    <SideBar />
  </div>
</template>

<script>
  import SideBar from "@/components/SideBar.vue";

  export default {
    name: "Dashboard",
    components: {
      SideBar
    }
  };
</script>

How can I fix it?

Upvotes: 2

Views: 6024

Answers (2)

Gabriel soft
Gabriel soft

Reputation: 563

This comes as a result of naming the file you intend to import with the same name as the one you’re using. These would cause a recursion, leading to a maximum runtime error.

Upvotes: 0

Laurens
Laurens

Reputation: 2607

Your problem is recursion! In Sidebar.vue, you are importing <side-bar> again on line 2 (itself), if a component wants to render itself as a child, and that child also wants to render itselfs as a child and so on.. You are going to exceed the maximum call stack size.

Upvotes: 2

Related Questions