fix(hmr): prevent __VUE_HMR_RUNTIME__ from being overwritten by vue runtime in 3rd-party libraries #13817
+11
−5
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
WalkthroughIntroduces a guard before installing the HMR runtime onto the global object in Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant App as App Module
participant HMR as HMR Module (hmr.ts)
participant Global as globalThis
App->>HMR: import hmr.ts (DEV)
HMR->>Global: check __VUE_HMR_RUNTIME__
alt not present
HMR->>Global: assign { createRecord, rerender, reload }
note right of Global #DFF0D8: New runtime installed
else present
HMR-->>Global: skip assignment (do not overwrite)
note right of Global #FBEED5: Existing runtime preserved
end
App->>Global: call __VUE_HMR_RUNTIME__ methods
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Assessment against linked issues
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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)
✨ 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.
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
inis 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.logis 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 }.
7 tasks
|
/ecosystem-ci run |
|
📝 Ran ecosystem CI: Open
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
close vitejs/vite-plugin-vue#644
Summary by CodeRabbit