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

[talhameer]

I'm implementing a store using reactive API to implement minimal state management.

Here is the code for my store

export const store = reactive({
  cart: [],
  total: 0,
  removeFromCart(id) {
    this.cart = this.cart.filter((item) => item.id !== id);
    this.updateTotal();
  },
  updateTotal() {
    let total = 0;
    for (const item of this.cart) {
      total += item.price * item.quantity;
    }
    this.total = total;
  },
});

Code from Vue template

<tr
  v-for="product in store.cart"
  :key="product.id"
  class="border-b border-t bg-white"
>
  <th
    scope="row"
    class="h-24 w-20 whitespace-nowrap py-4 px-6 font-medium text-gray-900"
  >
    <img :src="product.image" :alt="product.title" />
  </th>
  <td class="py-4 px-6 font-bold">
    {{ product.title }}
  </td>
  <td class="flex-nowrap py-4 px-6 font-bold">
    <i
      @click="store.reduceQty(product.id)"
      class="bi bi-chevron-left mr-3 cursor-pointer"
    ></i>
    <span>{{ product.quantity }}</span>
    <i
      @click="store.addQty(product.id)"
      class="bi bi-chevron-right ml-3 cursor-pointer"
    ></i>
  </td>
  <td class="py-4 px-6 font-bold">${{ product.price }}</td>
  <td class="py-4 px-6">
    <i
      @click="store.removeFromCart(product.id)"
      class="bi bi-x-lg cursor-pointer"
    ></i>
  </td>
</tr>

When I remove the last remaining item from the cart it shows the following error in the console which says "TypeError: Cannot read properties of undefined (reading '__asyncLoader')" and in the error stack the origin of the error is removeFromCart() and the app stops working

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '__asyncLoader')
    at isAsyncWrapper (runtime-core.esm-bundler.js:2272:40)
    at unmount (runtime-core.esm-bundler.js:6090:40)
    at unmountComponent (runtime-core.esm-bundler.js:6212:13)
    at unmount (runtime-core.esm-bundler.js:6097:13)
    at unmountChildren (runtime-core.esm-bundler.js:6241:13)
    at unmount (runtime-core.esm-bundler.js:6115:17)
    at patch (runtime-core.esm-bundler.js:5070:13)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5711:17)
    at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
    at instance.update (runtime-core.esm-bundler.js:5745:56)
isAsyncWrapper @ runtime-core.esm-bundler.js:2272
unmount @ runtime-core.esm-bundler.js:6090
unmountComponent @ runtime-core.esm-bundler.js:6212
unmount @ runtime-core.esm-bundler.js:6097
unmountChildren @ runtime-core.esm-bundler.js:6241
unmount @ runtime-core.esm-bundler.js:6115
patch @ runtime-core.esm-bundler.js:5070
componentUpdateFn @ runtime-core.esm-bundler.js:5711
run @ reactivity.esm-bundler.js:187
instance.update @ runtime-core.esm-bundler.js:5745
callWithErrorHandling @ runtime-core.esm-bundler.js:157
flushJobs @ runtime-core.esm-bundler.js:390
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:282
queueJob @ runtime-core.esm-bundler.js:276
(anonymous) @ runtime-core.esm-bundler.js:5743
triggerEffect @ reactivity.esm-bundler.js:397
triggerEffects @ reactivity.esm-bundler.js:387
trigger @ reactivity.esm-bundler.js:355
set2 @ reactivity.esm-bundler.js:526
removeFromCart @ store.js:30
onClick @ CartView.vue:48
callWithErrorHandling @ runtime-core.esm-bundler.js:157
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166
invoker @ runtime-dom.esm-bundler.js:345

Please help me to fix this issue... Thank you so much for your attention and participation in advance.

[rudyxu1102]

Could you please provide a minimal reproduction?

[talhameer]

Here is the code of the project. https://stackblitz.com/edit/vitejs-vite-48q3zs?file=index.html
You may face some CORS errors, please clone the project and run it locally.

[rudyxu1102]

I think this is a problem about vue-stripe that still not support for Vue3.
If you remove StripeCheckout component in the CartView.vue, the error above will disappear.
And I will create a PR later to make the error message more clear.

[kmznancy]

have you resolved this problem?

[rudyxu1102]

have you resolved this problem?

Could you please provide a minimal reproduction? Maybe that's another question. @kmznancy

[nachodd]

In my case, this issue was caused because of the absence of defineAsyncComponent

// Incorrect:
export default {
  components: {
    MyComponent: () => import('@/.../MyComponent.vue'),
  },
}

// Correct
import { defineAsyncComponent } from 'vue'

export default {
  components: {
    MyComponent: defineAsyncComponent(() => import('@/.../MyComponent.vue')),
  },
}

Also, when using <component :is="..."> could lead to similar issues. You may also try wrapping defineAsyncComponent with markRaw from vue.

Hope this helps to others!