Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix configuring resolve conditions for Vite v6 #12644

Merged
merged 11 commits into from
Jan 6, 2025
5 changes: 5 additions & 0 deletions .changeset/afraid-jeans-drive.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@react-router/dev": patch
---

Fix default external conditions in Vite v6. This fixes resolution issues with certain npm packages.
1 change: 1 addition & 0 deletions contributors.yml
Original file line number Diff line number Diff line change
Expand Up @@ -268,6 +268,7 @@
- shamsup
- shihanng
- shivamsinghchahar
- silvenon
- SimenB
- SkayuX
- skratchdot
Expand Down
29 changes: 23 additions & 6 deletions packages/react-router-dev/vite/cloudflare-dev-proxy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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);
Expand Down
29 changes: 26 additions & 3 deletions packages/react-router-dev/vite/plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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]",
});
Expand Down Expand Up @@ -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],
silvenon marked this conversation as resolved.
Show resolved Hide resolved
},
},
optimizeDeps: {
Expand Down Expand Up @@ -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,

Expand Down