Add .env file support to RSC Framework Mode

integration/vite-dotenv-test.ts

@@ -2,18 +2,32 @@ import { test, expect } from "@playwright/test";
 import getPort from "get-port";
 
 import {
+  type TemplateName,
   createProject,
   customDev,
   EXPRESS_SERVER,
   viteConfig,
 } from "./helpers/vite.js";
 
-let getFiles = async ({ envDir, port }: { envDir?: string; port: number }) => {
+const templateNames = [
+  "vite-5-template",
+  "rsc-vite-framework",
+] as const satisfies TemplateName[];
+
+let getFiles = async ({
+  templateName,
+  envDir,
+  port,
+}: {
+  templateName: TemplateName;
+  envDir?: string;
+  port: number;
+}) => {
   let envPath = `${envDir ? `${envDir}/` : ""}.env`;
 
   return {
-    "vite.config.js": await viteConfig.basic({ port, envDir }),
-    "server.mjs": EXPRESS_SERVER({ port }),
+    "vite.config.js": await viteConfig.basic({ templateName, port, envDir }),
+    "server.mjs": EXPRESS_SERVER({ port, templateName }),
     [envPath]: `
       ENV_VAR_FROM_DOTENV_FILE=Content from ${envPath} file
     `,
@@ -49,72 +63,90 @@ let getFiles = async ({ envDir, port }: { envDir?: string; port: number }) => {
 };
 
 test.describe("Vite .env", () => {
-  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 }));
-      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 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",
+          });
+          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",
+          );
+
+          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",
-      );
-
-      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 }));
-      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",
+      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());
+
+        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 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([]);
+        });
       });
-      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([]);
     });
-  });
+  }
 });

packages/react-router-dev/vite/load-dotenv.ts

@@ -0,0 +1,24 @@
+import type * as Vite from "vite";
+
+export async function loadDotenv({
+  rootDirectory,
+  viteUserConfig,
+  mode,
+}: {
+  rootDirectory: string;
+  viteUserConfig: Vite.UserConfig;
+  mode: string;
+}) {
+  const vite = await import("vite");
+  Object.assign(
+    process.env,
+    vite.loadEnv(
+      mode,
+      viteUserConfig.envDir ?? rootDirectory,
+      // We override the default prefix of "VITE_" with a blank string since
+      // we're targeting the server, so we want to load all environment
+      // variables, not just those explicitly marked for the client
+      "",
+    ),
+  );
+}

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

@@ -81,6 +81,7 @@ import {
 } from "../config/config";
 import { getOptimizeDepsEntries } from "./optimize-deps-entries";
 import { decorateComponentExportsWithProps } from "./with-props";
+import { loadDotenv } from "./load-dotenv";
 import { validatePluginOrder } from "./plugins/validate-plugin-order";
 import { warnOnClientSourceMaps } from "./plugins/warn-on-client-source-maps";
 
@@ -1211,17 +1212,11 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
 
         await updatePluginContext();
 
-        Object.assign(
-          process.env,
-          vite.loadEnv(
-            viteConfigEnv.mode,
-            viteUserConfig.envDir ?? ctx.rootDirectory,
-            // We override the default prefix of "VITE_" with a blank string since
-            // we're targeting the server, so we want to load all environment
-            // variables, not just those explicitly marked for the client
-            "",
-          ),
-        );
+        await loadDotenv({
+          rootDirectory,
+          viteUserConfig,
+          mode,
+        });
 
         let environments = await getEnvironmentsOptions(ctx, viteCommand, {
           viteUserConfig,

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

@@ -24,6 +24,7 @@ import {
   isVirtualClientRouteModuleId,
   CLIENT_NON_COMPONENT_EXPORTS,
 } from "./virtual-route-modules";
+import { loadDotenv } from "../load-dotenv";
 import { validatePluginOrder } from "../plugins/validate-plugin-order";
 import { warnOnClientSourceMaps } from "../plugins/warn-on-client-source-maps";
 
@@ -101,6 +102,12 @@ export function reactRouterRSCVitePlugin(): Vite.PluginOption[] {
           );
         }
 
+        await loadDotenv({
+          rootDirectory,
+          viteUserConfig,
+          mode,
+        });
+
         const vite = await import("vite");
         logger = vite.createLogger(viteUserConfig.logLevel, {
           prefix: "[react-router]",