From 5021d5cc0b4ba5e41cb997661967db08de49bba8 Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Wed, 28 Feb 2024 10:26:38 -0500 Subject: [PATCH 1/2] Add ssr.noExternal to the SPA template vite config --- docs/future/spa-mode.md | 8 +++++++- templates/spa/vite.config.ts | 8 ++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/docs/future/spa-mode.md b/docs/future/spa-mode.md index c0e96086ddc..576ccfc7a5f 100644 --- a/docs/future/spa-mode.md +++ b/docs/future/spa-mode.md @@ -223,9 +223,13 @@ startTransition(() => { - You cannot call `serverLoader`/`serverAction` from your `clientLoader`/`clientAction` methods since there is no running server -- those will throw a runtime error if called - 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 [``][client-only] component from `remix-utils`. + - Otherwise, you can generally solve these by using [`React.lazy`][react-lazy] or the [``][client-only] component from `remix-utils` + +- The [SPA Mode template][spa-mode-template] 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 + - This may slow down your build a bit -- if so, you can try removing this config, or switching to a more targeted array config of the targeted dependencies you wish to bundle ## Migrating from React Router @@ -269,3 +273,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..2b3b313ddac 100644 --- a/templates/spa/vite.config.ts +++ b/templates/spa/vite.config.ts @@ -4,4 +4,12 @@ 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. This may slow down your build a bit -- if so, you + // can try removing this config, or switching to a more targeted array + // config of the targeted dependencies you wish to bundle. + // See https://vitejs.dev/config/ssr-options#ssr-noexternal for more information + noExternal: true, + }, }); From d03c2b196312f4179b10b10f8d8375fb8bf09884 Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Thu, 29 Feb 2024 10:19:05 -0500 Subject: [PATCH 2/2] Apply suggestions from code review Co-authored-by: Mark Dalgleish --- docs/future/spa-mode.md | 4 ++-- templates/spa/vite.config.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/future/spa-mode.md b/docs/future/spa-mode.md index 576ccfc7a5f..036a2b64b84 100644 --- a/docs/future/spa-mode.md +++ b/docs/future/spa-mode.md @@ -228,8 +228,8 @@ startTransition(() => { - 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 [``][client-only] component from `remix-utils` -- The [SPA Mode template][spa-mode-template] 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 - - This may slow down your build a bit -- if so, you can try removing this config, or switching to a more targeted array config of the targeted dependencies you wish to bundle +- The [SPA Mode template][spa-mode-template] enables the Vite [ssr.noExternal][vite-ssr-noexternal] option by default to automatically bundle all of your dependencies during the server build to avoid most ESM/CJS issues + - This may slow down your build a bit — if so, you can try removing this option, or switching to a more targeted array containing the specific dependencies you wish to bundle ## Migrating from React Router diff --git a/templates/spa/vite.config.ts b/templates/spa/vite.config.ts index 2b3b313ddac..3d835774a64 100644 --- a/templates/spa/vite.config.ts +++ b/templates/spa/vite.config.ts @@ -7,8 +7,8 @@ export default defineConfig({ ssr: { // Bundle all dependencies during the server build by default to avoid // most ESM/CJS issues. This may slow down your build a bit -- if so, you - // can try removing this config, or switching to a more targeted array - // config of the targeted dependencies you wish to bundle. + // can try removing this option, or switching to a more targeted array + // containing the specific dependencies you wish to bundle. // See https://vitejs.dev/config/ssr-options#ssr-noexternal for more information noExternal: true, },