diff --git a/.changeset/rare-tables-smile.md b/.changeset/rare-tables-smile.md new file mode 100644 index 0000000000..922e102c35 --- /dev/null +++ b/.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. diff --git a/contributors.yml b/contributors.yml index 8cbb9ba517..22ee406787 100644 --- a/contributors.yml +++ b/contributors.yml @@ -25,6 +25,7 @@ - amitdahan - AmRo045 - amsal +- Andarist - andreasottosson-polestar - andreiduca - antonmontrezor diff --git a/packages/react-router-dev/vite/cloudflare-dev-proxy.ts b/packages/react-router-dev/vite/cloudflare-dev-proxy.ts index 9d37690bf1..88139bf606 100644 --- a/packages/react-router-dev/vite/cloudflare-dev-proxy.ts +++ b/packages/react-router-dev/vite/cloudflare-dev-proxy.ts @@ -59,7 +59,6 @@ export const cloudflareDevProxyVitePlugin = ( 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 = ( // 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 = ( return { ssr: { resolve: { - externalConditions: [...workerdConditions, ...serverConditions], + externalConditions: [...workerdConditions, ...externalConditions], }, }, }; diff --git a/packages/react-router-dev/vite/plugin.ts b/packages/react-router-dev/vite/plugin.ts index 20a8f8cff7..676b945af1 100644 --- a/packages/react-router-dev/vite/plugin.ts +++ b/packages/react-router-dev/vite/plugin.ts @@ -3451,10 +3451,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, @@ -3510,10 +3506,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: { @@ -3522,8 +3543,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