fix: correctly resolve client boundary created by server package during dev

packages/rsc/examples/basic/e2e/basic.test.ts

@@ -620,3 +620,13 @@ test("test serialization @js", async ({ page }) => {
   await page.getByTestId("serialization").click();
   await expect(page.getByTestId("serialization")).toHaveText("ok");
 });
+
+test("client-in-server package", async ({ page }) => {
+  await page.goto("./");
+  await expect(page.getByTestId("client-in-server")).toHaveText(
+    "[test-client-in-server-dep: true]",
+  );
+  await expect(page.getByTestId("provider-in-server")).toHaveText(
+    "[test-provider-in-server-dep: true]",
+  );
+});

packages/rsc/examples/basic/package.json

@@ -23,6 +23,8 @@
     "@types/react": "latest",
     "@types/react-dom": "latest",
     "@vitejs/plugin-react": "latest",
+    "@vitejs/test-dep-client-in-server": "file:./test-dep/client-in-server",
+    "@vitejs/test-dep-client-in-server2": "file:./test-dep/client-in-server2",
     "tailwindcss": "^4.1.4",
     "vite": "latest",
     "vite-plugin-inspect": "^11.2.0"

packages/rsc/examples/basic/src/routes/client-in-server/client.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+// @ts-ignore
+import { TestContextValue } from "@vitejs/test-dep-client-in-server2/client";
+
+export function TestContextValueIndirect() {
+  return <TestContextValue />;
+}

packages/rsc/examples/basic/src/routes/client-in-server/server.tsx

@@ -0,0 +1,22 @@
+// @ts-ignore
+import { TestClientInServerDep } from "@vitejs/test-dep-client-in-server/server";
+// @ts-ignore
+import { TestContextProviderInServer } from "@vitejs/test-dep-client-in-server2/server";
+import { TestContextValueIndirect } from "./client";
+
+export function TestClientInServer() {
+  return (
+    <div>
+      <div data-testid="client-in-server">
+        [test-client-in-server-dep: <TestClientInServerDep />]
+      </div>
+      <div data-testid="provider-in-server">
+        [test-provider-in-server-dep:{" "}
+        <TestContextProviderInServer value={true}>
+          <TestContextValueIndirect />
+        </TestContextProviderInServer>
+        ]
+      </div>
+    </div>
+  );
+}

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

@@ -25,6 +25,7 @@ import {
   TestServerActionBindReset,
   TestServerActionBindSimple,
 } from "./action-bind/server";
+import { TestClientInServer } from "./client-in-server/server";
 import { TestSerializationServer } from "./serialization/server";
 import styles from "./server.module.css";
 
@@ -81,6 +82,7 @@ export function Root(props: { url: URL }) {
         <TestServerActionBindClient />
         <TestServerActionBindAction />
         <TestSerializationServer />
+        <TestClientInServer />
       </body>
     </html>
   );

packages/rsc/examples/basic/test-dep/client-in-server/client.js

@@ -0,0 +1,8 @@
+"use client";
+
+import React from "react";
+
+export function TestClient() {
+  const [ok] = React.useState(() => true);
+  return React.createElement("span", null, String(ok));
+}

packages/rsc/examples/basic/test-dep/client-in-server/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@vitejs/test-dep-client-in-server",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "./server": "./server.js"
+  },
+  "peerDependencies": {
+    "react": "*"
+  }
+}

packages/rsc/examples/basic/test-dep/client-in-server/server.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { TestClient } from "./client.js";
+
+export async function TestClientInServerDep() {
+  return React.createElement(TestClient);
+}

packages/rsc/examples/basic/test-dep/client-in-server2/client.js

@@ -0,0 +1,18 @@
+"use client";
+
+import React from "react";
+
+const testContext = React.createContext();
+
+export function TestContextProvider(props) {
+  return React.createElement(
+    testContext.Provider,
+    { value: props.value },
+    props.children,
+  );
+}
+
+export function TestContextValue() {
+  const value = React.useContext(testContext);
+  return React.createElement("span", null, String(value));
+}

packages/rsc/examples/basic/test-dep/client-in-server2/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@vitejs/test-dep-client-in-server2",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "./server": "./server.js",
+    "./client": "./client.js"
+  },
+  "peerDependencies": {
+    "react": "*"
+  }
+}

packages/rsc/examples/basic/test-dep/client-in-server2/server.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { TestContextProvider } from "./client.js";
+
+export function TestContextProviderInServer(props) {
+  return React.createElement(
+    TestContextProvider,
+    { value: props.value },
+    props.children,
+  );
+}

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

@@ -117,4 +117,10 @@ export default { fetch: handler };
   build: {
     minify: false,
   },
+  optimizeDeps: {
+    exclude: [
+      "@vitejs/test-dep-client-in-server/client",
+      "@vitejs/test-dep-client-in-server2/client",
+    ],
+  },
 }) as any;

packages/rsc/src/plugin.ts

@@ -764,11 +764,25 @@ function vitePluginUseClient(): Plugin[] {
         if (!code.includes("use client")) return;
 
         const ast = await parseAstAsync(code);
+        if (!hasDirective(ast.body, "use client")) return;
 
         let importId: string;
         let referenceKey: string;
         const packageSource = packageSources.get(id);
-        if (packageSource) {
+        if (!packageSource && id.includes("?v=")) {
+          assert(this.environment.mode === "dev");
+          // If non package source `?v=<hash>` reached here, this is a client boundary
+          // created by a package imported on server environment, which breaks the
+          // expectation on dependency optimizer on browser. Directly copying over
+          // "?v=<hash>" from client optimizer in client reference can make a hashed
+          // module stale, so we use another virtual module wrapper to delay such process.
+          // TODO: suggest `optimizeDeps.exclude` and skip warning if that's already the case.
+          this.warn(
+            `[vite-rsc] detected an internal client boundary created by a package imported on rsc environment`,
+          );
+          importId = `/@id/__x00__virtual:vite-rsc/client-in-server-package-proxy/${encodeURIComponent(id.split("?v=")[0]!)}`;
+          referenceKey = importId;
+        } else if (packageSource) {
           if (this.environment.mode === "dev") {
             importId = `/@id/__x00__virtual:vite-rsc/client-package-proxy/${packageSource}`;
             referenceKey = importId;
@@ -839,6 +853,28 @@ function vitePluginUseClient(): Plugin[] {
       code = `export default {${code}};\n`;
       return { code, map: null };
     }),
+    {
+      name: "rsc:virtual-client-in-server-package",
+      async load(id) {
+        if (
+          id.startsWith("\0virtual:vite-rsc/client-in-server-package-proxy/")
+        ) {
+          assert.equal(this.environment.mode, "dev");
+          assert.notEqual(this.environment.name, "rsc");
+          id = decodeURIComponent(
+            id.slice(
+              "\0virtual:vite-rsc/client-in-server-package-proxy/".length,
+            ),
+          );
+          // TODO: avoid `export default undefined`
+          return `
+            export * from ${JSON.stringify(id)};
+            import * as __all__ from ${JSON.stringify(id)};
+            export default __all__.default;
+          `;
+        }
+      },
+    },
     {
       name: "rsc:virtual-client-package",
       resolveId: {