fix: Vite HMR broken when using reactDevtools() plugin#34
Merged
Conversation
The connect module was destroying the react-refresh runtime's inject wrapper when it deleted __REACT_DEVTOOLS_GLOBAL_HOOK__ and called initialize(). This caused Fast Refresh to lose its scheduleRefresh reference, silently breaking HMR. Fix by saving the old hook's inject before replacement and re-applying it after initialize(), so both devtools and Fast Refresh share the hook. Also replace the unnecessary top-level-await esbuild option with optimizeDeps.include for react-devtools-core, preventing Vite from triggering dep re-optimization at runtime. Closes #33 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Verifies that file changes are hot-updated without a full page reload when the reactDevtools() Vite plugin is active. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: 705c92c The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
This was referenced Mar 4, 2026
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
reactDevtools()is added tovite.config.tsreact-refreshruntime'sinjectwrapper when replacing the devtools hook stub, so both Fast Refresh and devtools inspection work correctlytop-level-awaitesbuild option withoptimizeDeps.includeforreact-devtools-coreto prevent Vite dep re-optimization at runtimeRoot Cause
@vitejs/plugin-reactwraps__REACT_DEVTOOLS_GLOBAL_HOOK__.injectwith a react-refresh wrapper that capturesscheduleRefreshfrom React's renderer. The connect module was deleting the hook and callinginitialize(), which installed a new hook without the refresh wrapper — silently breaking Fast Refresh.Test plan
window.__hmrMarkersurvives (no full reload)Closes #33
🤖 Generated with Claude Code