fix(dev): fix incorrect usage of defaultServerConditions as externalConditions (#13871)

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

Author: Andarist

.changeset/rare-tables-smile.md

@@ -0,0 +1,5 @@
+---
+"@react-router/dev": patch
+---
+
+Fix incorrectly configured `externalConditions` which had enabled `module` condition for externals and broke builds with certain packages, like Emotion.

contributors.yml

@@ -26,6 +26,7 @@
 - amitdahan
 - AmRo045
 - amsal
+- Andarist
 - andreasottosson-polestar
 - andreiduca
 - antonmontrezor

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

@@ -59,7 +59,6 @@ export const cloudflareDevProxyVitePlugin = <Env, Cf extends CfProperties>(
     name: PLUGIN_NAME,
     config: async (config, configEnv) => {
       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
@@ -68,9 +67,12 @@ export const cloudflareDevProxyVitePlugin = <Env, Cf extends CfProperties>(
       // 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 ?? []),
-      ];
+      //
+      // In addition to that, these are external conditions (do not confuse them
+      // with server conditions) and there is no helpful export with the default
+      // external conditions (see https://github.com/vitejs/vite/pull/20279 for
+      // more details). So, for now, we are hardcording the default here.
+      const externalConditions: string[] = ["node"];
 
       let configResult = await loadConfig({
         rootDirectory: config.root ?? process.cwd(),
@@ -86,7 +88,7 @@ export const cloudflareDevProxyVitePlugin = <Env, Cf extends CfProperties>(
       return {
         ssr: {
           resolve: {
-            externalConditions: [...workerdConditions, ...serverConditions],
+            externalConditions: [...workerdConditions, ...externalConditions],
           },
         },
       };

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

@@ -3462,10 +3462,6 @@ export async function getEnvironmentOptionsResolvers(
     `file:///${path.join(packageRoot, "module-sync-enabled/index.mjs")}`
   );
   let vite = getVite();
-  let viteServerConditions: string[] = [
-    ...(vite.defaultServerConditions ?? []),
-    ...(moduleSyncEnabled ? ["module-sync"] : []),
-  ];
 
   function getBaseOptions({
     viteUserConfig,
@@ -3521,10 +3517,35 @@ export async function getEnvironmentOptionsResolvers(
   }: {
     viteUserConfig: Vite.UserConfig;
   }): EnvironmentOptions {
-    let conditions =
-      viteCommand === "build"
-        ? viteServerConditions
-        : ["development", ...viteServerConditions];
+    // We're using the module-sync condition, but Vite
+    // doesn't support it by default.
+    // See https://github.com/vitest-dev/vitest/issues/7692
+    let maybeModuleSyncConditions: string[] = [
+      ...(moduleSyncEnabled ? ["module-sync"] : []),
+    ];
+
+    let maybeDevelopmentConditions =
+      viteCommand === "build" ? [] : ["development"];
+
+    // 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 maybeDefaultServerConditions = vite.defaultServerConditions || [];
+
+    // There is no helpful export with the default external conditions (see
+    // https://github.com/vitejs/vite/pull/20279 for more details). So, for now,
+    // we are hardcording the default here.
+    let defaultExternalConditions = ["node"];
+
+    let baseConditions = [
+      ...maybeDevelopmentConditions,
+      ...maybeModuleSyncConditions,
+    ];
 
     return mergeEnvironmentOptions(getBaseOptions({ viteUserConfig }), {
       resolve: {
@@ -3533,8 +3554,8 @@ export async function getEnvironmentOptionsResolvers(
           ctx.reactRouterConfig.future.unstable_viteEnvironmentApi
             ? undefined
             : ssrExternals,
-        conditions,
-        externalConditions: conditions,
+        conditions: [...baseConditions, ...maybeDefaultServerConditions],
+        externalConditions: [...baseConditions, ...defaultExternalConditions],
       },
       build: {
         // We move SSR-only assets to client assets. Note that the