fix(rsc): keep client HMR for client modules co-located with rsc-graph code#1248
Open
sreetamdas wants to merge 4 commits into
Open
fix(rsc): keep client HMR for client modules co-located with rsc-graph code#1248sreetamdas wants to merge 4 commits into
sreetamdas wants to merge 4 commits into
Conversation
…h code The client hotUpdate branch returns [] for any file present in the rsc module graph that is not inside a "use client" boundary, to avoid full reloads from server-only files pulled into the client graph as style deps (tailwind / addWatchFile). This also suppresses HMR for genuine client modules that happen to co-reside with rsc-graph code. A framework route file (e.g. TanStack Start) that co-locates a createServerFn with a client-rendered route component is in the rsc graph, yet the route component is a real client module (imported by the client route tree), so its Fast Refresh is wrongly suppressed and edits never reach the browser. Only suppress when the file has no non-CSS client importers, mirroring the existing rsc-branch check (importers.every(isCSSRequest)).
This was referenced Jun 12, 2026
hi-ogawa
requested changes
Jun 13, 2026
hi-ogawa
left a comment
Contributor
There was a problem hiding this comment.
Can you add regression test in e2e?
Author
|
Added in Triggering this outside a framework needed a specific setup. The guard only returns
Editing the component then asserts Fast Refresh with state preserved. Fails on main (the edit is dropped on the client), passes with the fix. |
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
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.
Description
Problem
In dev, editing a route/page component does not Fast Refresh when that component's file also contains server‑graph code (e.g. a co‑located server function). On save, only an
(rsc)HMR update fires; the client environment receives nothing, so the DOM never updates and there is no full reload either.Root cause
In the client environment,
hotUpdatereturns[]for any file that is present in therscmodule graph and not inside a"use client"boundary:Per the comment, this guard exists to avoid full reloads when server‑only files leak into the client graph as style/watch deps (Tailwind /
addWatchFile). But the discriminator — "in the rsc graph and not a"use client"boundary" — also matches a genuine client module that merely co‑resides with rsc‑graph code.Concretely: a framework route file (e.g. TanStack Start) that co‑locates a
createServerFnwith a client‑rendered route component ends up in the rsc graph (via the server‑fn split), while the route component is a real client module imported by the client route tree — but it is not a"use client"reference, soisInsideClientBoundaryisfalse. The guard then suppresses the route component's client HMR, and editing its JSX does nothing in dev.Fix
Only
return []when the file has no non‑CSS client importers — i.e. it really is present only as a style/watch dep. This mirrors the discriminator thersc‑branch already uses (importers.every(isCSSRequest)). Files with genuine non‑CSS client importers (the route component, imported by the route tree) keep their client HMR / Fast Refresh.Reproduction
Minimal standalone repro (clone →
pnpm install && pnpm dev→ edit the route component → no update):https://github.com/sreetamdas/tanstack-rsc-hmr-co-located-serverfn-repro
It's a TanStack Start RSC app with one route whose file contains both a
createServerFnand the route component. Moving the server fn into a separate file restores HMR. Also reproduced in TanStack's owne2e/react-start/rsc(TanStack/router#7621 — a canary that fails today and passes with this fix), and confirmed on a production app (plugin-rsc@0.5.27).Open questions (this is a draft — starting the conversation before polishing)
"use client"boundary — a pattern not present in this repo's examples (thereact-routerexample uses"use client"for client routes and splits client/server across files). Happy to add an upstream test wherever you'd prefer (a dedicated example, or extending an existing one) — guidance on the shape you'd accept would help.Thanks!