fix(runtime-core): correctly propagate placeholder for async component #14177

rzzf · 2025-12-06T18:03:58Z

Summary by CodeRabbit

Tests
- Added test case for rendering multiple async components inside Suspense with dynamic lists.
Bug Fixes
- Improved element anchoring for unresolved async components during rendering.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2025-12-06T18:04:07Z

Walkthrough

Fixes Suspense element ordering issue when using v-for with wrapper components around async components. Introduces a helper function to resolve actual elements from unresolved async component sub-trees during anchor calculation in patch operations, extending the fallback chain for proper element positioning.

Changes

Cohort / File(s)	Summary
Test for async component list rendering `packages/runtime-core/__tests__/components/Suspense.spec.ts`	Adds test case validating v-for with async components wrapped by an HOC inside Suspense; mutates items array and asserts correct render order and content.
Anchor resolution for unresolved async components `packages/runtime-core/src/renderer.ts`	Introduces `getSubTreeElement(vnode)` helper to traverse unresolved async component sub-trees and retrieve host elements; extends anchor fallback chain in `patchBlockChildren` to use this helper when standard anchors are unavailable.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

New helper function is straightforward with minimal logic
Targeted bug fix extending an existing fallback chain
Test validates the fix with clear assertions

Possibly related PRs

fix(suspense): handle edge case in patching list nodes within Suspense #13306: Modifies renderer.ts patching logic for Suspense/async-component list scenarios with similar anchor/container fallback extensions.
fix(runtime-core): ensure correct anchor el for unresolved async components #13560: Addresses renderer anchoring for unresolved async components by adding placeholder handling alongside this PR's getSubTreeElement approach.
fix(suspense): clear placeholder and fallback el refs after resolved to enable GC #13928: Touches Suspense/async-component placeholder handling in related vnode resolution contexts.

Suggested labels

ready to merge

Poem

🐰 A hop, a skip, a vnode's fix,
The async dance no longer breaks,
With getSubTreeElement's gentle mix,
The render order now partakes,
In perfect v-for harmony! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main fix: correcting placeholder propagation for async components in Suspense contexts, which is the core issue addressed.
Linked Issues check	✅ Passed	The PR implements the fix for issue #14173 by introducing a getSubTreeElement helper to properly resolve async component elements, enabling correct anchor calculation and preserving render order in Suspense + v-for scenarios.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the async component placeholder propagation issue: test case validates the fix, renderer modification implements the anchor logic improvement, with no unrelated changes present.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2025-12-06T18:04:56Z

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	103 kB (+93 B)	39 kB (+31 B)	35.2 kB (+43 B)
vue.global.prod.js	161 kB (+93 B)	59 kB (+36 B)	52.4 kB (-124 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	47 kB (+90 B)	18.4 kB (+32 B)	16.8 kB (+27 B)
createApp	55.2 kB (+86 B)	21.4 kB (+30 B)	19.6 kB (+13 B)
createSSRApp	59.5 kB (+93 B)	23.2 kB (+34 B)	21.2 kB (+37 B)
defineCustomElement	60.8 kB (+90 B)	23.2 kB (+35 B)	21.1 kB (+29 B)
overall	69.5 kB (+90 B)	26.6 kB (+29 B)	24.3 kB (+11 B)

pkg-pr-new · 2025-12-06T18:05:07Z

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@14177

npm i https://pkg.pr.new/@vue/compiler-core@14177

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@14177

npm i https://pkg.pr.new/@vue/compiler-dom@14177

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@14177

npm i https://pkg.pr.new/@vue/compiler-sfc@14177

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@14177

npm i https://pkg.pr.new/@vue/compiler-ssr@14177

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@14177

npm i https://pkg.pr.new/@vue/reactivity@14177

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@14177

npm i https://pkg.pr.new/@vue/runtime-core@14177

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@14177

npm i https://pkg.pr.new/@vue/runtime-dom@14177

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@14177

npm i https://pkg.pr.new/@vue/server-renderer@14177

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@14177

npm i https://pkg.pr.new/@vue/shared@14177

yarn add https://pkg.pr.new/@vue/[email protected]

vue

pnpm add https://pkg.pr.new/vue@14177

npm i https://pkg.pr.new/vue@14177

yarn add https://pkg.pr.new/[email protected]

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@14177

npm i https://pkg.pr.new/@vue/compat@14177

yarn add https://pkg.pr.new/@vue/[email protected]

commit: ac75959

edison1105 · 2025-12-08T02:01:23Z

packages/runtime-core/src/componentRenderUtils.ts

    if (root === vnode) {
      ;(vnode = parent.vnode).el = el
+      if (root.placeholder) {
+        vnode.placeholder = root.placeholder


This should cause a memory leak, leading to the placeholder referencing a detached DOM node. Because when Suspense resolves, we only clear the placeholder of the async component. see

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

Line 742 in 44ee438

vnode.placeholder = null

The correct approach should be to attempt to locate the placeholder on anchorVNode.component.subTree here

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

Line 1999 in 44ee438

anchorVNode.el || anchorVNode.placeholder

Thank you for your guidance. I’ve made the changes accordingly.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/runtime-core/src/renderer.ts (1)
2423-2429: Add defensive null check for subTree.

While subTree should always be set after setupComponent, consider adding a defensive check to prevent potential runtime errors in edge cases (e.g., error handling, invalid component states):

Apply this diff to make the function more robust:
 const getSubTreeElement = (vnode: VNode): RendererNode | null => {
   let current = vnode
-  while (current.component) {
+  while (current.component && current.component.subTree) {
     current = current.component.subTree
   }
   return current.el || current.placeholder
 }
This ensures we won't attempt to traverse into components with uninitialized subtrees.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ea03d8e and ac75959.

📒 Files selected for processing (1)

packages/runtime-core/src/renderer.ts (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

packages/runtime-core/src/renderer.ts (2)

packages/runtime-core/src/vnode.ts (1)

VNode (160-257)

packages/runtime-core/src/index.ts (2)

VNode (250-250)

RendererNode (306-306)

🔇 Additional comments (1)

packages/runtime-core/src/renderer.ts (1)

1999-2001: LGTM! Anchor fallback chain correctly handles wrapper components.

The extended fallback chain properly resolves the anchor element when async components are wrapped by other components. The progression from el → placeholder → getSubTreeElement() ensures correct element ordering in Suspense scenarios with v-for.

edison1105 · 2025-12-09T02:25:01Z

packages/runtime-core/src/renderer.ts

+    while (current.component) {
+      current = current.component.subTree
+    }
+    return current.el || current.placeholder


There's no need to get current.el here; if el has a value, then anchorVNode.el must also have a value.
Just need to get current.placeholder.

This implementation isn't quite right either; we shouldn't keep searching down the subTree but should early return as soon as we find the placeholder.

Thanks for the PR, but I perfer https://github.com/vuejs/core/pull/14182/files

fix(runtime-core): correctly propagate placeholder for async component

ea03d8e

edison1105 reviewed Dec 8, 2025

View reviewed changes

edison1105 added scope: suspense 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. wait changes labels Dec 8, 2025

fix: update

ac75959

rzzf force-pushed the fix/14173 branch from 07b636b to ac75959 Compare December 8, 2025 03:56

coderabbitai bot reviewed Dec 8, 2025

View reviewed changes

edison1105 reviewed Dec 9, 2025

View reviewed changes

edison1105 closed this Dec 9, 2025

rzzf deleted the fix/14173 branch December 9, 2025 02:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(runtime-core): correctly propagate placeholder for async component #14177

fix(runtime-core): correctly propagate placeholder for async component #14177

rzzf commented Dec 6, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Dec 6, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Dec 6, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Dec 6, 2025 •

edited

Loading

Uh oh!

edison1105 Dec 8, 2025

Uh oh!

edison1105 Dec 8, 2025

Uh oh!

rzzf Dec 8, 2025

Uh oh!

coderabbitai bot left a comment

Uh oh!

edison1105 Dec 9, 2025 •

edited

Loading

Uh oh!

edison1105 Dec 9, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

fix(runtime-core): correctly propagate placeholder for async component #14177

fix(runtime-core): correctly propagate placeholder for async component #14177

Conversation

rzzf commented Dec 6, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Dec 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

Pre-merge checks and finishing touches

Uh oh!

github-actions bot commented Dec 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Size Report

Bundles

Usages

Uh oh!

pkg-pr-new bot commented Dec 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

edison1105 Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

edison1105 Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

rzzf Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

edison1105 Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

edison1105 Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

rzzf commented Dec 6, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Dec 6, 2025 •

edited

Loading

github-actions bot commented Dec 6, 2025 •

edited

Loading

pkg-pr-new bot commented Dec 6, 2025 •

edited

Loading

edison1105 Dec 9, 2025 •

edited

Loading

edison1105 Dec 9, 2025 •

edited

Loading