Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mecjos's avatar

Vue 3 + Vue Router 4 _asyncLoader Error

Hi.. There is a weird problem on my routing and component displaying.. When I add component to page router links doesn't work, I get _asyncLoader error, and component isn't appeared in page.. I have been usin vue 2 so far and same structure was working.. I think because of vue 3 or vue router 4 ... My codes are as follows::

<template>
  <q-page class="flex flex-center">
    <q-list class="custom-list">
      <div class="relative-position full-height">
        <feature-button />
      </div>
    </q-list>
    <div class="row q-gutter-x-md justify-between full-width q-px-xs">
      <div class="col-auto relative-position full-height self-center">
        <p class="text-h4">Matölye ile <br/> neler yapabilirim?</p>
      </div>
      <div class="col-8">
        <router-view />
      </div>
    </div>
  </q-page>
</template>

<script>

export default {
  name: 'AppFeatures',
  components: {
    FeatureButton: () => import('components/FeatureButton')
  },
  data () {
    return {
      manufacturingNavi: [
        { route: '/features/manufacturing', img: 'drilling-machine.png', selfClass: 'boxPosition-1 featureNavBox' },
        { route: '/features/sms', img: 'stocks.png', selfClass: 'boxPosition-2 featureNavBox' },
        { route: '/features/ems', img: 'people.png', selfClass: 'boxPosition-3 featureNavBox' },
        { route: '/features/shared-ws', img: 'manu-share.png', selfClass: 'boxPosition-4 featureNavBox' }
      ]
    }
  }
}
</script>

when I add FeatureButton component in page, all other router links gives following error;

TypeError: Cannot read properties of undefined (reading '__asyncLoader')

and in the page where featureButton component inclueded I get following warning ( I don't think it's related with this warning but maybe it can caues).

runtime-core.esm-bundler.js?f781:38 [Vue warn]: Invalid VNode type: undefined (undefined) 
  at <FeatureButton> 

How can i fix this issue? Thank you..

0 likes
3 replies
MohamedTammam's avatar
Level 51
<script>
import { defineAsyncComponent } from 'vue'

export default {
  name: 'AppFeatures',
  components: {
    FeatureButton: defineAsyncComponent(() => import('components/FeatureButton'))
  },
  data () {
    return {
      manufacturingNavi: [
        { route: '/features/manufacturing', img: 'drilling-machine.png', selfClass: 'boxPosition-1 featureNavBox' },
        { route: '/features/sms', img: 'stocks.png', selfClass: 'boxPosition-2 featureNavBox' },
        { route: '/features/ems', img: 'people.png', selfClass: 'boxPosition-3 featureNavBox' },
        { route: '/features/shared-ws', img: 'manu-share.png', selfClass: 'boxPosition-4 featureNavBox' }
      ]
    }
  }
}
</script>

For more details: https://stackoverflow.com/a/68568767

Please or to participate in this conversation.