2

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?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Nate
  • 403
  • 5
  • 18
  • 1
    Vue is trying to recursively use your `SideBar` component since it includes `` (the kebab-cased version of `SideBar`). That probably is not what you want to do – Phil Jul 12 '21 at 09:06

2 Answers2

2

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.

Laurens
  • 2,596
  • 11
  • 21
0

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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Gabriel soft
  • 432
  • 3
  • 7