Fix configuring resolve conditions for Vite v6 (#12644)

Co-authored-by: Mark Dalgleish <[email protected]>

.changeset/afraid-jeans-drive.md

@@ -0,0 +1,5 @@
+---
+"@react-router/dev": patch
+---
+
+Fix default external conditions in Vite v6. This fixes resolution issues with certain npm packages.

contributors.yml

@@ -268,6 +268,7 @@
 - shamsup
 - shihanng
 - shivamsinghchahar
+- silvenon
 - SimenB
 - SkayuX
 - skratchdot

packages/react-router-dev/vite/cloudflare-dev-proxy.ts

@@ -4,6 +4,7 @@ import { type Plugin } from "vite";
 import { type GetPlatformProxyOptions, type PlatformProxy } from "wrangler";
 
 import { fromNodeRequest, toNodeRequest } from "./node-adapter";
+import { preloadVite, getVite } from "./vite";
 
 let serverBuildId = "virtual:react-router/server-build";
 
@@ -43,13 +44,29 @@ export const cloudflareDevProxyVitePlugin = <Env, Cf extends CfProperties>(
 
   return {
     name: PLUGIN_NAME,
-    config: () => ({
-      ssr: {
-        resolve: {
-          externalConditions: ["workerd", "worker"],
+    config: async () => {
+      await preloadVite();
+      const vite = getVite();
+      // This is a compatibility layer for Vite 5. Default conditions were
+      // automatically added to any custom conditions in Vite 5, but Vite 6
+      // removed this behavior. Instead, the default conditions are overridden
+      // by any custom conditions. If we wish to retain the default
+      // conditions, we need to manually merge them using the provided default
+      // conditions arrays exported from Vite. In Vite 5, these default
+      // conditions arrays do not exist.
+      // https://vite.dev/guide/migration.html#default-value-for-resolve-conditions
+      const serverConditions: string[] = [
+        ...(vite.defaultServerConditions ?? []),
+      ];
+
+      return {
+        ssr: {
+          resolve: {
+            externalConditions: ["workerd", "worker", ...serverConditions],
+          },
         },
-      },
-    }),
+      };
+    },
     configResolved: (viteConfig) => {
       let pluginIndex = (name: string) =>
         viteConfig.plugins.findIndex((plugin) => plugin.name === name);

packages/react-router-dev/vite/plugin.ts

@@ -738,6 +738,21 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
         viteConfigEnv = _viteConfigEnv;
         viteCommand = viteConfigEnv.command;
 
+        // This is a compatibility layer for Vite 5. Default conditions were
+        // automatically added to any custom conditions in Vite 5, but Vite 6
+        // removed this behavior. Instead, the default conditions are overridden
+        // by any custom conditions. If we wish to retain the default
+        // conditions, we need to manually merge them using the provided default
+        // conditions arrays exported from Vite. In Vite 5, these default
+        // conditions arrays do not exist.
+        // https://vite.dev/guide/migration.html#default-value-for-resolve-conditions
+        let viteClientConditions: string[] = [
+          ...(vite.defaultClientConditions ?? []),
+        ];
+        let viteServerConditions: string[] = [
+          ...(vite.defaultServerConditions ?? []),
+        ];
+
         logger = vite.createLogger(viteUserConfig.logLevel, {
           prefix: "[react-router]",
         });
@@ -804,9 +819,14 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
           ssr: {
             external: ssrExternals,
             resolve: {
-              conditions: viteCommand === "build" ? [] : ["development"],
+              conditions:
+                viteCommand === "build"
+                  ? viteServerConditions
+                  : ["development", ...viteServerConditions],
               externalConditions:
-                viteCommand === "build" ? [] : ["development"],
+                viteCommand === "build"
+                  ? viteServerConditions
+                  : ["development", ...viteServerConditions],
             },
           },
           optimizeDeps: {
@@ -853,7 +873,10 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
               "react-router/dom",
               "react-router-dom",
             ],
-            conditions: viteCommand === "build" ? [] : ["development"],
+            conditions:
+              viteCommand === "build"
+                ? viteClientConditions
+                : ["development", ...viteClientConditions],
           },
           base: viteUserConfig.base,