Use alternative to ssrLoadModule when Vite Environment API is enabled (#13008)

Author: jamesopstad

.changeset/new-houses-hug.md

@@ -0,0 +1,5 @@
+---
+"@react-router/dev": patch
+---
+
+Fix `future.unstable_viteEnvironmentApi` when the `ssr` environment has been configured by another plugin to be a custom `Vite.DevEnvironment` rather than a `Vite.RunnableDevEnvironment`

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

@@ -64,6 +64,11 @@ import {
 } from "../config/config";
 import * as WithProps from "./with-props";
 
+export type LoadModule = (
+  viteDevServer: Vite.ViteDevServer,
+  url: string
+) => Promise<any>;
+
 export async function resolveViteConfig({
   configFile,
   mode,
@@ -913,6 +918,31 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
     };
   };
 
+  // We use a separate environment for loading the server manifest and inlined
+  // CSS during development. This is because "ssrLoadModule" isn't available if
+  // the "ssr" environment has been defined by another plugin (e.g.
+  // vite-plugin-cloudflare) as a custom Vite.DevEnvironment rather than a
+  // Vite.RunnableDevEnvironment:
+  // https://vite.dev/guide/api-environment-frameworks.html#runtime-agnostic-ssr
+  const HELPER_ENVIRONMENT_NAME = "__react_router_helper__";
+
+  const loadModule: LoadModule = (viteDevServer, url) => {
+    if (ctx.reactRouterConfig.future.unstable_viteEnvironmentApi) {
+      const vite = getVite();
+      const helperEnvironment =
+        viteDevServer.environments[HELPER_ENVIRONMENT_NAME];
+
+      invariant(
+        helperEnvironment && vite.isRunnableDevEnvironment(helperEnvironment),
+        "Missing helper environment"
+      );
+
+      return helperEnvironment.runner.import(url);
+    }
+
+    return viteDevServer.ssrLoadModule(url);
+  };
+
   return [
     {
       name: "react-router",
@@ -1064,7 +1094,10 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
 
           ...(ctx.reactRouterConfig.future.unstable_viteEnvironmentApi
             ? {
-                environments,
+                environments: {
+                  ...environments,
+                  [HELPER_ENVIRONMENT_NAME]: {},
+                },
                 build: {
                   // This isn't honored by the SSR environment config (which seems
                   // to be a Vite bug?) so we set it here too.
@@ -1268,6 +1301,7 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
               cssModulesManifest,
               build,
               url,
+              loadModule,
             });
           },
           // If an error is caught within the request handler, let Vite fix the
@@ -1944,7 +1978,7 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
         if (route) {
           // invalidate manifest on route exports change
           let serverManifest = (
-            await server.ssrLoadModule(virtual.serverManifest.id)
+            await loadModule(server, virtual.serverManifest.id)
           ).default as ReactRouterManifest;
 
           let oldRouteMetadata = serverManifest.routes[route.id];

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

@@ -6,6 +6,7 @@ import type { ModuleNode, ViteDevServer } from "vite";
 import type { ResolvedReactRouterConfig } from "../config/config";
 import { resolveFileUrl } from "./resolve-file-url";
 import { getVite } from "./vite";
+import type { LoadModule } from "./plugin";
 
 type ServerRouteManifest = ServerBuild["routes"];
 type ServerRoute = ServerRouteManifest[string];
@@ -57,11 +58,13 @@ const getStylesForFiles = async ({
   rootDirectory,
   cssModulesManifest,
   files,
+  loadModule,
 }: {
   viteDevServer: ViteDevServer;
   rootDirectory: string;
   cssModulesManifest: Record<string, string>;
   files: string[];
+  loadModule: LoadModule;
 }): Promise<string | undefined> => {
   let vite = getVite();
   let viteMajor = parseInt(vite.version.split(".")[0], 10);
@@ -111,7 +114,8 @@ const getStylesForFiles = async ({
         let css = isCssModulesFile(dep.file)
           ? cssModulesManifest[dep.file]
           : (
-              await viteDevServer.ssrLoadModule(
+              await loadModule(
+                viteDevServer,
                 // We need the ?inline query in Vite v6 when loading CSS in SSR
                 // since it does not expose the default export for CSS in a
                 // server environment. This is to align with non-SSR
@@ -224,6 +228,7 @@ export const getStylesForUrl = async ({
   cssModulesManifest,
   build,
   url,
+  loadModule,
 }: {
   viteDevServer: ViteDevServer;
   rootDirectory: string;
@@ -232,6 +237,7 @@ export const getStylesForUrl = async ({
   cssModulesManifest: Record<string, string>;
   build: ServerBuild;
   url: string | undefined;
+  loadModule: LoadModule;
 }): Promise<string | undefined> => {
   if (url === undefined || url.includes("?_data=")) {
     return undefined;
@@ -254,6 +260,7 @@ export const getStylesForUrl = async ({
       // Then include any styles from the matched routes
       ...documentRouteFiles,
     ],
+    loadModule,
   });
 
   return styles;