Uncaught (in promise) TypeError: Cannot read property 'catch' of undefined

user_14094807 0
Viewed 2420

I am trying to use vue3.0.0 lazy loading in component but getting some warning. I get this error when i want to get that specific component inside parent component. I mean as i click to show the child component i amm gettign following error. Under the error i've added my code. please help me. I am not very expert in.

runtime-core.esm-bundler.js?5c40:38 
[Vue warn]: Unhandled error during execution of setup function 
  at <AsyncComponentWrapper key=0 > 
  at <Profile onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > > 
  at <RouterView> 
  at <App>
runtime-core.esm-bundler.js?5c40:38 
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <AsyncComponentWrapper key=0 > 
  at <Profile onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > > 
  at <RouterView> 
  at <App>

This error also

runtime-core.esm-bundler.js?5c40:2492 
Uncaught (in promise) TypeError: Cannot read property 'catch' of undefined
    at load (runtime-core.esm-bundler.js?5c40:2492)
    at setup (runtime-core.esm-bundler.js?5c40:2574)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:155)
    at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:7161)
    at setupComponent (runtime-core.esm-bundler.js?5c40:7117)
    at mountComponent (runtime-core.esm-bundler.js?5c40:5115)
    at processComponent (runtime-core.esm-bundler.js?5c40:5090)
    at patch (runtime-core.esm-bundler.js?5c40:4684)
    at patchBlockChildren (runtime-core.esm-bundler.js?5c40:4999)
    at patchElement (runtime-core.esm-bundler.js?5c40:4960)

My code is like

<template>
  <div class="profile">
      <button @click="show = true"> show lazy loading</button>
      <Lazy v-if="show" />
  </div>
</template>

<script>
import { defineAsyncComponent, ref } from 'vue'

const Lazy = defineAsyncComponent(() => {
  import('../../components/frontend/Lazy.vue')
})
export default {
  components: {
    Lazy
  },
  setup(){
    const show = ref(false)
    return { show }
  }

}
</script>

I am also using lazy loading in route level

  {
    path: '/profile/:id',
    name: 'Profile',
    component: () => import('../views/frontend/Profile.vue')
  }
vuejs3 vue.js lazy-loading
1 Answers

defineAsyncComponent's callback needs to return a Promise of the imported component definition, but it currently returns nothing:

const Lazy = defineAsyncComponent(() => {
  import('../../components/frontend/Lazy.vue')
  // ❌ returns nothing
})

You could either add the return statement in the callback:

const Lazy = defineAsyncComponent(() => {
  return import('../../components/frontend/Lazy.vue')
})

...or remove the curly brackets for an implicit return:

const Lazy = defineAsyncComponent(() => import('../../components/frontend/Lazy.vue'))
user_62771510
Related