Maximum call stack size exceeded when layout change

vesteves

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 à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?

metalsadman

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.

vesteves

@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.

rstoenescu

@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.

vesteves

@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>

vesteves

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.

No More Posting New Topics!

Maximum call stack size exceeded when layout change