test(rsc): failing e2e repro for CSS HMR via nested RSC Flight stream

Author: jantimon

packages/plugin-rsc/e2e/nested-rsc-css-hmr.test.ts

@@ -0,0 +1,63 @@
+import { expect, test } from '@playwright/test'
+import { useFixture } from './fixture'
+import { expectNoReload, waitForHydration } from './helper'
+
+// Reproduces an HMR bug affecting server components whose modules live
+// exclusively in the `rsc` environment and are rendered through a nested
+// Flight stream (`renderToReadableStream` + `createFromReadableStream`),
+// the pattern used by frameworks like TanStack Start's `createServerFn` +
+// `renderServerComponent`.
+//
+// The fixture sets `cssLinkPrecedence: false` (matching TanStack Start's
+// config) so plugin-rsc's emitted `<link>` has no `precedence` attribute,
+// disabling React 19's resource-manager dedup/swap path that would
+// otherwise paper over the underlying bugs.
+//
+// Expected failures on current `main` (both tied to plugin-rsc's dev-mode
+// CSS pipeline):
+//   1. `normalizeViteImportAnalysisUrl` gates the `?t=<HMRTimestamp>`
+//      cache-buster on `environment.config.consumer === 'client'`, so
+//      CSS hrefs emitted into the Flight stream from the `rsc` env
+//      (consumer: 'server') never get cache-busted.
+//   2. `hotUpdate` in plugin-rsc does not invalidate importers of a
+//      changed CSS file in the `rsc` module graph, so the derived
+//      `\0virtual:vite-rsc/css?type=rsc&id=…` virtual keeps emitting
+//      the same stale href on re-render.
+//
+// The test edits the CSS file twice in the same dev session (change
+// color, then revert). This matters because the reporter's proposed
+// two-line patch fixes the **first** CSS edit after dev-server start
+// but not subsequent edits in the same session — the `?t=` fix lands
+// once, the virtual's `load` re-runs once (via some transitive Vite
+// invalidation), and then on the second CSS change `mod.importers` no
+// longer carries what's needed to re-invalidate the virtual. Asserting
+// after the revert catches that the fix is incomplete.
+
+test.describe('nested-rsc-css-hmr', () => {
+  const f = useFixture({
+    root: 'examples/nested-rsc-css-hmr',
+    mode: 'dev',
+  })
+
+  test('css hmr through nested RSC Flight stream', async ({ page }) => {
+    await page.goto(f.url())
+    await waitForHydration(page)
+    await expect(page.locator('.test-nested-rsc-inner')).toHaveCSS(
+      'color',
+      'rgb(255, 165, 0)',
+    )
+
+    await using _ = await expectNoReload(page)
+    const editor = f.createEditor('src/nested-rsc/inner.css')
+    editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
+    await expect(page.locator('.test-nested-rsc-inner')).toHaveCSS(
+      'color',
+      'rgb(0, 165, 255)',
+    )
+    editor.reset()
+    await expect(page.locator('.test-nested-rsc-inner')).toHaveCSS(
+      'color',
+      'rgb(255, 165, 0)',
+    )
+  })
+})

packages/plugin-rsc/examples/nested-rsc-css-hmr/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

packages/plugin-rsc/examples/nested-rsc-css-hmr/README.md

@@ -0,0 +1,40 @@
+# Vite + RSC
+
+This example shows how to set up a React application with [Server Component](https://react.dev/reference/rsc/server-components) features on Vite using [`@vitejs/plugin-rsc`](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc).
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc/examples/starter)
+
+```sh
+# run dev server
+npm run dev
+
+# build for production and preview
+npm run build
+npm run preview
+```
+
+## API usage
+
+See [`@vitejs/plugin-rsc`](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc) for the documentation.
+
+- [`vite.config.ts`](./vite.config.ts)
+  - `@vitejs/plugin-rsc/plugin`
+- [`./src/framework/entry.rsc.tsx`](./src/framework/entry.rsc.tsx)
+  - `@vitejs/plugin-rsc/rsc`
+  - `import.meta.viteRsc.loadModule`
+- [`./src/framework/entry.ssr.tsx`](./src/framework/entry.ssr.tsx)
+  - `@vitejs/plugin-rsc/ssr`
+  - `import.meta.viteRsc.loadBootstrapScriptContent`
+  - `rsc-html-stream/server`
+- [`./src/framework/entry.browser.tsx`](./src/framework/entry.browser.tsx)
+  - `@vitejs/plugin-rsc/browser`
+  - `rsc-html-stream/client`
+
+## Notes
+
+- [`./src/framework/entry.{browser,rsc,ssr}.tsx`](./src/framework) (with inline comments) provides an overview of how low level RSC (React flight) API can be used to build RSC framework.
+- You can use [`vite-plugin-inspect`](https://github.com/antfu-collective/vite-plugin-inspect) to understand how `"use client"` and `"use server"` directives are transformed internally.
+
+## Deployment
+
+See [vite-plugin-rsc-deploy-example](https://github.com/hi-ogawa/vite-plugin-rsc-deploy-example)

packages/plugin-rsc/examples/nested-rsc-css-hmr/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@vitejs/plugin-rsc-examples-nested-rsc-css-hmr",
+  "version": "0.0.0",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "latest",
+    "@vitejs/plugin-rsc": "latest",
+    "rsc-html-stream": "^0.0.7",
+    "vite": "^8.0.8"
+  }
+}

packages/plugin-rsc/examples/nested-rsc-css-hmr/public/vite.svg

@@ -0,0 +1,11 @@
+'use server'
+
+let serverCounter = 0
+
+export async function getServerCounter() {
+  return serverCounter
+}
+
+export async function updateServerCounter(change: number) {
+  serverCounter += change
+}

packages/plugin-rsc/examples/nested-rsc-css-hmr/src/action.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import React from 'react'
+
+export function ClientCounter() {
+  const [count, setCount] = React.useState(0)
+
+  return (
+    <button onClick={() => setCount((count) => count + 1)}>
+      Client Counter: {count}
+    </button>
+  )
+}

packages/plugin-rsc/examples/nested-rsc-css-hmr/src/assets/react.svg

@@ -0,0 +1,138 @@
+import {
+  createFromReadableStream,
+  createFromFetch,
+  setServerCallback,
+  createTemporaryReferenceSet,
+  encodeReply,
+} from '@vitejs/plugin-rsc/browser'
+import React from 'react'
+import { createRoot, hydrateRoot } from 'react-dom/client'
+import { rscStream } from 'rsc-html-stream/client'
+import type { RscPayload } from './entry.rsc'
+import { GlobalErrorBoundary } from './error-boundary'
+import { createRscRenderRequest } from './request'
+
+async function main() {
+  // stash `setPayload` function to trigger re-rendering
+  // from outside of `BrowserRoot` component (e.g. server function call, navigation, hmr)
+  let setPayload: (v: RscPayload) => void
+
+  // deserialize RSC stream back to React VDOM for CSR
+  const initialPayload = await createFromReadableStream<RscPayload>(
+    // initial RSC stream is injected in SSR stream as <script>...FLIGHT_DATA...</script>
+    rscStream,
+  )
+
+  // browser root component to (re-)render RSC payload as state
+  function BrowserRoot() {
+    const [payload, setPayload_] = React.useState(initialPayload)
+
+    React.useEffect(() => {
+      setPayload = (v) => React.startTransition(() => setPayload_(v))
+    }, [setPayload_])
+
+    // re-fetch/render on client side navigation
+    React.useEffect(() => {
+      return listenNavigation(() => fetchRscPayload())
+    }, [])
+
+    return payload.root
+  }
+
+  // re-fetch RSC and trigger re-rendering
+  async function fetchRscPayload() {
+    const renderRequest = createRscRenderRequest(window.location.href)
+    const payload = await createFromFetch<RscPayload>(fetch(renderRequest))
+    setPayload(payload)
+  }
+
+  // register a handler which will be internally called by React
+  // on server function request after hydration.
+  setServerCallback(async (id, args) => {
+    const temporaryReferences = createTemporaryReferenceSet()
+    const renderRequest = createRscRenderRequest(window.location.href, {
+      id,
+      body: await encodeReply(args, { temporaryReferences }),
+    })
+    const payload = await createFromFetch<RscPayload>(fetch(renderRequest), {
+      temporaryReferences,
+    })
+    setPayload(payload)
+    const { ok, data } = payload.returnValue!
+    if (!ok) throw data
+    return data
+  })
+
+  // hydration
+  const browserRoot = (
+    <React.StrictMode>
+      <GlobalErrorBoundary>
+        <BrowserRoot />
+      </GlobalErrorBoundary>
+    </React.StrictMode>
+  )
+  if ('__NO_HYDRATE' in globalThis) {
+    createRoot(document).render(browserRoot)
+  } else {
+    hydrateRoot(document, browserRoot, {
+      formState: initialPayload.formState,
+    })
+  }
+
+  // implement server HMR by triggering re-fetch/render of RSC upon server code change
+  if (import.meta.hot) {
+    import.meta.hot.on('rsc:update', () => {
+      fetchRscPayload()
+    })
+  }
+}
+
+// a little helper to setup events interception for client side navigation
+function listenNavigation(onNavigation: () => void) {
+  window.addEventListener('popstate', onNavigation)
+
+  const oldPushState = window.history.pushState
+  window.history.pushState = function (...args) {
+    const res = oldPushState.apply(this, args)
+    onNavigation()
+    return res
+  }
+
+  const oldReplaceState = window.history.replaceState
+  window.history.replaceState = function (...args) {
+    const res = oldReplaceState.apply(this, args)
+    onNavigation()
+    return res
+  }
+
+  function onClick(e: MouseEvent) {
+    let link = (e.target as Element).closest('a')
+    if (
+      link &&
+      link instanceof HTMLAnchorElement &&
+      link.href &&
+      (!link.target || link.target === '_self') &&
+      link.origin === location.origin &&
+      !link.hasAttribute('download') &&
+      e.button === 0 && // left clicks only
+      !e.metaKey && // open in new tab (mac)
+      !e.ctrlKey && // open in new tab (windows)
+      !e.altKey && // download
+      !e.shiftKey &&
+      !e.defaultPrevented
+    ) {
+      e.preventDefault()
+      history.pushState(null, '', link.href)
+    }
+  }
+  document.addEventListener('click', onClick)
+
+  return () => {
+    document.removeEventListener('click', onClick)
+    window.removeEventListener('popstate', onNavigation)
+    window.history.pushState = oldPushState
+    window.history.replaceState = oldReplaceState
+  }
+}
+
+main()