fix: fix server-only and client-only + fix(next): preserve exit code (#…

…480)

.github/workflows/ci.yml

@@ -41,6 +41,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
+      - run: pnpm -C packages/react-server test-e2e
       - run: pnpm -C packages/react-server/examples/next test-e2e
       - run: pnpm -C packages/react-server/examples/next build
       - run: pnpm -C packages/react-server/examples/next test-e2e-preview
@@ -57,7 +58,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
-      - run: pnpm -C packages/react-server test-e2e
+      - run: pnpm -C packages/react-server test-package
 
   test-vite-node-miniflare:
     runs-on: ubuntu-latest

packages/react-server-next/src/cli.ts

@@ -28,10 +28,13 @@ function main() {
     createRequire(import.meta.url).resolve("vite/package.json"),
     "../bin/vite.js",
   );
-  spawn("node", [viteBin, ...argv], {
+  const proc = spawn("node", [viteBin, ...argv], {
     shell: false,
     stdio: "inherit",
   });
+  proc.on("close", (code) => {
+    process.exitCode = code ?? 1;
+  });
 }
 
 function setupViteConfig() {

packages/react-server/e2e/helper.ts

@@ -0,0 +1,51 @@
+import { spawn } from "child_process";
+import { readFileSync, writeFileSync } from "fs";
+
+export function createEditor(filepath: string) {
+  const init = readFileSync(filepath, "utf-8");
+  return {
+    edit(editFn: (data: string) => string) {
+      const next = editFn(init);
+      writeFileSync(filepath, next);
+    },
+    [Symbol.dispose]() {
+      writeFileSync(filepath, init);
+    },
+  };
+}
+
+export async function runCommand(command: string, ...args: string[]) {
+  const proc = spawn(command, args, {
+    stdio: "pipe",
+    env: {
+      ...process.env,
+      NODE_ENV: undefined,
+    },
+  });
+
+  let stdout = "";
+  let stderr = "";
+  proc.stdout.on("data", (data) => {
+    stdout += data.toString();
+  });
+
+  proc.stderr.on("data", (data) => {
+    stderr += data.toString();
+  });
+
+  const code = await new Promise<number>((resolve, reject) => {
+    proc.once("close", (code) => {
+      if (code === null) {
+        reject(new Error("exit null"));
+      } else {
+        resolve(code);
+      }
+    });
+
+    proc.once("error", (error) => {
+      reject(error);
+    });
+  });
+
+  return { code, stdout, stderr };
+}

packages/react-server/e2e/server-only-client-only.test.ts

@@ -0,0 +1,40 @@
+import { beforeAll, expect, it } from "vitest";
+import { createEditor, runCommand } from "./helper";
+
+beforeAll(() => {
+  process.chdir("examples/minimal");
+});
+
+it("server only - success", async () => {
+  using file = createEditor("app/_action.tsx");
+  file.edit((s) => s + `\n\n;import "server-only"`);
+
+  const result = await runCommand("pnpm", "build");
+  expect(result.code).toBe(0);
+});
+
+it("server only - error", async () => {
+  using file = createEditor("app/_client.tsx");
+  file.edit((s) => s + `\n\n;import "server-only"`);
+
+  const result = await runCommand("pnpm", "build");
+  expect(result.code).toBe(1);
+  expect(result.stderr).toContain(`'server-only' is included in client build `);
+});
+
+it("client only - success", async () => {
+  using file = createEditor("app/_client.tsx");
+  file.edit((s) => s + `\n\n;import "client-only"`);
+
+  const result = await runCommand("pnpm", "build");
+  expect(result.code).toBe(0);
+});
+
+it("client only - error", async () => {
+  using file = createEditor("app/_action.tsx");
+  file.edit((s) => s + `\n\n;import "client-only"`);
+
+  const result = await runCommand("pnpm", "build");
+  expect(result.code).toBe(1);
+  expect(result.stderr).toContain(`'client-only' is included in server build `);
+});

packages/react-server/examples/minimal/README.md

@@ -0,0 +1 @@
+minimal template for testing

packages/react-server/examples/minimal/app/_action.tsx

@@ -0,0 +1,11 @@
+"use server";
+
+let count = 0;
+
+export async function changeCount() {
+  count++;
+}
+
+export function getCount() {
+  return count;
+}

packages/react-server/examples/minimal/app/_client.tsx

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

packages/react-server/examples/minimal/app/layout.tsx

@@ -0,0 +1,12 @@
+import type React from "react";
+
+export default function Layout(props: React.PropsWithChildren) {
+  return (
+    <html>
+      <body>
+        <div>[Layout]</div>
+        {props.children}
+      </body>
+    </html>
+  );
+}

packages/react-server/examples/minimal/app/page.tsx

@@ -0,0 +1,14 @@
+import { changeCount, getCount } from "./_action";
+import { TestClient } from "./_client";
+
+export default function Page() {
+  return (
+    <>
+      <div>[Page]</div>
+      <TestClient />
+      <form action={changeCount}>
+        <button>Action: {getCount()}</button>
+      </form>
+    </>
+  );
+}

packages/react-server/examples/minimal/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@hiogawa/react-server-example-minimal",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@hiogawa/react-server": "workspace:*",
+    "next": "link:../../../react-server-next",
+    "react": "19.0.0-rc-c21bcd627b-20240624",
+    "react-dom": "19.0.0-rc-c21bcd627b-20240624",
+    "react-server-dom-webpack": "19.0.0-rc-c21bcd627b-20240624"
+  },
+  "devDependencies": {
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0",
+    "vite": "latest"
+  }
+}

packages/react-server/examples/minimal/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "skipLibCheck": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "target": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "types": ["next"],
+    "jsx": "react-jsx"
+  }
+}

packages/react-server/examples/minimal/vite.config.ts

@@ -0,0 +1,6 @@
+import next from "next/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [next()],
+});

packages/react-server/package.json

@@ -61,7 +61,8 @@
     "build": "tsup",
     "prepack": "tsup --clean",
     "test": "vitest",
-    "test-e2e": "bash misc/test.sh"
+    "test-e2e": "vitest -c vitest.config.e2e.ts",
+    "test-package": "bash misc/test.sh"
   },
   "dependencies": {
     "@hiogawa/transforms": "workspace:*",

packages/react-server/src/plugin/index.ts

@@ -192,7 +192,7 @@ export function vitePluginReactServer(options?: {
       ),
 
       validateImportPlugin({
-        "client-only": `'client-only' is included in client build`,
+        "client-only": `'client-only' is included in server build`,
         "server-only": true,
       }),
 
@@ -453,7 +453,7 @@ function validateImportPlugin(entries: Record<string, string | true>): Plugin {
         // skip validation during optimizeDeps scan since for now
         // we want to allow going through server/client boundary loosely
         if (
-          entry ||
+          entry === true ||
           manager.buildType === "scan" ||
           ("scan" in options && options.scan)
         ) {

packages/react-server/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "../../tsconfig.base.json",
-  "include": ["src", "vitest.config.ts", "tsup.config.ts"],
+  "include": ["src", "e2e", "*.ts"],
   "compilerOptions": {
     "types": ["vite/client", "react/experimental", "react-dom/experimental"],
     "jsx": "react-jsx"

packages/react-server/vitest.config.e2e.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  esbuild: {
+    supported: {
+      using: false,
+    },
+  },
+  test: {
+    dir: "e2e",
+    pool: "forks",
+    fileParallelism: false,
+  },
+});