From 780c46214e4e8e6f49697d085e8b74fd890f105d Mon Sep 17 00:00:00 2001
From: Matt Brophy <matt@brophy.org>
Date: Wed, 28 Feb 2024 10:26:38 -0500
Subject: [PATCH] Add ssr.noExternal to the SPA template vite config

---
 docs/future/spa-mode.md      | 5 ++++-
 templates/spa/vite.config.ts | 5 +++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/docs/future/spa-mode.md b/docs/future/spa-mode.md
index c0e96086ddc..34bb40530fb 100644
--- a/docs/future/spa-mode.md
+++ b/docs/future/spa-mode.md
@@ -225,7 +225,8 @@ startTransition(() => {
 - It's important to note that Remix SPA mode generates your `index.html` file by performing a "pre-render" of your root route on the server during the build
   - This means that while you're creating a SPA, you still have a "server build" and "server render" step, so you do need to be careful about using dependencies that reference client-only aspects such as `document`, `window`, `localStorage`, etc.
   - Generally speaking, the way to resolve these issues is to import any browser-only libraries from `entry.client.tsx` so they don't end up in the server build
-  - Otherwise, you can generally solve these by using [`React.lazy`][react-lazy] or the [`<ClientOnly>`][client-only] component from `remix-utils`.
+  - Otherwise, you can generally solve these by using [`React.lazy`][react-lazy] or the [`<ClientOnly>`][client-only] component from `remix-utils`
+  - The [SPA Mode template][spa-mode-template] also includes the Vite [ssr.noExternal][vite-ssr-noexternal] config by default to automatically bundle all of your dependencies during the server build to avoid most ESM/CJS issues
 
 ## Migrating from React Router
 
@@ -269,3 +270,5 @@ Once you've got all your routes living in their own files, you can:
 [client-only]: https://github.com/sergiodxa/remix-utils?tab=readme-ov-file#clientonly
 [vite-preview]: https://vitejs.dev/guide/cli#vite-preview
 [sirv-cli]: https://www.npmjs.com/package/sirv-cli
+[spa-mode-template]: https://github.com/remix-run/remix/tree/main/templates/spa
+[vite-ssr-noexternal]: https://vitejs.dev/config/ssr-options#ssr-noexternal
diff --git a/templates/spa/vite.config.ts b/templates/spa/vite.config.ts
index 01e514ff333..664b13b2878 100644
--- a/templates/spa/vite.config.ts
+++ b/templates/spa/vite.config.ts
@@ -4,4 +4,9 @@ import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
   plugins: [remix({ ssr: false }), tsconfigPaths()],
+  ssr: {
+    // Bundle all dependencies during the server build by default to avoid
+    // most ESM/CJS issues
+    noExternal: true,
+  },
 });