feat(rsc): use locally installed react-server-dom-webpack when available (#915)

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: hi-ogawa <[email protected]>
Co-authored-by: Hiroshi Ogawa <[email protected]>

Author: Copilot

packages/plugin-rsc/README.md

@@ -561,6 +561,10 @@ Note that while there are official npm packages [`server-only`](https://www.npmj
 
 This build-time validation is enabled by default and can be disabled by setting `validateImports: false` in the plugin options.
 
+### `react-server-dom-webpack`
+
+Currently `@vitejs/plugin-rsc` includes a vendored version of `react-server-dom-webpack`. However, when `react-server-dom-webpack` is installed in user project's dependencies, the plugin will automatically use it instead. This allows you to stay up-to-date with the latest React Server Components runtime without waiting for plugin updates.
+
 ## Credits
 
 This project builds on fundamental techniques and insights from pioneering Vite RSC implementations.

packages/plugin-rsc/e2e/isolated.test.ts

@@ -1,10 +1,11 @@
-import { test } from '@playwright/test'
+import { expect, test, type Page } from '@playwright/test'
 import { setupIsolatedFixture, useFixture } from './fixture'
 import { defineStarterTest } from './starter'
 import path from 'node:path'
 import os from 'node:os'
 import * as vite from 'vite'
 import { waitForHydration } from './helper'
+import { x } from 'tinyexec'
 
 test.describe(() => {
   // use RUNNER_TEMP on Github Actions
@@ -20,6 +21,10 @@ test.describe(() => {
   test.describe('dev-isolated', () => {
     const f = useFixture({ root: tmpRoot, mode: 'dev' })
     defineStarterTest(f)
+
+    test('verify react-server-dom-webpack', async ({ page }) => {
+      await testReactServerDom(page, f.url(), true)
+    })
   })
 
   test.describe('build-isolated', () => {
@@ -86,3 +91,77 @@ test.describe('examples/ssg', () => {
     })
   })
 })
+
+test.describe('react-server-dom-webpack', () => {
+  const tmpRoot = path.join(
+    process.env['RUNNER_TEMP'] || os.tmpdir(),
+    'test-vite-rsc-webpack',
+  )
+  test.beforeAll(async () => {
+    await setupIsolatedFixture({
+      src: 'examples/starter',
+      dest: tmpRoot,
+    })
+    const {
+      default: { version },
+    } = await import('react-server-dom-webpack/package.json', {
+      with: { type: 'json' },
+    })
+    await x('pnpm', ['i', `react-server-dom-webpack@${version}`], {
+      throwOnError: true,
+      nodeOptions: {
+        cwd: tmpRoot,
+      },
+    })
+  })
+
+  test.describe('dev', () => {
+    const f = useFixture({ root: tmpRoot, mode: 'dev' })
+    defineStarterTest(f)
+
+    test('verify react-server-dom-webpack', async ({ page }) => {
+      await testReactServerDom(page, f.url(), false)
+    })
+  })
+
+  test.describe('build', () => {
+    const f = useFixture({ root: tmpRoot, mode: 'build' })
+    defineStarterTest(f)
+  })
+})
+
+async function testReactServerDom(
+  page: Page,
+  url: string,
+  expectVendor: boolean,
+) {
+  let hasVendor = false
+  let hasNonVendor = false
+  page.on('request', async (request) => {
+    if (
+      request
+        .url()
+        .includes('.vite/deps/react-server-dom-webpack_client__browser.js')
+    ) {
+      hasNonVendor = true
+    }
+    if (
+      request
+        .url()
+        .includes(
+          '.vite/deps/@vitejs_plugin-rsc_vendor_react-server-dom_client__browser.js',
+        )
+    ) {
+      hasVendor = true
+    }
+  })
+  await page.goto(url)
+  await waitForHydration(page)
+  if (expectVendor) {
+    expect(hasVendor).toBe(true)
+    expect(hasNonVendor).toBe(false)
+  } else {
+    expect(hasVendor).toBe(false)
+    expect(hasNonVendor).toBe(true)
+  }
+}

packages/plugin-rsc/package.json

@@ -67,6 +67,12 @@
   "peerDependencies": {
     "react": "*",
     "react-dom": "*",
+    "react-server-dom-webpack": "*",
     "vite": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-server-dom-webpack": {
+      "optional": true
+    }
   }
 }

packages/plugin-rsc/src/plugin.ts

@@ -325,6 +325,8 @@ export default function vitePluginRsc(
     }
   }
 
+  let hasReactServerDomWebpack = false
+
   return [
     {
       name: 'rsc',
@@ -358,6 +360,12 @@ export default function vitePluginRsc(
           PKG_NAME,
           ...result.ssr.noExternal.sort(),
         ]
+        hasReactServerDomWebpack = result.ssr.noExternal.includes(
+          'react-server-dom-webpack',
+        )
+        const reactServerDomPackageName = hasReactServerDomWebpack
+          ? 'react-server-dom-webpack'
+          : REACT_SERVER_DOM_NAME
 
         return {
           appType: config.appType ?? 'custom',
@@ -380,7 +388,7 @@ export default function vitePluginRsc(
               optimizeDeps: {
                 include: [
                   'react-dom/client',
-                  `${REACT_SERVER_DOM_NAME}/client.browser`,
+                  `${reactServerDomPackageName}/client.browser`,
                 ],
                 exclude: [PKG_NAME],
               },
@@ -406,7 +414,7 @@ export default function vitePluginRsc(
                   'react/jsx-dev-runtime',
                   'react-dom/server.edge',
                   'react-dom/static.edge',
-                  `${REACT_SERVER_DOM_NAME}/client.edge`,
+                  `${reactServerDomPackageName}/client.edge`,
                 ],
                 exclude: [PKG_NAME],
               },
@@ -432,8 +440,8 @@ export default function vitePluginRsc(
                   'react-dom',
                   'react/jsx-runtime',
                   'react/jsx-dev-runtime',
-                  `${REACT_SERVER_DOM_NAME}/server.edge`,
-                  `${REACT_SERVER_DOM_NAME}/client.edge`,
+                  `${reactServerDomPackageName}/server.edge`,
+                  `${reactServerDomPackageName}/client.edge`,
                 ],
                 exclude: [PKG_NAME],
               },
@@ -670,6 +678,29 @@ export default function vitePluginRsc(
         }
       },
     },
+    {
+      // Alias plugin to redirect vendored react-server-dom imports to user's package when available
+      name: 'rsc:react-server-dom-webpack-alias',
+      resolveId: {
+        order: 'pre',
+        async handler(source, importer, options) {
+          if (
+            hasReactServerDomWebpack &&
+            source.startsWith(`${PKG_NAME}/vendor/react-server-dom/`)
+          ) {
+            const newSource = source.replace(
+              `${PKG_NAME}/vendor/react-server-dom`,
+              'react-server-dom-webpack',
+            )
+            const resolved = await this.resolve(newSource, importer, {
+              ...options,
+              skipSelf: true,
+            })
+            return resolved
+          }
+        },
+      },
+    },
     {
       // backward compat: `loadSsrModule(name)` implemented as `loadModule("ssr", name)`
       name: 'rsc:load-ssr-module',