Vite: exclude modules within .server directories from client build (#8154)

Co-authored-by: Mark Dalgleish <[email protected]>

Author: pcattori

integration/helpers/vite-template/tsconfig.json

@@ -16,8 +16,6 @@
     "paths": {
       "~/*": ["./app/*"]
     },
-
-    // Remix takes care of building everything in `remix build`.
     "noEmit": true
   }
 }

integration/helpers/vite.ts

@@ -1,4 +1,4 @@
-import { spawn, type ChildProcess } from "node:child_process";
+import { spawn, spawnSync, type ChildProcess } from "node:child_process";
 import path from "node:path";
 import type { Readable } from "node:stream";
 import url from "node:url";
@@ -119,6 +119,24 @@ const createDev =
     return async () => await kill(proc.pid!);
   };
 
+export const viteBuild = (args: { cwd: string }) => {
+  let vite = resolveBin.sync("vite");
+  let commands = [
+    [vite, "build"],
+    [vite, "build", "--ssr"],
+  ];
+  let results = [];
+  for (let command of commands) {
+    let result = spawnSync("node", command, {
+      cwd: args.cwd,
+      env: {
+        ...process.env,
+      },
+    });
+    results.push(result);
+  }
+  return results;
+};
 export const viteDev = createDev([resolveBin.sync("vite"), "dev"]);
 export const customDev = createDev(["./server.mjs"]);
 

integration/package.json

@@ -34,6 +34,7 @@
     "strip-indent": "^3.0.0",
     "tailwindcss": "^3.3.0",
     "type-fest": "^4.0.0",
-    "typescript": "^5.1.0"
+    "typescript": "^5.1.0",
+    "vite-tsconfig-paths": "^4.2.1"
   }
 }

integration/vite-dot-server-test.ts

@@ -0,0 +1,105 @@
+import * as path from "node:path";
+import { test, expect } from "@playwright/test";
+import shell from "shelljs";
+import glob from "glob";
+
+import { createProject, viteBuild } from "./helpers/vite.js";
+
+let files = {
+  "app/utils.server.ts": String.raw`
+    export const dotServerFile = "SERVER_ONLY_FILE";
+  `,
+  "app/.server/utils.ts": String.raw`
+    export const dotServerDir = "SERVER_ONLY_DIR";
+  `,
+};
+
+test("Vite / build / .server file in client fails with expected error", async () => {
+  let cwd = await createProject({
+    ...files,
+    "app/routes/fail-server-file-in-client.tsx": String.raw`
+      import { dotServerFile } from "~/utils.server";
+
+      export default function() {
+        console.log(dotServerFile);
+        return <h1>Fail: Server file included in client</h1>
+      }
+    `,
+  });
+  let client = viteBuild({ cwd })[0];
+  let stderr = client.stderr.toString("utf8");
+  expect(stderr).toMatch(
+    `"dotServerFile" is not exported by "app/utils.server.ts"`
+  );
+});
+
+test("Vite / build / .server dir in client fails with expected error", async () => {
+  let cwd = await createProject({
+    ...files,
+    "app/routes/fail-server-dir-in-client.tsx": String.raw`
+      import { dotServerDir } from "~/.server/utils";
+
+      export default function() {
+        console.log(dotServerDir);
+        return <h1>Fail: Server directory included in client</h1>
+      }
+    `,
+  });
+  let client = viteBuild({ cwd })[0];
+  let stderr = client.stderr.toString("utf8");
+  expect(stderr).toMatch(
+    `"dotServerDir" is not exported by "app/.server/utils.ts"`
+  );
+});
+
+test("Vite / build / dead-code elimination for server exports", async () => {
+  let cwd = await createProject({
+    ...files,
+    "app/routes/remove-server-exports-and-dce.tsx": String.raw`
+        import fs from "node:fs";
+        import { json } from "@remix-run/node";
+        import { useLoaderData } from "@remix-run/react";
+
+        import { dotServerFile } from "../utils.server";
+        import { dotServerDir } from "../.server/utils";
+
+        export const loader = () => {
+          let contents = fs.readFileSync("blah");
+          let data = dotServerFile + dotServerDir + serverOnly + contents;
+          return json({ data });
+        }
+
+        export const action = () => {
+          console.log(dotServerFile, dotServerDir, serverOnly);
+          return null;
+        }
+
+        export default function() {
+          let { data } = useLoaderData<typeof loader>();
+          return (
+            <>
+              <h2>Index</h2>
+              <p>{data}</p>
+            </>
+          );
+        }
+      `,
+  });
+  let client = viteBuild({ cwd })[0];
+  expect(client.status).toBe(0);
+
+  // detect client asset files
+  let assetFiles = glob.sync("**/*.@(js|jsx|ts|tsx)", {
+    cwd: path.join(cwd, "build/client"),
+    absolute: true,
+  });
+
+  // grep for server-only values in client assets
+  let result = shell
+    .grep("-l", /SERVER_ONLY_FILE|SERVER_ONLY_DIR|node:fs/, assetFiles)
+    .stdout.trim()
+    .split("\n")
+    .filter((line) => line.length > 0);
+
+  expect(result).toHaveLength(0);
+});

packages/remix-dev/vite/plugin.ts

@@ -889,22 +889,30 @@ export const remixVitePlugin: RemixVitePlugin = (options = {}) => {
       name: "remix-empty-server-modules",
       enforce: "pre",
       async transform(_code, id, options) {
-        if (!options?.ssr && /\.server(\.[cm]?[jt]sx?)?$/.test(id))
+        if (options?.ssr) return;
+        let serverFileRE = /\.server(\.[cm]?[jt]sx?)?$/;
+        let serverDirRE = /\/\.server\//;
+        if (serverFileRE.test(id) || serverDirRE.test(id)) {
           return {
             code: "export default {}",
             map: null,
           };
+        }
       },
     },
     {
       name: "remix-empty-client-modules",
       enforce: "pre",
       async transform(_code, id, options) {
-        if (options?.ssr && /\.client(\.[cm]?[jt]sx?)?$/.test(id))
+        if (!options?.ssr) return;
+        let clientFileRE = /\.client(\.[cm]?[jt]sx?)?$/;
+        let clientDirRE = /\/\.client\//;
+        if (clientFileRE.test(id) || clientDirRE.test(id)) {
           return {
             code: "export default {}",
             map: null,
           };
+        }
       },
     },
     {