-
-
Notifications
You must be signed in to change notification settings - Fork 8.9k
fix(hmr): prevent __VUE_HMR_RUNTIME__ from being overwritten by vue runtime in 3rd-party libraries #13817
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
WalkthroughIntroduces a guard before installing the HMR runtime onto the global object in packages/runtime-core/src/hmr.ts, avoiding overwriting an existing global HMR runtime. createRecord, rerender, and reload remain wrapped and exposed via HMRRuntime. No public API signatures changed; DEV gating and other HMR logic remain the same. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant App as App Module
participant HMR as HMR Module (hmr.ts)
participant Global as globalThis
participant Runtime as Existing HMR Runtime?
App->>HMR: import hmr.ts (DEV)
HMR->>Global: check __VUE_HMR_RUNTIME__
alt Runtime not installed
HMR->>Global: set __VUE_HMR_RUNTIME__ = { createRecord, rerender, reload }
note right of Global: New runtime installed
else Runtime already present
HMR->>HMR: skip install (do not overwrite)
note right of Runtime: Preserve existing runtime from other tooling
end
App->>Global: Use __VUE_HMR_RUNTIME__ methods
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes(none) Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
Size ReportBundles
Usages
|
@vue/compiler-core
@vue/compiler-dom
@vue/compiler-sfc
@vue/compiler-ssr
@vue/reactivity
@vue/runtime-core
@vue/runtime-dom
@vue/server-renderer
@vue/shared
vue
@vue/compat
commit: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
🧹 Nitpick comments (2)
packages/runtime-core/src/hmr.ts (2)
36-37
: Nit: tighten comment wordingMinor grammar/clarity improvement.
- // custom-element libraries bundle Vue to simplify usage outside Vue projects but - // it overwrite __VUE_HMR_RUNTIME__, causing HMR to break. + // Some custom-element libraries bundle Vue to simplify usage outside Vue projects, + // and they overwrite __VUE_HMR_RUNTIME__, causing HMR to break.
38-44
: Robust existence checkTruthiness checks can be defeated by nulling out the property. Using hasOwnProperty (as in the refactor above) or
in
is safer.- if (!globalThis.__VUE_HMR_RUNTIME__) { + if (!Object.prototype.hasOwnProperty.call(globalObj, '__VUE_HMR_RUNTIME__')) {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
packages/runtime-core/src/hmr.ts
(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
packages/runtime-core/src/hmr.ts (1)
packages/shared/src/general.ts (1)
getGlobalThis
(188-202)
🪛 Biome (2.1.2)
packages/runtime-core/src/hmr.ts
[error] 34-34: Do not shadow the global "globalThis" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules
- GitHub Check: Header rules
- GitHub Check: Pages changed
🔇 Additional comments (1)
packages/runtime-core/src/hmr.ts (1)
34-44
: Use browser console for HMR runtime overwrite test
The shell script failed becauseconsole.log
is JS, not shell. Please paste and run the following in your browser’s dev console:console.log('__VUE_HMR_RUNTIME__ before:', globalThis.__VUE_HMR_RUNTIME__); globalThis.__VUE_HMR_RUNTIME__ = { hijacked: true }; console.log('__VUE_HMR_RUNTIME__ after:', globalThis.__VUE_HMR_RUNTIME__);Expected: the second log still shows the original HMR runtime object, not
{ hijacked: true }
.
rerender: tryWrap(rerender), | ||
reload: tryWrap(reload), | ||
} as HMRRuntime | ||
const globalThis = getGlobalThis() |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fix linter error: don’t shadow globalThis
Renaming the local to globalObj resolves Biome’s noShadowRestrictedNames error and avoids confusion.
If you don’t adopt the refactor above, at minimum apply:
- const globalThis = getGlobalThis()
+ const globalObj = getGlobalThis() as any
And update the subsequent references accordingly.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
const globalThis = getGlobalThis() | |
const globalObj = getGlobalThis() as any |
🧰 Tools
🪛 Biome (2.1.2)
[error] 34-34: Do not shadow the global "globalThis" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
🤖 Prompt for AI Agents
In packages/runtime-core/src/hmr.ts around line 34, the local constant currently
named globalThis shadows the restricted globalThis identifier; rename it (e.g.,
to globalObj) and update all subsequent references in this file to use the new
name to satisfy Biome’s noShadowRestrictedNames linter rule and avoid confusion.
close vitejs/vite-plugin-vue#644
Summary by CodeRabbit