Add ssr.noExternal to the SPA template vite config

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

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,
+  },
 });