QTabs error on mode SSR & Safari

Raymond

Hello,

Please help about this case in QTabs. I got something wrong when i using QTabs on SSR Mode on Safari. I got this message on console

[Vue warn]: Error in nextTick: "TypeError: undefined is not an object (evaluating 'nodeOps.tagName(elm).toLowerCase')"

This is my source code

<div class="promotions">
    <q-tabs />
</div>

import {
  QTabs
} from 'quasar'

components: {
    QTabs
}

This code works on Chrome, but not work in Safari.
Please help anyone can give some explanation or tell me whats wrong with QTabs SSR Safari or wrong with my code

Raymond

After trying more than hour, this QTabs bug in SSR Mode on Safari. That message make all component stopped and not showing, after i remark that, all component works…
Please help anyone…

rstoenescu

@Raymond add QTab/QRouteTab into your QTabs, otherwise what’s the point of rendering that?

Raymond

@rstoenescu I just debug each component, because i got that message at whole page. But nevermind, i solved this case, i got bug at one variable at “await” from server, so that object is undefined.

Thanks anyway…

Raymond

Hi @rstoenescu, after i trying again in another case i got this message. Please try in your project and run on Safari using SSR mode (quasar dev -m ssr)

layouts/Navbar/Test.vue

<template>
  <q-toolbar class="bg-purple text-white shadow-2 rounded-borders">
    <q-tabs v-model="tab" shrink>
      <q-tab :ripple="false" name="mails" icon="mail" label="Mails" />
      <q-tab :ripple="false" name="alarms" icon="alarm" label="Alarms" />
      <q-tab :ripple="false" name="movies" icon="movie" label="Movies" />
    </q-tabs>
  </q-toolbar>
</template>

<script>
export default {
  name: 'Test',
  data () {
    return {
      tab: ''
    }
  }
}
</script>

layouts/TestLayout.vue

<template>
  <q-layout view="hHh Lpr fFf"> <!-- Be sure to play with the Layout demo on docs -->
    <q-header class="bg-white">
      <test />
    </q-header>
    <q-page-container>
          <router-view/>
    </q-page-container>
  </q-layout>
</template>

<script>
export default {
  name: 'TestLayout',
  components: {
    Test: () => import('@/layouts/Navbar/Test.vue')
  },
  data () {
    return {
      leftDrawer: true
    }
  }
}
</script>

pages/TestPage.vue

<template>
  <q-page padding>
    Test
  </q-page>
</template>

<script>
export default {
  name: 'TestPage'
}
</script>

quasar.conf.js, i add this

cfg.resolve.alias = {
     ...cfg.resolve.alias,
     '@': path.resolve(__dirname, './src')
}

also using framework: { all: ‘auto’ }

routes.js

{
    path: '/test',
    component: () => import('layouts/TestLayout.vue'),
    children: [
      { path: '/test', component: () => import('pages/TestPage.vue') }
    ]
  }

[Error] [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
[Error] [Vue warn]: Error in nextTick: "TypeError: undefined is not an object (evaluating 'nodeOps.tagName(elm).toLowerCase')"

Please help, whats wrong with my code.

No More Posting New Topics!

QTabs error on mode SSR & Safari