fix(transition): skip enter guard while hmr updating by edison1105 · Pull Request #14611 · vuejs/core

edison1105 · 2026-03-21T01:25:49Z

close #14608

Summary by CodeRabbit

Bug Fixes
- Fixed transition enter flow to properly execute during Hot Module Replacement updates, resolving issues with out-in transition mode when child components are reloaded.
Tests
- Added E2E test for transitions with KeepAlive and Hot Module Replacement reload cycles.

coderabbitai · 2026-03-21T01:25:53Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 05c96df7-3135-41ce-8ace-e1a0564815fe

📥 Commits

Reviewing files that changed from the base of the PR and between 691b590 and 4d26ba3.

📒 Files selected for processing (1)

packages/runtime-core/src/renderer.ts

🚧 Files skipped from review as they are similar to previous changes (1)

packages/runtime-core/src/renderer.ts

📝 Walkthrough

Walkthrough

The PR fixes a display issue that occurs when Transition and KeepAlive are used together during HMR. The solution introduces HMR state tracking to allow the transition's enter phase to proceed during module reloads, even when a leave transition is in progress. Changes include a new HMR helper, conditional logic in BaseTransition, state management in renderer mounting, and an E2E test validating the fix.

Changes

Cohort / File(s)	Summary
HMR State Management `packages/runtime-core/src/hmr.ts`	Added `setHmrUpdating` helper function that sets the `isHmrUpdating` flag and returns the previous value, using try/finally to ensure state restoration even on early exit.
Transition Enter Logic `packages/runtime-core/src/components/BaseTransition.ts`	Imported `isHmrUpdating` and modified enter-path early-return guard to only suppress the "prevent enter if leave in progress" check when HMR is not actively updating.
Renderer Hook Execution `packages/runtime-core/src/renderer.ts`	Extended HMR import and wrapped post-render hook execution in `mountElement` with HMR state management via `setHmrUpdating`, ensuring prior state is restored in finally block.
E2E Test Coverage `packages/vue/__tests__/e2e/Transition.spec.ts`	Added test case validating Transition with KeepAlive behaves correctly during HMR reload, verifying intermediate DOM state and final rendered output.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

fix(transition): prevent enter if leave is in progress #14443: Directly modifies the same enter-path guard in BaseTransition.ts that prevents vnode from entering when in leavingVNodesCache.
fix(hmr): prevent update unmounting component during HMR reload #13815: Adjusts HMR update guards around instance updates using similar isHmrUpdating state management patterns.
fix(hmr): avoid hydration for hmr updating #12262: Modifies HMR state helpers and renderer mounting logic related to transition lifecycle.

Suggested labels

scope: transition, scope: hmr, :hammer: p3-minor-bug

Suggested reviewers

johnsoncodehk

Poem

🐰 A rabbit leaps through code with care,
When HMR dances in the air,
Transitions blend and KeepAlive sways,
State restored through try/finally's grace,
Enter flows, leaves may wait—hop hooray! 🌿✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: fixing transition behavior by skipping the enter guard during HMR updates, which directly addresses the linked issue `#14608`.
Linked Issues check	✅ Passed	The PR implements a targeted fix for the HMR + Transition + KeepAlive display issue by introducing HMR state tracking to suppress the enter guard during HMR updates, with supporting test coverage validating the fix.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the HMR transition issue: HMR state management in hmr.ts, conditional guard logic in BaseTransition.ts, renderer hook wrapping in renderer.ts, and E2E test validation.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch edison/fix/14608

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

github-actions · 2026-03-21T01:26:36Z

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	105 kB	39.7 kB	35.7 kB
vue.global.prod.js	163 kB	59.7 kB	53.1 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	48.2 kB	18.7 kB	17.2 kB
createApp	56.3 kB	21.8 kB	19.9 kB
createSSRApp	60.6 kB	23.5 kB	21.5 kB
defineCustomElement	62.5 kB	23.7 kB	21.6 kB
overall	70.7 kB	27.1 kB	24.7 kB

pkg-pr-new · 2026-03-21T01:26:57Z

Open in StackBlitz

@vue/compiler-core

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

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

yarn add https://pkg.pr.new/@vue/compiler-core@14611.tgz

@vue/compiler-dom

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

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

yarn add https://pkg.pr.new/@vue/compiler-dom@14611.tgz

@vue/compiler-sfc

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

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

yarn add https://pkg.pr.new/@vue/compiler-sfc@14611.tgz

@vue/compiler-ssr

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

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

yarn add https://pkg.pr.new/@vue/compiler-ssr@14611.tgz

@vue/reactivity

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

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

yarn add https://pkg.pr.new/@vue/reactivity@14611.tgz

@vue/runtime-core

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

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

yarn add https://pkg.pr.new/@vue/runtime-core@14611.tgz

@vue/runtime-dom

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

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

yarn add https://pkg.pr.new/@vue/runtime-dom@14611.tgz

@vue/server-renderer

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

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

yarn add https://pkg.pr.new/@vue/server-renderer@14611.tgz

@vue/shared

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

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

yarn add https://pkg.pr.new/@vue/shared@14611.tgz

vue

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

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

yarn add https://pkg.pr.new/vue@14611.tgz

@vue/compat

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

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

yarn add https://pkg.pr.new/@vue/compat@14611.tgz

commit: 4d26ba3

…KeepAlive

edison1105 · 2026-03-23T00:36:19Z

/ecosystem-ci run

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/runtime-core/src/renderer.ts`:
- Around line 741-749: The HMR flag set by setHmrUpdating inside the callback
passed to queuePostRenderEffect can leak if any hook throws; update the callback
so it captures prev = setHmrUpdating(isHmr) (when __DEV__), then executes
invokeVNodeHook(vnodeHook,...), transition!.enter(el), and
invokeDirectiveHook(...) inside a try block and always restore the HMR flag in a
finally block by calling setHmrUpdating(prev). Ensure you still only call
setHmrUpdating when __DEV__ and preserve usage of vnodeHook, invokeVNodeHook,
needCallTransitionHooks/transition.enter, and invokeDirectiveHook.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d26de5e0-0ab6-4c68-ab01-c4a067500edd

📥 Commits

Reviewing files that changed from the base of the PR and between d61d803 and 691b590.

📒 Files selected for processing (4)

packages/runtime-core/src/components/BaseTransition.ts
packages/runtime-core/src/hmr.ts
packages/runtime-core/src/renderer.ts
packages/vue/__tests__/e2e/Transition.spec.ts

vue-bot · 2026-03-23T00:41:33Z

📝 Ran ecosystem CI: Open

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

edison1105 force-pushed the edison/fix/14608 branch from 9564977 to 4000ce9 Compare March 21, 2026 01:54

edison1105 changed the title ~~fix(transition): prevent enter hook from firing during HMR updates~~ fix(transition): skip enter guard while hmr updating Mar 21, 2026

fix(transition): skip enter guard while hmr updating

285f274

edison1105 force-pushed the edison/fix/14608 branch from 4000ce9 to 285f274 Compare March 21, 2026 02:22

test(transition): add HMR reload test for child component wrapped in …

691b590

…KeepAlive

edison1105 marked this pull request as ready for review March 23, 2026 00:35

coderabbitai bot reviewed Mar 23, 2026

View reviewed changes

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

fix: ensure HMR updating state is restored after vnode hooks execution

4d26ba3

edison1105 added ready to merge The PR is ready to be merged. scope: transition scope: hmr labels Mar 23, 2026

edison1105 merged commit be0a2f1 into main Mar 25, 2026
16 checks passed

edison1105 deleted the edison/fix/14608 branch March 25, 2026 06:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(transition): skip enter guard while hmr updating#14611

fix(transition): skip enter guard while hmr updating#14611
edison1105 merged 3 commits intomainfrom
edison/fix/14608

edison1105 commented Mar 21, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Mar 21, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Uh oh!

github-actions bot commented Mar 21, 2026 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Mar 21, 2026 •

edited

Loading

Uh oh!

edison1105 commented Mar 23, 2026

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

vue-bot commented Mar 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

edison1105 commented Mar 21, 2026 • 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 Mar 21, 2026 • 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

Suggested reviewers

Poem

Uh oh!

github-actions bot commented Mar 21, 2026 • 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 Mar 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

edison1105 commented Mar 23, 2026

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

vue-bot commented Mar 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

edison1105 commented Mar 21, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 21, 2026 •

edited

Loading

github-actions bot commented Mar 21, 2026 •

edited

Loading

pkg-pr-new bot commented Mar 21, 2026 •

edited

Loading