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

【问题标题】：Uncaught (in promise) TypeError: Cannot read property 'catch' of undefinedUncaught (in promise) TypeError: Cannot read property 'catch' of undefined
【发布时间】：2021-09-20 18:21:15
【问题描述】：

我正在尝试在组件中使用 vue3.0.0 延迟加载，但收到一些警告。 当我想在父组件中获取该特定组件时出现此错误。我的意思是当我单击以显示子组件时，我会出现以下错误。在错误下我添加了我的代码。请帮我。我不是这方面的专家。

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>

这个错误也

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)

我的代码是这样的

<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>

我也在路由级别使用延迟加载

  {
    path: '/profile/:id',
    name: 'Profile',
    component: () => import('../views/frontend/Profile.vue')
  }

【问题讨论】：

标签： vue.js lazy-loading vuejs3

【解决方案1】：

defineAsyncComponent的回调需要返回一个导入组件定义的Promise，但目前什么都不返回：

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

您可以在回调中添加return 语句：

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

...或删除大括号以获取隐式返回：

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

【讨论】：