fix(suspense): handle suspense switching with nested suspense #10184

edison1105 · 2024-01-22T13:01:22Z

github-actions · 2024-01-22T13:02:31Z

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	90.2 kB (+29 B)	34.4 kB (+3 B)	31 kB (+13 B)
vue.global.prod.js	147 kB (+29 B)	53.6 kB (+3 B)	47.9 kB (+54 B)

Usages

Name	Size	Gzip	Brotli
createApp	50.3 kB	19.7 kB	18 kB
createSSRApp	53.7 kB	21 kB	19.1 kB
defineCustomElement	52.6 kB	20.4 kB	18.6 kB
overall	64.1 kB (+29 B)	24.8 kB (+4 B)	22.5 kB (+15 B)

ferferga · 2024-01-22T13:55:17Z

I can confirm that this fixes the issue in my app

Context: #10098 (comment)

edison1105 · 2024-01-23T06:04:27Z

/ecosystem-ci run

vue-bot · 2024-01-23T06:11:48Z

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
language-tools	✅ success	✅ success
nuxt	✅ success	✅ success
pinia	✅ success	✅ success
quasar	✅ success	✅ success
radix-vue	✅ success	✅ success
router	✅ success	✅ success
test-utils	✅ success	✅ success
vant	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vitepress	✅ success	✅ success
vue-i18n	✅ success	✅ success
vue-macros	✅ success	✅ success
vuetify	✅ success	✅ success
vueuse	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success

AndrewBogdanovTSS · 2024-01-25T21:19:26Z

@edison1105 is there anything that's blocking this PR from being merged?

edison1105 · 2024-01-26T04:40:56Z

@AndrewBogdanovTSS
It requires reviews from other members

becem-gharbi · 2024-02-08T06:52:58Z

I confirm that this solves the issue of blocking navigation, Thanks!

I'm looking forward to merging this PR because in my opinion the issue is kind of critical especially on Nuxt.

saifobeidat · 2024-02-08T07:27:34Z

@becem-gharbi agreed, this breaks the whole navigation in nuxt

marius-mcfly · 2024-02-08T12:34:43Z

@becem-gharbi agreed, this breaks the whole navigation in nuxt

Same here, I'm so glad this PR exists 🥹

ranjbarreza · 2024-02-09T15:49:54Z

Can't wait for this to go live 🚀

enkot · 2024-02-09T19:20:33Z

I get this error when using repeatable params (in Nuxt, e.g. [...slug]) and switching between nested and plain route:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'suspenseId')
    at patchSuspense (chunk-AALUAPKP.js?v=9e31ec56:2864:50)
    at Object.process (chunk-AALUAPKP.js?v=9e31ec56:2665:7)
    at patch (chunk-AALUAPKP.js?v=9e31ec56:6802:16)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-AALUAPKP.js?v=9e31ec56:7535:9)
    at ReactiveEffect.run (chunk-AALUAPKP.js?v=9e31ec56:430:19)
    at instance.update (chunk-AALUAPKP.js?v=9e31ec56:7579:17)
    at updateComponent (chunk-AALUAPKP.js?v=9e31ec56:7388:18)
    at processComponent (chunk-AALUAPKP.js?v=9e31ec56:7322:7)
    at patch (chunk-AALUAPKP.js?v=9e31ec56:6777:11)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-AALUAPKP.js?v=9e31ec56:7535:9)

I will try to make a repro soon.

ferferga · 2024-02-13T14:50:11Z

@yyx990803 Sorry for pinging you, but is there any way to prioritize this PR?

I'm seeing the last 2 releases included really good bug fixes (and even DX improvements with the warnings for self-triggered computeds) but, since Vue 3.1.8, all Nuxt's apps mixing routing with different layouts are essentially broken, so the scope is huge (it's not a minor annoyance, it's an unrecoverable crash of the whole app). A lot of duplicated issues related to this appeared in Nuxt repo as well.

Is there also something else the community can do to get this in sooner?

AlexLavoie42 · 2024-02-26T20:27:44Z

I get this error when using repeatable params (in Nuxt, e.g. [...slug]) and switching between nested and plain route:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'suspenseId')
    at patchSuspense (chunk-AALUAPKP.js?v=9e31ec56:2864:50)
    at Object.process (chunk-AALUAPKP.js?v=9e31ec56:2665:7)
    at patch (chunk-AALUAPKP.js?v=9e31ec56:6802:16)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-AALUAPKP.js?v=9e31ec56:7535:9)
    at ReactiveEffect.run (chunk-AALUAPKP.js?v=9e31ec56:430:19)
    at instance.update (chunk-AALUAPKP.js?v=9e31ec56:7579:17)
    at updateComponent (chunk-AALUAPKP.js?v=9e31ec56:7388:18)
    at processComponent (chunk-AALUAPKP.js?v=9e31ec56:7322:7)
    at patch (chunk-AALUAPKP.js?v=9e31ec56:6777:11)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-AALUAPKP.js?v=9e31ec56:7535:9)

I will try to make a repro soon.

@enkot I am getting this same error with the latest update. I almost managed to reproduce but the error is slightly different (#10415). Wondering if you have made any progress on reproducing? I believe I narrowed it down to having keepalive enabled as part of the cause as well.

…10184) close vuejs#10098

## [3.4.27](vuejs/core@v3.4.26...v3.4.27) (2024-05-06) ### Bug Fixes * **compat:** include legacy scoped slots ([#10868](vuejs/core#10868)) ([8366126](vuejs/core@8366126)), closes [#8869](vuejs/core#8869) * **compiler-core:** add support for arrow aysnc function with unbracketed ([#5789](vuejs/core#5789)) ([ca7d421](vuejs/core@ca7d421)), closes [#5788](vuejs/core#5788) * **compiler-dom:** restrict createStaticVNode usage with option elements ([#10846](vuejs/core#10846)) ([0e3d617](vuejs/core@0e3d617)), closes [#6568](vuejs/core#6568) [#7434](vuejs/core#7434) * **compiler-sfc:** handle keyof operator ([#10874](vuejs/core#10874)) ([10d34a5](vuejs/core@10d34a5)), closes [#10871](vuejs/core#10871) * **hydration:** handle edge case of style mismatch without style attribute ([f2c1412](vuejs/core@f2c1412)), closes [#10786](vuejs/core#10786) ## [3.4.26](vuejs/core@v3.4.25...v3.4.26) (2024-04-29) ### Bug Fixes * **compiler-core:** fix bail constant for globals ([fefce06](vuejs/core@fefce06)) * **compiler-core:** remove unnecessary constant bail check ([09b4df8](vuejs/core@09b4df8)), closes [#10807](vuejs/core#10807) * **runtime-core:** attrs should be readonly in functional components ([#10767](vuejs/core#10767)) ([e8fd644](vuejs/core@e8fd644)) * **runtime-core:** ensure slot compiler marker writable ([#10825](vuejs/core#10825)) ([9c2de62](vuejs/core@9c2de62)), closes [#10818](vuejs/core#10818) * **runtime-core:** properly handle inherit transition during clone VNode ([#10809](vuejs/core#10809)) ([638a79f](vuejs/core@638a79f)), closes [#3716](vuejs/core#3716) [#10497](vuejs/core#10497) [#4091](vuejs/core#4091) * **Transition:** re-fix [#10620](vuejs/core#10620) ([#10832](vuejs/core#10832)) ([accf839](vuejs/core@accf839)), closes [#10632](vuejs/core#10632) [#10827](vuejs/core#10827) ## [3.4.25](vuejs/core@v3.4.24...v3.4.25) (2024-04-24) ### Bug Fixes * **defineModel:** align prod mode runtime type generation with defineProps ([4253a57](vuejs/core@4253a57)), closes [#10769](vuejs/core#10769) * **runtime-core:** properly get keepAlive child ([#10772](vuejs/core#10772)) ([3724693](vuejs/core@3724693)), closes [#10771](vuejs/core#10771) * **runtime-core:** use normal object as internal prototype for attrs and slots ([064e82f](vuejs/core@064e82f)), closes [/github.com/vuejs/core/commit/6df53d85a207986128159d88565e6e7045db2add#r141304923](https://github.com//github.com/vuejs/core/commit/6df53d85a207986128159d88565e6e7045db2add/issues/r141304923) ## [3.4.24](vuejs/core@v3.4.23...v3.4.24) (2024-04-22) ### Bug Fixes * **compiler-core:** handle template ref bound via v-bind object on v-for ([#10706](vuejs/core#10706)) ([da7adef](vuejs/core@da7adef)), closes [#10696](vuejs/core#10696) * **compiler-core:** properly parse await expressions in edge cases ([b92c25f](vuejs/core@b92c25f)), closes [#10754](vuejs/core#10754) * **compiler-sfc:** handle readonly operator and ReadonlyArray/Map/Set types ([5cef52a](vuejs/core@5cef52a)), closes [#10726](vuejs/core#10726) * **compiler-ssr:** fix hydration mismatch for conditional slot in transition ([f12c81e](vuejs/core@f12c81e)), closes [#10743](vuejs/core#10743) * **compiler-ssr:** fix v-html SSR for nullish values ([1ff4076](vuejs/core@1ff4076)), closes [#10725](vuejs/core#10725) * **deps:** update compiler ([#10760](vuejs/core#10760)) ([15df5c1](vuejs/core@15df5c1)) * **runtime-core:** fix edge case of KeepAlive inside Transition with slot children ([#10719](vuejs/core#10719)) ([e51ca61](vuejs/core@e51ca61)), closes [#10708](vuejs/core#10708) * **runtime-core:** further fix slots _ctx check ([cde7f05](vuejs/core@cde7f05)), closes [#10724](vuejs/core#10724) * **runtime-core:** props should be readonly via direct template access ([b93f264](vuejs/core@b93f264)), closes [#8216](vuejs/core#8216) [#10736](vuejs/core#10736) * **transition:** transition is breaking/flickering when enter is canceled ([#10688](vuejs/core#10688)) ([65109a7](vuejs/core@65109a7)) ## [3.4.23](vuejs/core@v3.4.22...v3.4.23) (2024-04-16) ### Bug Fixes * **runtime-core:** fix regression for $attrs tracking in slots ([6930e60](vuejs/core@6930e60)), closes [#10710](vuejs/core#10710) * **runtime-core:** use same internal object mechanism for slots ([6df53d8](vuejs/core@6df53d8)), closes [#10709](vuejs/core#10709) ## [3.4.22](vuejs/core@v3.4.21...v3.4.22) (2024-04-15) ### Bug Fixes * **compat:** fix $options mutation + adjust private API initialization ([d58d133](vuejs/core@d58d133)), closes [#10626](vuejs/core#10626) [#10636](vuejs/core#10636) * **compile-sfc:** analyze v-bind shorthand usage in template ([#10518](vuejs/core#10518)) ([e5919d4](vuejs/core@e5919d4)), closes [#10515](vuejs/core#10515) * **compiler-core:** fix loc.source for end tags with whitespace before > ([16174da](vuejs/core@16174da)), closes [#10694](vuejs/core#10694) [#10695](vuejs/core#10695) * **compiler-core:** fix v-bind shorthand for component :is ([04af950](vuejs/core@04af950)), closes [#10469](vuejs/core#10469) [#10471](vuejs/core#10471) * **compiler-sfc:** :is() and :where() in compound selectors ([#10522](vuejs/core#10522)) ([660cadc](vuejs/core@660cadc)), closes [#10511](vuejs/core#10511) * **compiler-sfc:** also search for `.tsx` when type import's extension is omitted ([#10637](vuejs/core#10637)) ([34106bc](vuejs/core@34106bc)), closes [#10635](vuejs/core#10635) * **compiler-sfc:** fix defineModel coercion for boolean + string union types ([#9603](vuejs/core#9603)) ([0cef65c](vuejs/core@0cef65c)), closes [#9587](vuejs/core#9587) [#10676](vuejs/core#10676) * **compiler-sfc:** fix universal selector scope ([#10551](vuejs/core#10551)) ([54a6afa](vuejs/core@54a6afa)), closes [#10548](vuejs/core#10548) * **compiler-sfc:** use options module name if options provide runtimeModuleName options ([#10457](vuejs/core#10457)) ([e76d743](vuejs/core@e76d743)), closes [#10454](vuejs/core#10454) * **custom-element:** avoid setting attr to null if it is removed ([#9012](vuejs/core#9012)) ([b49306a](vuejs/core@b49306a)), closes [#9006](vuejs/core#9006) [#10324](vuejs/core#10324) * **hydration:** properly handle optimized mode during hydrate node ([#10638](vuejs/core#10638)) ([2ec06fd](vuejs/core@2ec06fd)), closes [#10607](vuejs/core#10607) * **reactivity:** computed should not be detected as true by isProxy ([#10401](vuejs/core#10401)) ([9da34d7](vuejs/core@9da34d7)) * **reactivity:** fix hasOwnProperty key coercion edge cases ([969c5fb](vuejs/core@969c5fb)) * **reactivity:** fix tracking when hasOwnProperty is called with non-string value ([c3c5dc9](vuejs/core@c3c5dc9)), closes [#10455](vuejs/core#10455) [#10464](vuejs/core#10464) * **runtime-core:** fix errorHandler causes an infinite loop during execution ([#9575](vuejs/core#9575)) ([ab59bed](vuejs/core@ab59bed)) * **runtime-core:** handle invalid values in callWithAsyncErrorHandling ([53d15d3](vuejs/core@53d15d3)) * **runtime-core:** show hydration mismatch details for non-rectified mismatches too when __PROD_HYDRATION_MISMATCH_DETAILS__ is set ([#10599](vuejs/core#10599)) ([0dea7f9](vuejs/core@0dea7f9)) * **runtime-dom:** `v-model` string/number coercion for multiselect options ([#10576](vuejs/core#10576)) ([db374e5](vuejs/core@db374e5)) * **runtime-dom:** fix css v-bind for suspensed components ([#8523](vuejs/core#8523)) ([67722ba](vuejs/core@67722ba)), closes [#8520](vuejs/core#8520) * **runtime-dom:** force update v-model number with leading 0 ([#10506](vuejs/core#10506)) ([15ffe8f](vuejs/core@15ffe8f)), closes [#10503](vuejs/core#10503) [#10615](vuejs/core#10615) * **runtime-dom:** sanitize wrongly passed string value as event handler ([#8953](vuejs/core#8953)) ([7ccd453](vuejs/core@7ccd453)), closes [#8818](vuejs/core#8818) * **ssr:** don't render v-if comments in TransitionGroup ([#6732](vuejs/core#6732)) ([5a96267](vuejs/core@5a96267)), closes [#6715](vuejs/core#6715) * **Transition:** ensure the KeepAlive children unmount w/ out-in mode ([#10632](vuejs/core#10632)) ([fc99e4d](vuejs/core@fc99e4d)), closes [#10620](vuejs/core#10620) * **TransitionGroup:** avoid set transition hooks for comment nodes and text nodes ([#9421](vuejs/core#9421)) ([140a768](vuejs/core@140a768)), closes [#4621](vuejs/core#4621) [#4622](vuejs/core#4622) [#5153](vuejs/core#5153) [#5168](vuejs/core#5168) [#7898](vuejs/core#7898) [#9067](vuejs/core#9067) * **types:** avoid merging object union types when using withDefaults ([#10596](vuejs/core#10596)) ([37ba93c](vuejs/core@37ba93c)), closes [#10594](vuejs/core#10594) ### Performance Improvements * add `__NO_SIDE_EFFECTS__` comments ([#9053](vuejs/core#9053)) ([d46df6b](vuejs/core@d46df6b)) * optimize component props/slots internal object checks ([6af733d](vuejs/core@6af733d)) * **ssr:** avoid calling markRaw on component instance proxy ([4bc9f39](vuejs/core@4bc9f39)) * **ssr:** optimize setup context creation for ssr in v8 ([ca84316](vuejs/core@ca84316)) ## [3.4.21](vuejs/core@v3.4.20...v3.4.21) (2024-02-28) ### Bug Fixes * **runtime-dom:** avoid unset option's value ([#10416](vuejs/core#10416)) ([b3f8b5a](vuejs/core@b3f8b5a)), closes [#10412](vuejs/core#10412) [#10396](vuejs/core#10396) * **suspense:** ensure nested suspense patching if in fallback state ([#10417](vuejs/core#10417)) ([7c97778](vuejs/core@7c97778)), closes [#10415](vuejs/core#10415) * **warning:** stringify args in warn handler ([#10414](vuejs/core#10414)) ([bc37258](vuejs/core@bc37258)), closes [#10409](vuejs/core#10409) ## [3.4.20](vuejs/core@v3.4.19...v3.4.20) (2024-02-26) ### Bug Fixes * **parser:** should not treat uppercase components as special tags ([e0e0253](vuejs/core@e0e0253)), closes [#10395](vuejs/core#10395) * **runtime-dom:** avoid always resetting nullish option value ([ff130c4](vuejs/core@ff130c4)), closes [#10396](vuejs/core#10396) * **runtime-dom:** fix nested v-show priority regression ([364f890](vuejs/core@364f890)), closes [#10338](vuejs/core#10338) * **runtime-dom:** v-bind style should clear previous css string value ([#10373](vuejs/core#10373)) ([e2d3235](vuejs/core@e2d3235)), closes [#10352](vuejs/core#10352) * **suspense:** handle suspense switching with nested suspense ([#10184](vuejs/core#10184)) ([0f3da05](vuejs/core@0f3da05)), closes [#10098](vuejs/core#10098) * **types:** better typing for direct setup signature of defineComponent ([#10357](vuejs/core#10357)) ([eadce5b](vuejs/core@eadce5b)), closes [#8604](vuejs/core#8604) [#8855](vuejs/core#8855) ## [3.4.19](vuejs/core@v3.4.18...v3.4.19) (2024-02-13) ### Bug Fixes * **deps:** pin lru-cache to avoid hashing error ([b8be990](vuejs/core@b8be990)), closes [#10300](vuejs/core#10300) * **hydration:** fix css vars hydration mismatch false positive on non-root nodes ([995d2fd](vuejs/core@995d2fd)), closes [#10317](vuejs/core#10317) [#10325](vuejs/core#10325) * **runtime-dom:** should not trigger transition when v-show value is falsy ([#10311](vuejs/core#10311)) ([e509639](vuejs/core@e509639)) ### Features > Note: this warning is categorized as a feature but released in a patch because it does not affect public APIs. * **dx:** warn users when computed is self-triggering ([#10299](vuejs/core#10299)) ([f7ba97f](vuejs/core@f7ba97f)) ### Performance Improvements * **runtime:** improve `getType()` GC and speed ([#10327](vuejs/core#10327)) ([603a1e1](vuejs/core@603a1e1))

…10184) close vuejs#10098

fix(suspense): properly handle multilevel nesting suspense unmount

ae896c5

edison1105 marked this pull request as draft January 22, 2024 13:23

TheAlexLichter mentioned this pull request Jan 22, 2024

TypeError: Cannot read properties of null (reading 'parentNode') when navigate from page with NuxtLayout as root node nuxt/nuxt#25214

Closed

ferferga mentioned this pull request Jan 22, 2024

Somethings not right about @vue/runtime-dom 3.4.15 #10156

Closed

test: add test case

3b4b8fc

edison1105 changed the title ~~fix(suspense): properly handle multilevel nesting suspense unmount~~ fix(suspense): handle suspense switching with nested suspense Jan 23, 2024

edison1105 marked this pull request as ready for review January 23, 2024 05:58

linspw mentioned this pull request Jan 24, 2024

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

Closed

edison1105 added the ready for review This PR requires more reviews label Jan 26, 2024

edison1105 requested review from haoqunjiang, sxzz, baiwusanyu-c and Alfred-Skyblue January 26, 2024 04:40

edison1105 requested a review from LinusBorg January 26, 2024 04:41

sei-aderr mentioned this pull request Jan 30, 2024

Unhandled error during execution of scheduler flush while redirecting with NuxtLink #10207

Closed

McPizza0 mentioned this pull request Jan 31, 2024

✨ feat(web): Convo Viewer un/inbox#41

Merged

10 tasks

vloss3 mentioned this pull request Feb 13, 2024

TypeError: Cannot read properties of null (reading 'parentNode') when using keepAlive nuxt/nuxt#25751

Closed

haoqunjiang added the ❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. label Feb 21, 2024

yyx990803 merged commit 0f3da05 into vuejs:main Feb 25, 2024
11 checks passed

OnlyWick pushed a commit to OnlyWick/core that referenced this pull request Feb 27, 2024

fix(suspense): handle suspense switching with nested suspense (vuejs#…

5cd74e5

…10184) close vuejs#10098

edison1105 mentioned this pull request Feb 27, 2024

[Bug Report][3.4.20] Uncaught (in promise) TypeError: Cannot read properties of null (reading 'da') #10415

Closed

yangwao mentioned this pull request Mar 12, 2024

feat: enable ssr on /privacy-policy kodadot/nft-gallery#9155

Closed

11 tasks

lynxlangya pushed a commit to lynxlangya/core that referenced this pull request May 30, 2024

fix(suspense): handle suspense switching with nested suspense (vuejs#…

73aea43

…10184) close vuejs#10098

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(suspense): handle suspense switching with nested suspense #10184

fix(suspense): handle suspense switching with nested suspense #10184

edison1105 commented Jan 22, 2024

github-actions bot commented Jan 22, 2024

ferferga commented Jan 22, 2024

edison1105 commented Jan 23, 2024

vue-bot commented Jan 23, 2024

AndrewBogdanovTSS commented Jan 25, 2024

edison1105 commented Jan 26, 2024

becem-gharbi commented Feb 8, 2024

saifobeidat commented Feb 8, 2024

marius-mcfly commented Feb 8, 2024

ranjbarreza commented Feb 9, 2024

enkot commented Feb 9, 2024 •

edited

Loading

ferferga commented Feb 13, 2024 •

edited

Loading

AlexLavoie42 commented Feb 26, 2024

fix(suspense): handle suspense switching with nested suspense #10184

fix(suspense): handle suspense switching with nested suspense #10184

Conversation

edison1105 commented Jan 22, 2024

github-actions bot commented Jan 22, 2024

Size Report

Bundles

Usages

ferferga commented Jan 22, 2024

edison1105 commented Jan 23, 2024

vue-bot commented Jan 23, 2024

AndrewBogdanovTSS commented Jan 25, 2024

edison1105 commented Jan 26, 2024

becem-gharbi commented Feb 8, 2024

saifobeidat commented Feb 8, 2024

marius-mcfly commented Feb 8, 2024

ranjbarreza commented Feb 9, 2024

enkot commented Feb 9, 2024 • edited Loading

ferferga commented Feb 13, 2024 • edited Loading

AlexLavoie42 commented Feb 26, 2024

enkot commented Feb 9, 2024 •

edited

Loading

ferferga commented Feb 13, 2024 •

edited

Loading