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

[talhameer]

Vue version

3.2.45

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-48q3zs?file=index.html

Steps to reproduce

Please clone the repo first and then run the project.

1. Add items to the cart
2. Remove the item from the cart in the cart screen. While removing the last item, an error will be shown in the console.
   OR
3. Go back to the Shop page from the navbar.

What is expected?

The expected result must be that every item should be deleted and the UI must be updated.

What is actually happening?

Showing the error in the console and the UI is not updating, also the application stops responding.

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i5-8350U CPU @ 1.70GHz
    Memory: 5.25 GB / 15.86 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.12.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.819.0), Chromium (108.0.1462.42)
    Internet Explorer: 11.0.22621.1

Any additional comments?

Following is the error, that showed up.

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

[LinusBorg]

This reproduction isn't runnable or minimal - it uses stripe api, which fails for a missing API key, and fails with errors when trying to follow step 1 of the reproduction instructions.

I'll leave this open for now as we already have a PR for this type of error, but I would very much be interested in actually getting a runnable reproduction for this error that we can analyse, since I'm unsure wether the PR actually fixes or just masks the real bug.

@talhameer could you please remove/work around the dependency on stripe?

[tiehm]

I have also had this issue and the reason for the bug, while the bug itself is also painful as it makes debugging VERY hard, is that I mixed vue-stripe (which is vue2) and vue3. I didn't notice that until after a few hours after the bug came up and it was very hard to link it back to that issue as the page unmounting errors fatally without anymore info.
I found the bug by debugging through the unmounting process, finding the null instance which errored and looking at the parent to see the somewhat correct element. Maybe something like that could be implemented as an error message like

Failed to unmount null instace, parent: [parent]

so that debugging is easier while not ignoring the error (which would happen if the linked PR is implemented).

[rudyxu1102]

Discussion #7332

[talhameer]

@talhameer could you please remove/work around the dependency on stripe?

I've removed the extra code around Stripe.
Please check here

[LinusBorg]

@talhameer could you please remove/work around the dependency on stripe?

I've removed the extra code around Stripe. Please check here

The demo is still unusable because I'd need your secret stripe API key to make it run.

[talhameer]

The demo is still unusable because I'd need your secret stripe API key to make it run.

Check now, I've updated the API key for testing.

[LinusBorg]

Not sure where to check. the last link still has no API key.

[LinusBorg]

Please open a new issue if you manage to create a runnable reproduction that doesn't involve vue-stripe or the stripe API.

[favorite58]

这个问题现在有没有解决方式，我的项目也出现了？

[jackchoumine]

这个问题现在有没有解决方式，我的项目也出现了？
Have you worked it out? I met this issue today.

[MIKE-27233]

这个问题现在有没有解决方式，我的项目也出现了？
Have you worked it out? I met this issue today.

me to ，its hard to resolve