QImg hydration errors in lazy-loaded components

[Tosh79]

Hi everybody,

currently I am evaluating quasar in ssr / pwa mode to be used with contentful cms. Everything is running smooth so far, except the QImg-Component, which generates client hydration errors. I assume it has something to todo with my components being lazy-loaded.

It's quite easy to reproduce the problem.
Step 1: Create two components "Foo.vue" and "Bar.vue", both simply integrating a qImg:
<template> <q-img src="https://placeimg.com/500/300/nature" /> </template>

(Those components are identical. I just created two, to make sure, that there is not obscure double-import-reason for the error).

Step 2: Create a third component or even a page "Home.vue", that integrate these components. "Foo" being normally imported / locally registered, "Bar" being lazy-loaded/registered via defineAsyncComponent():

<template>
  <q-page>
    <foo />
    <bar />
  </q-page>
</template>

<script>
  import { defineAsyncComponent } from "vue";
  import Foo from "src/components/Foo.vue";
  export default {
    name: 'PageHome',
    components: {
      Foo,
      Bar: defineAsyncComponent(() => import("src/components/Bar.vue")),
    },
  };
</script>

Calling this page in an ssr/pwa-context generates following console-warning in the browser twice:

[Vue warn]: Hydration children mismatch in <div>: server rendered element contains fewer child nodes than client vdom. 
  at <QImg src="https://placeimg.com/500/300/nature" > 
  at <Bar> 
  at <AsyncComponentWrapper> 
  at <QPage > 

I don't know, if I am missing something and would really be happy, if someone could help me out.

Best regards!
Tosh

[Divya-Kundra]

@Tosh79 were you able to find a solution for this? Facing similar issue

[Tosh79]

Unfortunately not.