Maximum call stack size exceeded when layout change



  • Hi ppl,

    When I change the routes and is necessary to change the layout too, I’m getting this error:
    Captura de Tela 2019-04-11 às 20.33.23.png

    This is a small part of my routes to show you the scenery:

    const routes = [
      {
        path: '/admin',
        component: () => import('layouts/Admin.vue'),
        children: [
          {
            path: '',
            component: () => import('pages/admin/orders/Index.vue')
          }
        ]
      },
      {
        path: '/',
        component: () => import('layouts/Client.vue'),
        children: [
          {
            path: '',
            component: () => import('pages/Index.vue')
          }
        ]
      }
    ]
    
    // Always leave this as last one
    if (process.env.MODE !== 'ssr') {
      routes.push({
        path: '*',
        component: () => import('pages/Error404.vue')
      })
    }
    
    export default routes
    
    

    I have no idea whats going on. Im thinking to remove this 2 layouts and create only one to stop this error.

    Any ideas about what can I do?



  • there’s nothing wrong with your route config, on the stack it seem like there’s an error in your ErrorBag (vee-validate?) something, you should look into the vue files on the route that the error appears.



  • @metalsadman thx 4reply.
    It’s always happening when I am in a route that have a layout called Admin and I change to any other route that have a layout called Client.

    You can check here:
    http://delivery.acefactory.com.br/#/admin/products
    Navigate in /admin/products, /admin/create, /admin/orders… it will work fine.

    Now, copy and past in same tab-browser it and check the console:
    http://delivery.acefactory.com.br/#/

    After it all, do a refresh in page and keep navigate in /orders, /account, /account/create… it will work too.


  • Admin

    @vesteves I’ve just done a simple test, both for v0.17 and v1.0. Navigating to/from routes with different layouts doesn’t trigger any issues. It means you have a bug in your app code. The issue is not related to Quasar.



  • @rstoenescu thx 4reply
    I also believe it’s not a framework issue.

    It’s the Admin’s layout and Client’s layout code. Can u help me to investigate?

    <template>
      <q-layout view="hHh LpR fFf">
        <q-layout-header>
          <q-toolbar color="primary">
            <q-toolbar-title>
              Delivery
            </q-toolbar-title>
            <q-btn
              flat
              round
              dense
              to="/admin/orders"
              :icon="hasNotification ? 'far fa-bell' : 'far fa-bell-slash'"
              :class="{
                'animate-blink': hasNotification
              }"
            />
            <q-btn @click="drawer = !drawer" flat round dense icon="menu" />
          </q-toolbar>
        </q-layout-header>
        <q-page-container>
          <router-view />
        </q-page-container>
        <q-fab
          class="fixed"
          style="right: 18px; bottom: 18px"
          color="primary"
          direction="up"
        >
          <q-fab-action
            color="primary"
            @click.prevent="createStatus"
            icon="watch_later"
          >
            <q-tooltip anchor="center left" self="center right" :offset="[20, 0]">Criar Status</q-tooltip>
          </q-fab-action>
    
          <q-fab-action
            color="primary"
            @click.prevent="createCategory"
            icon="table_chart"
          >
            <q-tooltip anchor="center left" self="center right" :offset="[20, 0]">Criar Categoria</q-tooltip>
          </q-fab-action>
    
          <q-fab-action
            color="primary"
            @click.prevent="createProduct"
            icon="add_shopping_cart"
          >
            <q-tooltip anchor="center left" self="center right" :offset="[20, 0]">Criar Produto</q-tooltip>
          </q-fab-action>
    
          <q-fab-action
            color="primary"
            @click.prevent="createUser"
            icon="person"
          >
            <q-tooltip anchor="center left" self="center right" :offset="[20, 0]">Criar Administrador</q-tooltip>
          </q-fab-action>
        </q-fab>
    
        <q-layout-drawer v-model="drawer" side="right">
          <q-list highlight>
            <q-item to="/admin/categories">Listar Categorias</q-item>
            <q-item to="/admin/orders">Listar Pedidos</q-item>
            <q-item to="/admin/products">Listar Produtos</q-item>
            <q-item to="/admin/status">Listar Status</q-item>
            <q-item to="/admin/settings">Configuração</q-item>
            <q-item>Logout</q-item>
          </q-list>
        </q-layout-drawer>
      </q-layout>
    </template>
    
    <script>
    export default {
      name: 'Admin',
      data () {
        return {
          drawer: false,
          hasNotification: true
        }
      },
      methods: {
        createCategory () {
          this.$router.push(`/admin/categories/create`)
        },
        createProduct () {
          this.$router.push(`/admin/products/create`)
        },
        createUser () {
          this.$router.push(`/admin/create`)
        },
        createStatus () {
          this.$router.push(`/admin/status/create`)
        }
      }
    }
    </script>
    
    <style>
    </style>
    
    
    <template>
      <q-layout view="hHh LpR fFf">
        <q-layout-header>
          <q-toolbar color="primary">
            <q-toolbar-title>
              Delivery
            </q-toolbar-title>
            <q-btn
              flat
              round
              dense
              to="/"
              :icon="hasNotification ? 'far fa-bell' : 'far fa-bell-slash'"
              :class="{
                'animate-blink': hasNotification
              }"
            />
            <q-btn @click="drawer = !drawer" flat round dense icon="menu" />
          </q-toolbar>
        </q-layout-header>
        <q-page-container>
          <router-view />
        </q-page-container>
        <q-fab
          class="fixed"
          style="right: 18px; bottom: 18px"
          color="primary"
          direction="up"
        >
          <q-fab-action
            color="primary"
            to="/"
            icon="add_shopping_cart"
          >
            <q-tooltip anchor="center left" self="center right" :offset="[20, 0]">Novo Pedido</q-tooltip>
          </q-fab-action>
        </q-fab>
    
        <q-layout-drawer v-model="drawer" side="right">
          <q-list highlight>
            <q-item to="/account/create">Criar Conta</q-item>
            <q-item to="/account">Minha Conta</q-item>
            <q-item to="/orders">Meus Pedidos</q-item>
            <q-item>Logout</q-item>
          </q-list>
        </q-layout-drawer>
      </q-layout>
    </template>
    
    <script>
    export default {
      name: 'Client',
      data () {
        return {
          drawer: false,
          hasNotification: false
        }
      },
      methods: {}
    }
    </script>
    
    <style>
    </style>
    
    


  • Omg… I found the problem: it is happening because vee-validate has having trouble with quasar:
    https://github.com/baianat/vee-validate/issues/1980
    Thx @metalsadman for the hint… it helped me so much to find the problem.
    I don’t know yet how to solve, but I can stay watching this thread in github.


Log in to reply