fix(rsc): optimize use-sync-external-store

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

@@ -52,7 +52,7 @@
     const editor = f.createEditor('vite.config.ts')
     editor.edit((s) =>
       s.replace(
-        `'@vitejs/test-dep-transitive-cjs > use-sync-external-store/shim/index.js',`,
+        `include: ['@vitejs/test-dep-transitive-cjs > @vitejs/test-dep-cjs'],`,
         ``,
       ),
     )
@@ -779,7 +779,7 @@
     // client is interactive before suspense is resolved
     await page.goto(f.url('./?test-suspense=1000'), { waitUntil: 'commit' })
     await waitForHydration(page)
     await expect(page.getByTestId('suspense')).toContainText(
       'suspense-fallback',
     )
     await expect(page.getByTestId('suspense')).toContainText(
@@ -941,9 +941,10 @@
   test('transitive cjs dep', async ({ page }) => {
     await page.goto(f.url())
     await waitForHydration(page)
-    await expect(page.getByTestId('transitive-cjs-client')).toHaveText(
-      'ok:browser',
-    )
+    await expect(page.getByTestId('transitive-cjs-client')).toHaveText('ok')
+    await expect(
+      page.getByTestId('transitive-use-sync-external-store-client'),
+    ).toHaveText('ok:browser')
   })
 
   test('use cache function', async ({ page }) => {

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

@@ -22,6 +22,7 @@
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "latest",
     "@vitejs/test-dep-transitive-cjs": "file:./test-dep/transitive-cjs",
+    "@vitejs/test-dep-transitive-use-sync-external-store": "file:./test-dep/transitive-use-sync-external-store",
     "@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

@@ -3,10 +3,18 @@
 // @ts-ignore
 import { TestClient } from '@vitejs/test-dep-transitive-cjs/client'
 
+// @ts-ignore
+import { TestClient as TestClient2 } from '@vitejs/test-dep-transitive-use-sync-external-store/client'
+
 export function TestTransitiveCjsClient() {
   return (
-    <div>
-      [test-dep-transitive-cjs-client: <TestClient />]
-    </div>
+    <>
+      <div>
+        [test-dep-transitive-cjs-client: <TestClient />]
+      </div>
+      <div>
+        [test-dep-transitive-use-sync-external-store-client: <TestClient2 />]
+      </div>
+    </>
   )
 }

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

@@ -0,0 +1 @@
+exports.ok = 'ok'

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

@@ -0,0 +1,9 @@
+{
+  "name": "@vitejs/test-dep-cjs",
+  "private": true,
+  "type": "commonjs",
+  "exports": "./index.js",
+  "peerDependencies": {
+    "react": "*"
+  }
+}

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

@@ -2,26 +2,16 @@
 
 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'
+import { ok } from '@vitejs/test-dep-cjs'
 
 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,
+    ok,
   )
 }

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

@@ -6,7 +6,7 @@
     "./client": "./client.js"
   },
   "dependencies": {
-    "use-sync-external-store": "^1.5.0"
+    "@vitejs/test-dep-cjs": "file:../cjs"
   },
   "peerDependencies": {
     "react": "*"

packages/plugin-rsc/examples/basic/test-dep/transitive-use-sync-external-store/client.js

@@ -0,0 +1,28 @@
+'use client'
+
+import React from 'react'
+
+// similar to
+// https://github.com/vercel/swr/blob/063fe55dddb95f0b6c3f1637a935c43d732ded78/src/index/use-swr.ts#L3
+// https://github.com/TanStack/store/blob/1d1323283e79059821d6c731eaaee60e4143dbc2/packages/react-store/src/index.ts#L1
+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-use-sync-external-store-client',
+    },
+    value,
+  )
+}

packages/plugin-rsc/examples/basic/test-dep/transitive-use-sync-external-store/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@vitejs/test-dep-transitive-use-sync-external-store",
+  "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

@@ -153,9 +153,7 @@ export default { fetch: handler };
     },
     ssr: {
       optimizeDeps: {
-        include: [
-          '@vitejs/test-dep-transitive-cjs > use-sync-external-store/shim/index.js',
-        ],
+        include: ['@vitejs/test-dep-transitive-cjs > @vitejs/test-dep-cjs'],
       },
     },
   },

packages/plugin-rsc/package.json

@@ -44,6 +44,7 @@
     "magic-string": "^0.30.17",
     "periscopic": "^4.0.2",
     "turbo-stream": "^3.1.0",
+    "use-sync-external-store": "^1.5.0",
     "vitefu": "^1.1.1"
   },
   "devDependencies": {

packages/plugin-rsc/src/plugin.ts

@@ -882,6 +882,7 @@ globalThis.AsyncLocalStorage = __viteRscAyncHooks.AsyncLocalStorage;
     ...(rscPluginOptions.validateImports !== false
       ? [validateImportPlugin()]
       : []),
+    ...vendorUseSyncExternalStorePlugin(),
     scanBuildStripPlugin(),
     detectNonOptimizedCjsPlugin(),
   ]
@@ -2124,6 +2125,41 @@ function validateImportPlugin(): Plugin {
   }
 }
 
+function vendorUseSyncExternalStorePlugin(): Plugin[] {
+  // vendor and optimize use-sync-external-store out of the box
+  // since this is a common enough cjs, which tends to break
+  // other packages (e.g. swr, @tanstack/react-store)
+
+  // https://github.com/facebook/react/blob/c499adf8c89bbfd884f4d3a58c4e510001383525/packages/use-sync-external-store/package.json#L5-L20
+  const exports = [
+    'use-sync-external-store',
+    'use-sync-external-store/with-selector',
+    'use-sync-external-store/with-selector.js',
+    'use-sync-external-store/shim',
+    'use-sync-external-store/shim/index.js',
+    'use-sync-external-store/shim/with-selector',
+    'use-sync-external-store/shim/with-selector.js',
+  ]
+
+  return [
+    {
+      name: 'rsc:vendor-use-sync-external-store',
+      apply: 'serve',
+      config() {
+        return {
+          environments: {
+            ssr: {
+              optimizeDeps: {
+                include: exports.map((e) => `${PKG_NAME} > ${e}`),
+              },
+            },
+          },
+        }
+      },
+    },
+  ]
+}
+
 function sortObject<T extends object>(o: T) {
   return Object.fromEntries(
     Object.entries(o).sort(([a], [b]) => a.localeCompare(b)),