test(rsc): add transitive cjs dep example (#611)

Co-authored-by: Claude <[email protected]>

Author: hi-ogawa

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

@@ -11,9 +11,6 @@ import {
 import path from 'node:path'
 import os from 'node:os'
 
-// TODO: parallel?
-// TODO: all tests don't need to be tested in all variants?
-
 test.describe('dev-default', () => {
   const f = useFixture({ root: 'examples/basic', mode: 'dev' })
   defineTest(f)
@@ -824,6 +821,14 @@ function defineTest(f: Fixture) {
     )
   })
 
+  test('transitive cjs dep', async ({ page }) => {
+    await page.goto(f.url())
+    await waitForHydration(page)
+    await expect(page.getByTestId('transitive-cjs-client')).toHaveText(
+      'ok:browser',
+    )
+  })
+
   test('use cache function', async ({ page }) => {
     await page.goto(f.url())
     await waitForHydration(page)

packages/plugin-rsc/examples/basic/package.json

@@ -21,6 +21,7 @@
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "latest",
+    "@vitejs/test-dep-transitive-cjs": "file:./test-dep/transitive-cjs",
     "@vitejs/test-dep-client-in-server": "file:./test-dep/client-in-server",
     "@vitejs/test-dep-client-in-server2": "file:./test-dep/client-in-server2",
     "@vitejs/test-dep-server-in-client": "file:./test-dep/server-in-client",

packages/plugin-rsc/examples/basic/src/routes/deps/transitive-cjs/client.tsx

@@ -0,0 +1,12 @@
+'use client'
+
+// @ts-ignore
+import { TestClient } from '@vitejs/test-dep-transitive-cjs/client'
+
+export function TestTransitiveCjsClient() {
+  return (
+    <div>
+      [test-dep-transitive-cjs-client: <TestClient />]
+    </div>
+  )
+}

packages/plugin-rsc/examples/basic/src/routes/root.tsx

@@ -29,6 +29,7 @@ import { TestTemporaryReference } from './temporary-reference/client'
 import { TestUseCache } from './use-cache/server'
 import { TestHydrationMismatch } from './hydration-mismatch/server'
 import { TestBrowserOnly } from './browser-only/client'
+import { TestTransitiveCjsClient } from './deps/transitive-cjs/client'
 
 export function Root(props: { url: URL }) {
   return (
@@ -67,6 +68,7 @@ export function Root(props: { url: URL }) {
         <TestClientInServer />
         <TestServerInServer />
         <TestServerInClient />
+        <TestTransitiveCjsClient />
         <TestActionStateServer />
         <TestModuleInvalidationServer />
         <TestBrowserOnly />

packages/plugin-rsc/examples/basic/test-dep/transitive-cjs/client.js

@@ -0,0 +1,27 @@
+'use client'
+
+import React from 'react'
+
+// similar to swr
+// https://github.com/vercel/swr/blob/063fe55dddb95f0b6c3f1637a935c43d732ded78/src/index/use-swr.ts#L3
+import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js'
+
+const h = React.createElement
+
+const noopStore = () => () => {}
+
+export function TestClient() {
+  const value = useSyncExternalStore(
+    noopStore,
+    () => 'ok:browser',
+    () => 'ok:ssr',
+  )
+
+  return h(
+    'span',
+    {
+      'data-testid': 'transitive-cjs-client',
+    },
+    value,
+  )
+}

packages/plugin-rsc/examples/basic/test-dep/transitive-cjs/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@vitejs/test-dep-transitive-cjs",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "./client": "./client.js"
+  },
+  "dependencies": {
+    "use-sync-external-store": "^1.5.0"
+  },
+  "peerDependencies": {
+    "react": "*"
+  }
+}

packages/plugin-rsc/examples/basic/vite.config.ts

@@ -135,12 +135,29 @@ export default { fetch: handler };
     minify: false,
     manifest: true,
   },
-  optimizeDeps: {
-    exclude: [
-      '@vitejs/test-dep-client-in-server/client',
-      '@vitejs/test-dep-client-in-server2/client',
-      '@vitejs/test-dep-server-in-client/client',
-    ],
+  environments: {
+    client: {
+      optimizeDeps: {
+        entries: [
+          './src/routes/**/client.tsx',
+          './src/framework/entry.browser.tsx',
+        ],
+        exclude: [
+          '@vitejs/test-dep-client-in-server/client',
+          '@vitejs/test-dep-client-in-server2/client',
+          '@vitejs/test-dep-server-in-client/client',
+        ],
+      },
+    },
+    ssr: {
+      optimizeDeps: {
+        // TODO: this should be somehow auto inferred or at least show a warning
+        // to guide users to `optimizeDeps.include`
+        include: [
+          '@vitejs/test-dep-transitive-cjs > use-sync-external-store/shim/index.js',
+        ],
+      },
+    },
   },
 }) as any