fix(vite): deduplicate @remix-run/react (#7926)

remix-run · Nov 7, 2023 · b6b2857 · b6b2857
1 parent 2c36e11
commit b6b2857
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 15 deletions.
diff --git a/.changeset/ninety-boats-fail.md b/.changeset/ninety-boats-fail.md
@@ -0,0 +1,11 @@
+---
+"@remix-run/dev": patch
+---
+
+fix(vite): deduplicate `@remix-run/react`
+
+Pre-bundle Remix dependencies to avoid Remix router duplicates.
+Our remix-remix-react-proxy plugin does not process default client and
+server entry files since those come from within `node_modules`.
+That means that before Vite pre-bundles dependencies (e.g. first time dev server is run)
+mismatching Remix routers cause `Error: You must render this element inside a <Remix> element`.
diff --git a/integration/vite-css-dev-test.ts b/integration/vite-css-dev-test.ts
@@ -36,9 +36,6 @@ test.describe("Vite CSS dev", () => {
               port: ${devPort},
               strictPort: true,
             },
-            optimizeDeps: {
-              include: ["react", "react-dom/client", "@remix-run/react"],
-            },
             plugins: [remix()],
           });
         `,

diff --git a/integration/vite-dev-express-test.ts b/integration/vite-dev-express-test.ts
@@ -24,9 +24,6 @@ test.beforeAll(async () => {
             hmr: {
               port: ${hmrPort}
             }
-          },          
-          optimizeDeps: {
-            include: ["react", "react-dom/client", "@remix-run/react"],
           },
           plugins: [remix()],
         });

diff --git a/integration/vite-dev-test.ts b/integration/vite-dev-test.ts
@@ -33,9 +33,6 @@ test.describe("Vite dev", () => {
               port: ${devPort},
               strictPort: true,
             },
-            optimizeDeps: {
-              include: ["react", "react-dom/client", "@remix-run/react"],
-            },
             plugins: [remix()],
           });
         `,

diff --git a/packages/remix-dev/vite/plugin.ts b/packages/remix-dev/vite/plugin.ts
@@ -429,22 +429,35 @@ export const remixVitePlugin: RemixVitePlugin = (options = {}) => {
           experimental: { hmrPartialAccept: true },
           optimizeDeps: {
             include: [
-              // pre-bundle React dependencies to avoid React duplicates,
-              // even if React dependencies are not direct dependencies
+              // Pre-bundle React dependencies to avoid React duplicates,
+              // even if React dependencies are not direct dependencies.
               // https://react.dev/warnings/invalid-hook-call-warning#duplicate-react
               "react",
-              `react/jsx-runtime`,
-              `react/jsx-dev-runtime`,
+              "react/jsx-runtime",
+              "react/jsx-dev-runtime",
               "react-dom/client",
+
+              // Pre-bundle Remix dependencies to avoid Remix router duplicates.
+              // Our remix-remix-react-proxy plugin does not process default client and
+              // server entry files since those come from within `node_modules`.
+              // That means that before Vite pre-bundles dependencies (e.g. first time dev server is run)
+              // mismatching Remix routers cause `Error: You must render this element inside a <Remix> element`.
+              "@remix-run/react",
             ],
           },
           esbuild: {
             jsx: "automatic",
             jsxDev: viteCommand !== "build",
           },
           resolve: {
-            // https://react.dev/warnings/invalid-hook-call-warning#duplicate-react
-            dedupe: ["react", "react-dom"],
+            dedupe: [
+              // https://react.dev/warnings/invalid-hook-call-warning#duplicate-react
+              "react",
+              "react-dom",
+
+              // see description for `@remix-run/react` in `optimizeDeps.include`
+              "@remix-run/react",
+            ],
           },
           ...(viteCommand === "build" && {
             base: pluginConfig.publicPath,