Skip to content

fix(vite): loadEnv before reading routes #14446

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.

Sign up for GitHub

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

Open
wants to merge 4 commits into
base: dev
Choose a base branch
from
Open

fix(vite): loadEnv before reading routes #14446

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ec806bf
Signed CLA by adding RFCreate to list
RFCreate Oct 13, 2025
531eeed
feat: bump vite version to ^6.3.0 needed to resolve VITE_* variables
RFCreate Oct 13, 2025
1cd0335
fix(vite): loadEnv before reading routes
RFCreate Oct 13, 2025
430c5cd
test: write case where VITE_* variable is used in routes.ts
RFCreate Oct 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions contributors.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -323,6 +323,7 @@
- remorses
- renyu-io
- reyronald
- RFCreate
- richardscarrott
- rifaidev
- rimian
Expand Down
2 changes: 1 addition & 1 deletion integration/helpers/cloudflare-dev-proxy-template/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"typescript": "^5.1.6",
"vite": "^6.1.0",
"vite": "^6.3.0",
"wrangler": "^4.23.0"
},
"engines": {
Expand Down
2 changes: 1 addition & 1 deletion integration/helpers/rsc-vite-framework/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"@vitejs/plugin-rsc": "0.4.30",
"cross-env": "^7.0.3",
"typescript": "^5.1.6",
"vite": "^6.2.0",
"vite": "^6.3.0",
"vite-env-only": "^3.0.1",
"vite-tsconfig-paths": "^4.2.1"
},
Expand Down
2 changes: 1 addition & 1 deletion integration/helpers/rsc-vite/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"@types/react-dom": "^19.1.6",
"@vitejs/plugin-react": "^4.5.2",
"typescript": "^5.1.6",
"vite": "^6.2.0"
"vite": "^6.3.0"
},
"dependencies": {
"@mjackson/node-fetch-server": "0.6.1",
Expand Down
2 changes: 1 addition & 1 deletion integration/helpers/vite-6-template/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"@types/react-dom": "^18.2.7",
"eslint": "^8.38.0",
"typescript": "^5.1.6",
"vite": "^6.1.0",
"vite": "^6.3.0",
"vite-env-only": "^3.0.1",
"vite-tsconfig-paths": "^4.2.1"
},
Expand Down
2 changes: 1 addition & 1 deletion integration/helpers/vite-plugin-cloudflare-template/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
"@types/react-dom": "^18.2.7",
"eslint": "^8.38.0",
"typescript": "^5.1.6",
"vite": "^6.1.0",
"vite": "^6.3.0",
"vite-tsconfig-paths": "^4.2.1",
"wrangler": "^4.23.0"
},
Expand Down
2 changes: 1 addition & 1 deletion integration/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
"strip-indent": "^3.0.0",
"type-fest": "^4.0.0",
"typescript": "^5.1.0",
"vite": "^6.1.0",
"vite": "^6.3.0",
"vite-env-only": "^3.0.1",
"vite-tsconfig-paths": "^4.2.2",
"wait-on": "^7.0.1"
Expand Down
157 changes: 76 additions & 81 deletions integration/vite-dotenv-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
} from "./helpers/vite.js";

const templateNames = [
"vite-5-template",
"vite-6-template",
"rsc-vite-framework",
] as const satisfies TemplateName[];

Expand All @@ -30,6 +30,24 @@ let getFiles = async ({
"server.mjs": EXPRESS_SERVER({ port, templateName }),
[envPath]: `
ENV_VAR_FROM_DOTENV_FILE=Content from ${envPath} file
VITE_PORTAL=testing
`,
"app/routes.ts": `
import { type RouteConfig, route } from "@react-router/dev/routes";
import { flatRoutes } from "@react-router/fs-routes";
const routes = [];
if (import.meta.env.VITE_PORTAL === "testing") {
routes.push(route("testing", "testing.tsx"));
}
export default [
...await flatRoutes(),
...routes,
] satisfies RouteConfig;
`,
"app/testing.tsx": String.raw`
export default function TestingRoute() {
return <div data-testing-route>Testing Route</div>
}
`,
"app/routes/dotenv.tsx": String.raw`
import { useState, useEffect } from "react";
Expand Down Expand Up @@ -62,91 +80,68 @@ let getFiles = async ({
};
};

test.describe("Vite .env", () => {
for (const templateName of templateNames) {
test.describe(`template: ${templateName}`, () => {
test.describe("defaults", async () => {
let port: number;
let cwd: string;
let stop: () => void;

test.beforeAll(async () => {
port = await getPort();
cwd = await createProject(
await getFiles({ port, templateName }),
templateName,
);
stop = await customDev({ cwd, port });
});
test.afterAll(() => stop());

test("express", async ({ page }) => {
let pageErrors: unknown[] = [];
page.on("pageerror", (error) => pageErrors.push(error));

await page.goto(`http://localhost:${port}/dotenv`, {
waitUntil: "networkidle",
for (const envDir of [undefined, "custom-env-dir"]) {
let envPath = `${envDir ? `${envDir}/` : ""}.env`;
test.describe(`Vite ${envPath}`, () => {
for (const templateName of templateNames) {
test.describe(`template: ${templateName}`, () => {
test.describe("defaults", async () => {
let port: number;
let cwd: string;
let stop: () => void;

test.beforeAll(async () => {
port = await getPort();
cwd = await createProject(
await getFiles({ envDir, port, templateName }),
templateName,
);
stop = await customDev({ cwd, port });
});
test.afterAll(() => stop());

test("express", async ({ page }) => {
let pageErrors: unknown[] = [];
page.on("pageerror", (error) => pageErrors.push(error));

await page.goto(`http://localhost:${port}/dotenv`, {
waitUntil: "networkidle",
});
expect(pageErrors).toEqual([]);

let loaderContent = page.locator(
"[data-dotenv-route-loader-content]",
);
await expect(loaderContent).toHaveText(
`Content from ${envPath} file`,
);

let clientContent = page.locator(
"[data-dotenv-route-client-content]",
);
await expect(clientContent).toHaveText(
"process.env.ENV_VAR_FROM_DOTENV_FILE not available on the client, which is a good thing",
);

expect(pageErrors).toEqual([]);
});
expect(pageErrors).toEqual([]);

let loaderContent = page.locator(
"[data-dotenv-route-loader-content]",
);
await expect(loaderContent).toHaveText("Content from .env file");

let clientContent = page.locator(
"[data-dotenv-route-client-content]",
);
await expect(clientContent).toHaveText(
"process.env.ENV_VAR_FROM_DOTENV_FILE not available on the client, which is a good thing",
);
test("routes.ts has VITE_* env var", async ({ page }) => {
let pageErrors: unknown[] = [];
page.on("pageerror", (error) => pageErrors.push(error));

expect(pageErrors).toEqual([]);
});
});

test.describe("custom env dir", async () => {
let port: number;
let cwd: string;
let stop: () => void;

test.beforeAll(async () => {
const envDir = "custom-env-dir";
port = await getPort();
cwd = await createProject(
await getFiles({ envDir, port, templateName }),
templateName,
);
stop = await customDev({ cwd, port });
});
test.afterAll(() => stop());
await page.goto(`http://localhost:${port}/testing`, {
waitUntil: "networkidle",
});
expect(pageErrors).toEqual([]);

test("express", async ({ page }) => {
let pageErrors: unknown[] = [];
page.on("pageerror", (error) => pageErrors.push(error));
let testingDiv = page.locator("[data-testing-route]");
await expect(testingDiv).toHaveText("Testing Route");

await page.goto(`http://localhost:${port}/dotenv`, {
waitUntil: "networkidle",
expect(pageErrors).toEqual([]);
});
expect(pageErrors).toEqual([]);

let loaderContent = page.locator(
"[data-dotenv-route-loader-content]",
);
await expect(loaderContent).toHaveText(
"Content from custom-env-dir/.env file",
);

let clientContent = page.locator(
"[data-dotenv-route-client-content]",
);
await expect(clientContent).toHaveText(
"process.env.ENV_VAR_FROM_DOTENV_FILE not available on the client, which is a good thing",
);

expect(pageErrors).toEqual([]);
});
});
});
}
});
}
});
}
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@
"typescript": "^5.4.5",
"unified": "^10.1.2",
"unist-util-remove": "^3.1.0",
"vite": "^6.1.0"
"vite": "^6.3.0"
},
"engines": {
"node": ">=20.0.0"
Expand Down
2 changes: 1 addition & 1 deletion packages/react-router-dev/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@
"react-router": "workspace:^",
"tsup": "^8.3.0",
"typescript": "^5.1.6",
"vite": "^6.1.0",
"vite": "^6.3.0",
"wireit": "0.14.9",
"wrangler": "^4.23.0"
},
Expand Down
12 changes: 6 additions & 6 deletions packages/react-router-dev/vite/plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1205,20 +1205,20 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
});
}

reactRouterConfigLoader = await createConfigLoader({
await loadDotenv({
rootDirectory,
viteUserConfig,
mode,
watch: viteCommand === "serve",
});

await updatePluginContext();

await loadDotenv({
reactRouterConfigLoader = await createConfigLoader({
rootDirectory,
viteUserConfig,
mode,
watch: viteCommand === "serve",
});

await updatePluginContext();

let environments = await getEnvironmentsOptions(ctx, viteCommand, {
viteUserConfig,
});
Expand Down
12 changes: 6 additions & 6 deletions packages/react-router-dev/vite/rsc/plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,12 @@ export function reactRouterRSCVitePlugin(): Vite.PluginOption[] {
const rootDirectory = getRootDirectory(viteUserConfig);
const watch = command === "serve";

await loadDotenv({
rootDirectory,
viteUserConfig,
mode,
});

configLoader = await createConfigLoader({
rootDirectory,
mode,
Expand Down Expand Up @@ -104,12 +110,6 @@ export function reactRouterRSCVitePlugin(): Vite.PluginOption[] {
);
}

await loadDotenv({
rootDirectory,
viteUserConfig,
mode,
});

const vite = await import("vite");
logger = vite.createLogger(viteUserConfig.logLevel, {
prefix: "[react-router]",
Expand Down
2 changes: 1 addition & 1 deletion playground/framework-express/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"@types/react-dom": "^18.2.7",
"cross-env": "^7.0.3",
"typescript": "^5.1.6",
"vite": "^6.1.0",
"vite": "^6.3.0",
"vite-tsconfig-paths": "^4.2.1"
},
"engines": {
Expand Down
2 changes: 1 addition & 1 deletion playground/framework-spa/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"typescript": "^5.1.6",
"vite": "^6.1.0",
"vite": "^6.3.0",
"vite-tsconfig-paths": "^4.2.1"
},
"engines": {
Expand Down
2 changes: 1 addition & 1 deletion playground/framework/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"typescript": "^5.1.6",
"vite": "^6.1.0",
"vite": "^6.3.0",
"vite-tsconfig-paths": "^4.2.1"
},
"engines": {
Expand Down
2 changes: 1 addition & 1 deletion playground/middleware/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
"@types/react-dom": "^18.2.7",
"tsx": "^4.19.3",
"typescript": "^5.1.6",
"vite": "^6.0.0",
"vite": "^6.3.0",
"vite-tsconfig-paths": "^4.2.1"
},
"engines": {
Expand Down
2 changes: 1 addition & 1 deletion playground/rsc-vite-framework/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"remark-frontmatter": "^5.0.0",
"remark-mdx-frontmatter": "^5.2.0",
"typescript": "^5.1.6",
"vite": "^6.2.0"
"vite": "^6.3.0"
},
"dependencies": {
"@mjackson/node-fetch-server": "0.6.1",
Expand Down
2 changes: 1 addition & 1 deletion playground/rsc-vite/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"@vitejs/plugin-rsc": "0.4.30",
"cross-env": "^7.0.3",
"typescript": "^5.1.6",
"vite": "^6.2.0"
"vite": "^6.3.0"
},
"dependencies": {
"@mjackson/node-fetch-server": "0.6.1",
Expand Down
2 changes: 1 addition & 1 deletion playground/split-route-modules-spa/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"typescript": "^5.1.6",
"vite": "^6.1.0",
"vite": "^6.3.0",
"vite-tsconfig-paths": "^4.2.1"
},
"engines": {
Expand Down
2 changes: 1 addition & 1 deletion playground/split-route-modules/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"typescript": "^5.1.6",
"vite": "^6.1.0",
"vite": "^6.3.0",
"vite-tsconfig-paths": "^4.2.1"
},
"engines": {
Expand Down
2 changes: 1 addition & 1 deletion playground/vite-plugin-cloudflare/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
"@types/react-dom": "^18.2.7",
"eslint": "^8.38.0",
"typescript": "^5.1.6",
"vite": "^6.1.0",
"vite": "^6.3.0",
"vite-tsconfig-paths": "^4.2.1",
"wrangler": "^4.23.0"
},
Expand Down
Loading