core: Suspense+KeepAlive+AsyncComponent+v-if causes the `Uncaught (in promise): Cannot read properties of null (reading 'parentNode')`
Vue version
3.2.37
Link to minimal reproduction
Steps to reproduce
The reproduction link demonstrates the issue with no action required.
- Put an async component inside the
<KeepAlive>. - Assume we have
<Suspense>somewhere up in the tree. - Add conditional rendering to that async component using
v-if. The initial condition should be set totrue. - Change that condition to the
falsebefore the async component is fully loaded.
What is expected?
The async component is loaded but not rendered. No errors in the logs.
What is actually happening?
[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/core
at <KeepAlive>
at <Repl>
vue.runtime.esm-browser.js:9243 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
at parentNode (vue.runtime.esm-browser.js:9243:30)
at ReactiveEffect.componentUpdateFn [as fn] (vue.runtime.esm-browser.js:7062:17)
at ReactiveEffect.run (vue.runtime.esm-browser.js:531:25)
at instance.update (vue.runtime.esm-browser.js:7094:56)
at updateComponent (vue.runtime.esm-browser.js:6919:26)
at processComponent (vue.runtime.esm-browser.js:6852:13)
at patch (vue.runtime.esm-browser.js:6450:21)
at patchBlockChildren (vue.runtime.esm-browser.js:6756:13)
at patchElement (vue.runtime.esm-browser.js:6664:13)
at processElement (vue.runtime.esm-browser.js:6530:13)
Notes
Another issue here is Uncaught (in promise): suspense.resolve() is called without a pending branch. error that is thrown if there is no KeepAlive component in the tree. This error is caused by double calling the “resolve” method of the same suspense object when an async component is unmounted before the resolution of the suspense.
You can put an async component into a wrapper component (it can just render the default slot). In that case neither KeepAlive or Suspense is rerendered. Although this makes KeepAlive useless.
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 16
- Comments: 16 (5 by maintainers)
Commits related to this issue
- fix(runtime-core): fix suspense crash when patching non-resolved async setup component (#7290) close #5993 close #6463 close #6949 close #6095 close #8121 — committed to vuejs/core by mmis1000 7 months ago
this is serious issue - is it on the roadmap?
Same issue for me with Nuxt 3.1.1.
Changing line 35 of @vue/runtime-dom
runtime-dom.esm-bundler.jstoparentNode: node => node ? node.parentNode : null,seems to fix the issue though I am not sure what downstream effects this could have.On 3.3, this can be resolved by using a nested
<Suspense suspensible>:https://play.vuejs.org/#eNp9VLFu2zAQ/ZUDl8iALaZIuyiyESNLgS4FUqALF8U612wlkiApuUGgfw9FihZtJxkE8e7x3r17pPRKtkrlfYekIKXFVjWVxQ0TAGXN+w0AjGsXPXVGoTAB85kRj8EUfsemkSU9Rzz6A1FtG97P9ScoMoMJC/7cIPQrvl8zws3TQR4FI2dlzPrCx1YB3UwCE0J6pTUC1ypSsReFESpp4ktpdpor6zfwVklt4TVU17jnArfmRewepUMECrtMofPsAHstW7hx1t/cJ2zjUAHJ6Vgxnk3YMD74329yhFXX+HdKnEUpla2yRRQGoNF2WsyxaxZ8LcDqDpcnC4ewGCbdu0hsirnYCSzeHTab6V3z9QYEHuGnG4UbzDKNxicTEQAG7S/eouxsFkrOUGaDJ1lqxSK3BxSe7j493LRwWMK329uFd23KLKaRAOIqDtnKTlisU78+k2UP3OSTfbCGfdUYPDVyjb/Mjb2bwxiVdLo2ZEnCTKu2UvlfI4X77jy7u+seMIyczGbETTzGjBysVaagtBPq35/cHQx9cBjVTrtTuqpl+3CX3+Vf3Z01Nk3naNrVs5ZHg9o1ZGQa23NTl+xRrzSKGjXqT3td7E37XUBXPb0RTAxu/HiQ7/9vgrbfUjf1B58gGd4AhbdsBA==
Nuxt 3.7.3
Detailed reproduction: https://stackblitz.com/edit/nuxt-starter-btlcfb?file=pages%2Fwaiting.vue
I have same issue, so only this answer helped me. Hope it will be fixed soon