From 1534c780011b03f52930be48c4a3a91d9df62437 Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Wed, 6 Dec 2023 11:00:25 +1100
Subject: [PATCH] fix(vite): make server .client exports undefined (#8220)

---
 .changeset/rude-keys-heal.md      | 8 ++++----
 packages/remix-dev/vite/plugin.ts | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/.changeset/rude-keys-heal.md b/.changeset/rude-keys-heal.md
index 7b54c69e2a9..325ccf4297e 100644
--- a/.changeset/rude-keys-heal.md
+++ b/.changeset/rude-keys-heal.md
@@ -2,14 +2,14 @@
 "@remix-run/dev": patch
 ---
 
-Vite: Preserve names for exports from .client imports
+Vite: Preserve names for exports from `.client` modules
 
 Unlike `.server` modules, the main idea is not to prevent code from leaking into the server build
 since the client build is already public. Rather, the goal is to isolate the SSR render from client-only code.
 Routes need to import code from `.client` modules without compilation failing and then rely on runtime checks
-to determine if the code is running on the server or client.
+or otherwise ensure that execution only happens within a client-only context (e.g. event handlers, `useEffect`).
 
 Replacing `.client` modules with empty modules would cause the build to fail as ESM named imports are statically analyzed.
-So instead, we preserve the named export but replace each exported value with an empty object.
-That way, the import is valid at build time and the standard runtime checks can be used to determine if then
+So instead, we preserve the named export but replace each exported value with `undefined`.
+That way, the import is valid at build time and standard runtime checks can be used to determine if the
 code is running on the server or client.
diff --git a/packages/remix-dev/vite/plugin.ts b/packages/remix-dev/vite/plugin.ts
index f3892243898..68c8e64ef98 100644
--- a/packages/remix-dev/vite/plugin.ts
+++ b/packages/remix-dev/vite/plugin.ts
@@ -958,8 +958,8 @@ export const remixVitePlugin: RemixVitePlugin = (options = {}) => {
             code: exports
               .map(({ n: name }) =>
                 name === "default"
-                  ? "export default {};"
-                  : `export const ${name} = {};`
+                  ? "export default undefined;"
+                  : `export const ${name} = undefined;`
               )
               .join("\n"),
             map: null,