Vite: client references to .server code result in build-time error (#…

…8184)

.changeset/wise-pumas-thank.md

@@ -0,0 +1,10 @@
+---
+"@remix-run/dev": patch
+---
+
+Vite: Errors at build-time when client imports .server default export
+
+Remix already stripped .server file code before ensuring that server code never makes it into the client.
+That results in errors when client code tries to import server code, which is exactly what we want!
+But those errors were happening at runtime for default imports.
+A better experience is to have those errors happen at build-time so that you guarantee that your users won't hit them.

integration/vite-dot-server-test.ts

@@ -8,13 +8,15 @@ import { createProject, viteBuild } from "./helpers/vite.js";
 let files = {
   "app/utils.server.ts": String.raw`
     export const dotServerFile = "SERVER_ONLY_FILE";
+    export default dotServerFile;
   `,
   "app/.server/utils.ts": String.raw`
     export const dotServerDir = "SERVER_ONLY_DIR";
+    export default dotServerDir;
   `,
 };
 
-test("Vite / build / .server file in client fails with expected error", async () => {
+test("Vite /  .server file / named import in client fails with expected error", async () => {
   let cwd = await createProject({
     ...files,
     "app/routes/fail-server-file-in-client.tsx": String.raw`
@@ -33,7 +35,43 @@ test("Vite / build / .server file in client fails with expected error", async ()
   );
 });
 
-test("Vite / build / .server dir in client fails with expected error", async () => {
+test("Vite /  .server file / namespace import in client fails with expected error", async () => {
+  let cwd = await createProject({
+    ...files,
+    "app/routes/fail-server-file-in-client.tsx": String.raw`
+      import * as utils from "~/utils.server";
+
+      export default function() {
+        console.log(utils.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 / .server file / default import 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(`"default" is not exported by "app/utils.server.ts"`);
+});
+
+test("Vite / .server dir / named import in client fails with expected error", async () => {
   let cwd = await createProject({
     ...files,
     "app/routes/fail-server-dir-in-client.tsx": String.raw`
@@ -52,7 +90,43 @@ test("Vite / build / .server dir in client fails with expected error", async ()
   );
 });
 
-test("Vite / build / dead-code elimination for server exports", async () => {
+test("Vite / .server dir / namespace import in client fails with expected error", async () => {
+  let cwd = await createProject({
+    ...files,
+    "app/routes/fail-server-dir-in-client.tsx": String.raw`
+      import * as utils from "~/.server/utils";
+
+      export default function() {
+        console.log(utils.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 / .server dir / default import 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(`"default" is not exported by "app/.server/utils.ts"`);
+});
+
+test("Vite / dead-code elimination for server exports", async () => {
   let cwd = await createProject({
     ...files,
     "app/routes/remove-server-exports-and-dce.tsx": String.raw`

packages/remix-dev/vite/plugin.ts

@@ -912,7 +912,7 @@ export const remixVitePlugin: RemixVitePlugin = (options = {}) => {
         let serverDirRE = /\/\.server\//;
         if (serverFileRE.test(id) || serverDirRE.test(id)) {
           return {
-            code: "export default {}",
+            code: "export {}",
             map: null,
           };
         }
@@ -927,7 +927,7 @@ export const remixVitePlugin: RemixVitePlugin = (options = {}) => {
         let clientDirRE = /\/\.client\//;
         if (clientFileRE.test(id) || clientDirRE.test(id)) {
           return {
-            code: "export default {}",
+            code: "export {}",
             map: null,
           };
         }