BUG: TypeError: Cannot set property 'asyncFactory' of undefined

[adrianoresende]

The component is loaded even when it was not visible

Code live: https://codesandbox.io/s/6yq314kkp3

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>

    <p v-for="x in 100" :key="x">
      scroll..
    </p>

    <LazyHydrate v-slot="{ hydrated }" when-visible>
      <foo v-if="hydrated"/>
    </LazyHydrate>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import LazyHydrate from 'vue-lazy-hydration'

export default {
  name: 'app',
  components: {
    HelloWorld,
    LazyHydrate,
    Foo: () => import(/* webpackChunkName: "component-foo" */ './components/Foo.vue'),
  }
}
</script>

[maoberlehner]

Hello! Thank you for submitting a bug report. Please add a reproduction link on CodeSandbox or something similar. Thx!

Generally speaking, unfortunately, if you're using a system which uses the Vue template renderer in the background, components are loaded even though they are not visible (but they're still not hydrated / executed). There is a feature request open in the Vue.js repository which might make it possible to change this: https://github.com/vuejs/vue/issues/9847

[adrianoresende]

@maoberlehner https://codesandbox.io/s/6yq314kkp3

[maoberlehner]

Thank you for taking the time to create a CodeSandbox.

This package is not intended to be used with purely client side rendered applications: https://github.com/maoberlehner/vue-lazy-hydration#caveats-1 Please create a Nuxt.js or Gridsome (or similar) based CodeSandbox to replicate the error. Thx!

[maoberlehner]

If you’re searching for a solution for client side rendered applications, you can read the following blog post of mine: https://markus.oberlehner.net/blog/lazy-load-vue-components-when-they-become-visible/