Suspense+KeepAlive+AsyncComponent+v-if causes the `Uncaught (in promise): Cannot read properties of null (reading 'parentNode')` #6463

mefcorvi · 2022-08-13T00:06:41Z

Vue version

3.2.37

Link to minimal reproduction

https://play.vuejs.org/#eNqNVMtu2zAQ/JWFLpGBWEyRnlLZiBvk0BZtg9pHXRRpZTGVSIKk/EDgf++SlGzVToCcLHJfM7NDv0YLpZJNh9FdlFpsVZNbnGcCIF12RqEw4UTnkm/6Tzr8QFSLhm+GqL98aNXC7EUBmymvZlnEzbKWW5FFwE6V7Lw0ZUPnlI1mpmwEJzWF5sqCQdspn8tbJbWF19CjxIoL9MMfJEUECnsdQlL8lJ2wWPZnjZX/OkClZQtXxP3qy6gjkegjCXO9nDguwaUUUhifEWjO3pwbhznxBGZzELiFJ+rGDcaxRuMve9Dg6Kx4i7KzcUinjJjaT67h083NzcTjIqgT9+tOJxC9toSBCMVWdzjEj4T7nv20i1lHFIwBr1z82NRKcB3B1igAN6j3tuZiDVveNPCM4EiPqqWGzqDf/xw4ocO8BFmdDHHcfj8g2eQNtZ9BlTcGB5aedOB8cD8pC1ufR9dRWM60zVXyYqQgt3r45DEfMFl0NxDKItqYO2dRba0yd4wVpaCyEsl1OhFomVAtu6c0pkkpUmVayvb+NrlNPpMZjR1fJ2ja6bOWW4OammRR7yM/htElyTPVKErUqD869qxsPPosdDHey5OJA4ky2PPy7Z7e6qrmBizu6O3UsmtKciS1d0ukaVSxxzI8vVAyenU0wBoyW8XXZ5oXNJc3qH8ry8mM/2mfN43cfvd3zkJHsYoai79v3L+YXRDtibzvqI8Etrleow3hx+UvIjEKtrLsmn7P7wT/oJFN5zCGtK+dKAn2KM+j/eYtRP5emcedpb+fgZQD6uX2+X7hTvL3qJ/g0jqPazr8AxfWwHU=

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 to true.
Change that condition to the false before 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.

core/packages/runtime-core/src/renderer.ts

Lines 2274 to 2290 in 3be4e3c

    
           // A component with async dep inside a pending suspense is unmounted before 
        
           // its async dep resolves. This should remove the dep from the suspense, and 
        
           // cause the suspense to resolve immediately if that was the last dep. 
        
           if ( 
        
             __FEATURE_SUSPENSE__ && 
        
             parentSuspense && 
        
             parentSuspense.pendingBranch && 
        
             !parentSuspense.isUnmounted && 
        
             instance.asyncDep && 
        
             !instance.asyncResolved && 
        
             instance.suspenseId === parentSuspense.pendingId 
        
           ) { 
        
             parentSuspense.deps-- 
        
             if (parentSuspense.deps === 0) { 
        
               parentSuspense.resolve() 
        
             } 
        
           }

core/packages/runtime-core/src/components/Suspense.ts

Lines 224 to 226 in 3be4e3c

    
           if (suspense.deps <= 0) { 
        
             suspense.resolve() 
        
           } else if (isInFallback) {

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.

https://play.vuejs.org/#eNqNVE1P4zAQ/Suj7GFTicZ0uye2rWARh/1GC8dcQjIhhsS2bKcFof73HdtJmhSQ9pSM5/O9efZLdKFUsm0xOotWFhtVZxY3qQBY3bRGoTDBIrvg2+6XjB+I6qLm297rDy8btRjZ4eTCPIsctnNertOIm5tK7kQaARsnsknmih1XX7FD82FK+FBmdX2X5Y9D5k+ZFVzcJ0nS500hsRGmiW9lcs2VBYO2VT6WN0pqCy+hUIElF+ihXEryCBT2JLik+CVbYbHobI2l/9tDqWUDH4nbj19GFQlq50mYq+XIPw5YTCIWfYgLyqUwPibwun5ztDiMEs9gvQGBO7imctxgHGs0/rDDBQ7xLW9QtjYO4RQRU/nZCSxOT09nfjJCM3NfZx2G6JZJMxDm2OoWe//ASVez6/aq1zAFY8BL5x+KWgmuItgKBeAW9bOtaLWw43UNdwgO9ChbamgNesFtgNN0mBUgy4MCB410DZJtVlP5NZCIDPYoPeiAee8+KxaEsYlOorCeeZOp5MFIQRfGj0+i9g6TRmc9oDSijTk7jSprlTljLC8EpRVIqtaJQMuEatg5hTFNTBEr80I258vkU7L8TGo3dnyeoGnmd1ruDGqqkkad1nwfRofEz1yjKFCj/t++R2mT3ke+V/09QanYEy29hl8/IIc7e1txAxaf6IJVsq0L0iSVd2ukbpTxjEW4nyFldDWpgTUkt5LfH7GeU19eo/6jLCc5Ttind0HuvvszJ6KBrbzC/PGN8wfzFFi7JvU76COGbabv0Qb31c1vAjFyNrJo627T7zj/opF162YMYV9bUdDYozg/7TcvIlL4rbl6svRG9aDcoJ5uH+837ih/D/ph3GWyPFqTf0ime9Ked1NL615kssbc7/8Bq7z4Vg==

The text was updated successfully, but these errors were encountered:

jiangmaniu · 2022-09-23T09:11:19Z

Same error, what's the progress?

wellfrog16 · 2022-10-03T02:43:58Z

在vuepress 2.x下面有同样的问题

DrJume · 2023-02-17T22:38:01Z

The reproduction throws the same error on vue v3.2.36

DrJume · 2023-02-17T22:45:00Z

I had the same issue inside a Nuxt v3.2.2 app, probably caused by a suspense boundary with async components.

In the following line prevTree.el is null, when the error is thrown (null.parentNode). Sometimes it is "", which does not throw, as "".parentNode gives undefined, which does not cause any problems.

core/packages/runtime-core/src/renderer.ts

Line 1496 in a0e7dc3

hostParentNode(prevTree.el!)!,

I think it is some kind of race condition, where the prevTree.el is not available, because of the async component being removed / not being ready.

joel-wenzel · 2023-02-23T16:29:50Z

Same issue for me with Nuxt 3.1.1.

Changing line 35 of @vue/runtime-dom runtime-dom.esm-bundler.js to
parentNode: node => node ? node.parentNode : null, seems to fix the issue though I am not sure what downstream effects this could have.

aKzenT · 2023-04-05T12:57:47Z

Same issue here.

theguriev · 2023-05-02T10:45:16Z

Same issue on my side :(

antfu · 2023-06-07T21:45:14Z

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

Ingramz · 2023-07-03T17:38:50Z

Here is another reproduction that does not seemingly make use of KeepAlive but still triggers this error.
https://stackblitz.com/edit/github-8d62xc
To trigger, click on one of the links.

The code is nonsensical from the practical aspect as it hides the element when it loads the fallback component. Despite this, it is hard for me to assess whether the code itself is valid and belongs to the same type of issue.

Rigo-m · 2023-07-31T14:25:23Z

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

Is this implemented in Nuxt? Maybe @danielroe might be interested for nuxt/nuxt#13309

ilyaDegtyarenko · 2023-09-14T17:39:54Z

Nuxt 3.7.3

Detailed reproduction:
https://stackblitz.com/edit/nuxt-starter-btlcfb?file=pages%2Fwaiting.vue

alexovn · 2023-09-22T16:33:59Z

I have same issue, so only this answer helped me. Hope it will be fixed soon

Same issue for me with Nuxt 3.1.1.

Changing line 35 of @vue/runtime-dom runtime-dom.esm-bundler.js to parentNode: node => node ? node.parentNode : null, seems to fix the issue though I am not sure what downstream effects this could have.

plcdnl · 2023-10-20T14:32:59Z

Same issue for me with Nuxt 3.1.1.

Changing line 35 of @vue/runtime-dom runtime-dom.esm-bundler.js to parentNode: node => node ? node.parentNode : null, seems to fix the issue though I am not sure what downstream effects this could have.

Had the same problem in nuxt 3.8.0. Finally solved by patching in this way! Thank you, i hope can be helpful for the fix

TomasSestak · 2023-10-27T11:31:52Z

this is serious issue - is it on the roadmap?

edison1105 · 2023-10-29T00:37:39Z

The problem is here:

core/packages/runtime-core/src/components/Suspense.ts

Lines 211 to 244 in 3be4e3c

    
           if (isSameVNodeType(newBranch, pendingBranch)) { 
        
             // same root type but content may have changed. 
        
             patch( 
        
               pendingBranch, 
        
               newBranch, 
        
               suspense.hiddenContainer, 
        
               null, 
        
               parentComponent, 
        
               suspense, 
        
               isSVG, 
        
               slotScopeIds, 
        
               optimized 
        
             ) 
        
             if (suspense.deps <= 0) { 
        
               suspense.resolve() 
        
             } else if (isInFallback) { 
        
               patch( 
        
                 activeBranch, 
        
                 newFallback, 
        
                 container, 
        
                 anchor, 
        
                 parentComponent, 
        
                 null, // fallback tree will not have suspense context 
        
                 isSVG, 
        
                 slotScopeIds, 
        
                 optimized 
        
               ) 
        
               setActiveBranch(suspense, newFallback) 
        
             } 
        
           } else { 
        
             // toggled before pending tree is resolved 
        
             suspense.pendingId++ 
        
             if (isHydrating) { 
        
               // if toggled before hydration is finished, the current DOM tree is

When the component is toggled before the pending tree is resolved, patching should not be performed. Instead, the logic under the "else" statement should be executed. based on the current code, the component should be used as the root node of Suspense and should not be wrapped by any other elements.

The correct nesting order should be as follows:

<KeepAlive>
  <Suspense>
    <!-- main content -->
    <component :is="Component"></component>

    <!-- loading state -->
    <template #fallback>
      Loading...
    </template>
  </Suspense>
</KeepAlive>

see https://vuejs.org/guide/built-ins/suspense.html#combining-with-other-components

or add a key see

<Suspense>
  <div :key="+isShown">
    <KeepAlive>
      <CmpAsync v-if="isShown" />
    </KeepAlive>
  </div>
</Suspense>

this will be fixed via #7290

edison1105 · 2023-11-03T00:57:53Z

duplicate of #6095

moushicheng mentioned this issue Aug 14, 2022

fix(Suspense): switch suspense cause error in the Keepalive (fix: #6416) #6467

Closed

DrJume mentioned this issue Feb 17, 2023

errors when navigating back and forth from error pages nuxt/nuxt#14693

Closed

haoqunjiang added scope: suspense scope: ssr labels Mar 21, 2023

DrJume mentioned this issue Jun 7, 2023

TypeError: Cannot read properties of null (reading 'parentNode') nuxt/nuxt#13309

Closed

danielroe mentioned this issue Aug 1, 2023

TypeError: Cannot read properties of null (reading 'parentNode') nuxt/nuxt#21841

Closed

l4dybird mentioned this issue Aug 4, 2023

Layout load fails when executing location.hash while loading layout nuxt/nuxt#22492

Closed

edison1105 mentioned this issue Nov 2, 2023

fix(runtime-core): fix suspense crash when patch non-resolved async setup component #7290

Merged

3 tasks

edison1105 removed the scope: ssr label Nov 3, 2023

SimonSimCity mentioned this issue Nov 4, 2023

Refresh token functionality doesn't work properly bcc-code/bmm-web#217

Closed

edison1105 mentioned this issue Nov 29, 2023

使用keepalive+suspense缓存asyncsetup组件时切换过快就会报错null of parentNode #5993

Closed

yyx990803 closed this as completed in bb0c889 Dec 28, 2023

github-actions bot locked and limited conversation to collaborators Jan 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Suspense+KeepAlive+AsyncComponent+v-if causes the `Uncaught (in promise): Cannot read properties of null (reading 'parentNode')` #6463

Suspense+KeepAlive+AsyncComponent+v-if causes the `Uncaught (in promise): Cannot read properties of null (reading 'parentNode')` #6463

mefcorvi commented Aug 13, 2022 •

edited

Loading

jiangmaniu commented Sep 23, 2022

wellfrog16 commented Oct 3, 2022 •

edited

Loading

DrJume commented Feb 17, 2023

DrJume commented Feb 17, 2023 •

edited

Loading

joel-wenzel commented Feb 23, 2023 •

edited

Loading

aKzenT commented Apr 5, 2023

theguriev commented May 2, 2023

antfu commented Jun 7, 2023

Ingramz commented Jul 3, 2023 •

edited

Loading

Rigo-m commented Jul 31, 2023

ilyaDegtyarenko commented Sep 14, 2023

alexovn commented Sep 22, 2023

plcdnl commented Oct 20, 2023

TomasSestak commented Oct 27, 2023

edison1105 commented Oct 29, 2023 •

edited

Loading

edison1105 commented Nov 3, 2023

Suspense+KeepAlive+AsyncComponent+v-if causes the Uncaught (in promise): Cannot read properties of null (reading 'parentNode') #6463

Suspense+KeepAlive+AsyncComponent+v-if causes the Uncaught (in promise): Cannot read properties of null (reading 'parentNode') #6463

Comments

mefcorvi commented Aug 13, 2022 • edited Loading

Vue version

Link to minimal reproduction

Steps to reproduce

What is expected?

What is actually happening?

Notes

jiangmaniu commented Sep 23, 2022

wellfrog16 commented Oct 3, 2022 • edited Loading

DrJume commented Feb 17, 2023

DrJume commented Feb 17, 2023 • edited Loading

joel-wenzel commented Feb 23, 2023 • edited Loading

aKzenT commented Apr 5, 2023

theguriev commented May 2, 2023

antfu commented Jun 7, 2023

Ingramz commented Jul 3, 2023 • edited Loading

Rigo-m commented Jul 31, 2023

ilyaDegtyarenko commented Sep 14, 2023

alexovn commented Sep 22, 2023

plcdnl commented Oct 20, 2023

TomasSestak commented Oct 27, 2023

edison1105 commented Oct 29, 2023 • edited Loading

edison1105 commented Nov 3, 2023

Suspense+KeepAlive+AsyncComponent+v-if causes the `Uncaught (in promise): Cannot read properties of null (reading 'parentNode')` #6463

Suspense+KeepAlive+AsyncComponent+v-if causes the `Uncaught (in promise): Cannot read properties of null (reading 'parentNode')` #6463

mefcorvi commented Aug 13, 2022 •

edited

Loading

wellfrog16 commented Oct 3, 2022 •

edited

Loading

DrJume commented Feb 17, 2023 •

edited

Loading

joel-wenzel commented Feb 23, 2023 •

edited

Loading

Ingramz commented Jul 3, 2023 •

edited

Loading

edison1105 commented Oct 29, 2023 •

edited

Loading