vite-plugin-react-server 1.2.0-alpha.1 → 1.2.0

package/plugin/config/resolveUserConfig.ts

@@ -1,27 +1,32 @@
-import type { ConfigEnv, UserConfig } from "vite";
+import { createLogger, type ConfigEnv, type UserConfig } from "vite";
 import type {
   ResolvedUserConfig,
   ResolvedUserOptions,
   AutoDiscoveredFiles,
 } from "../types.js";
-import { join } from "node:path";
+import { join, resolve } from "node:path";
+import { readFileSync, existsSync } from "node:fs";
 import type { OutputOptions, PreRenderedAsset, PreRenderedChunk } from "rollup";
 import { DEFAULT_CONFIG } from "./defaults.js";
-import { getNodeEnv } from "../getNodeEnv.js";
+import { getNodeEnv } from "./getNodeEnv.js";
+import { getEnvValue, setEnvValue } from "../env/getEnvKey.js";
+import { createHash } from "node:crypto";
 
 const stashedUserConfig: Record<string, ResolvedUserConfig | null> = {};
-
+let originalConfig: UserConfig | null = null;
 export type ResolveUserConfigProps = {
   condition: "react-client" | "react-server";
   config: UserConfig;
   configEnv: ConfigEnv;
   userOptions: ResolvedUserOptions;
-  autoDiscoveredFiles: Pick<AutoDiscoveredFiles, "inputs" | "staticManifest">;
+  autoDiscoveredFiles: AutoDiscoveredFiles;
+  forceResolve?: boolean;
+  ssr?: boolean;
 };
 
 export type ResolveUserConfigReturn =
   | { type: "success"; userConfig: ResolvedUserConfig }
-  | { type: "error"; error: Error };
+  | { type: "error"; error: unknown };
 
 export type ResolveUserConfigFn = (
   props: ResolveUserConfigProps
@@ -34,16 +39,32 @@ export const resolveUserConfig: ResolveUserConfigFn =
     configEnv,
     userOptions,
     autoDiscoveredFiles,
+    forceResolve = false,
+    ssr = undefined,
   }) {
-    const ssr =
-      typeof config.build?.ssr === "boolean"
+    if (!forceResolve && originalConfig == null) {
+      originalConfig = config;
+    } else if (originalConfig != null && config !== originalConfig) {
+      forceResolve = true;
+    }
+
+    ssr =
+      typeof ssr === "boolean"
+        ? ssr
+        : typeof config.build?.ssr === "boolean"
         ? config.build?.ssr
-        : Boolean(configEnv.isSsrBuild) ||
-          condition === "react-server" ||
-          (typeof process.env["VITE_SSR"] === "string"
-            ? process.env["VITE_SSR"] === "true" ||
-              process.env["VITE_SSR"] === "1"
-            : Boolean(process.env["VITE_SSR"]));
+        : condition === "react-server"
+        ? true
+        : typeof configEnv.isSsrBuild === "boolean"
+        ? configEnv.isSsrBuild
+        : false;
+
+    if (condition === "react-server" && !ssr) {
+      const logger = config.customLogger ?? createLogger();
+      logger.warn(
+        "react-server build should be ssr, but is was manually set to false. This may not work as expected."
+      );
+    }
     const envDir =
       condition === "react-client" && ssr
         ? userOptions.build.client
@@ -52,7 +73,7 @@ export const resolveUserConfig: ResolveUserConfigFn =
         : userOptions.build.server;
     const envId = `${envDir}${ssr ? "-ssr" : ""}`;
 
-    if (stashedUserConfig[envId]) {
+    if (stashedUserConfig[envId] && !forceResolve) {
       return {
         type: "success",
         userConfig: stashedUserConfig[envId],
@@ -60,17 +81,33 @@ export const resolveUserConfig: ResolveUserConfigFn =
     }
 
     // Get existing inputs
-    const root = config.root ?? userOptions.projectRoot ?? process.cwd();
 
     const handleSsrEntryName = (
       info: PreRenderedChunk,
       input: string | null,
-      fallback: (info: PreRenderedChunk, ssr: boolean) => string,
+      fallback: (
+        info: PreRenderedChunk,
+        ssr: boolean,
+        sourceContent?: string
+      ) => string,
       ssr: boolean
     ) => {
+      // Read source content for consistent hashing across all environments
+      let sourceContent: string | undefined;
+      if (input) {
+        try {
+          const sourcePath = resolve(userOptions.projectRoot, input);
+          if (existsSync(sourcePath)) {
+            sourceContent = readFileSync(sourcePath, "utf-8");
+          }
+        } catch (error) {
+          // Fallback to filename-based hashing if source file can't be read
+        }
+      }
+
       if (!ssr || !input) {
         if (typeof fallback === "function") {
-          return fallback(info, false);
+          return fallback(info, false, sourceContent);
         }
         return userOptions.normalizer(info.name)[0];
       }
@@ -79,11 +116,13 @@ export const resolveUserConfig: ResolveUserConfigFn =
       if (value.startsWith(userOptions.moduleBasePath)) {
         value = value.slice(userOptions.moduleBasePath.length);
       }
-      const entry = autoDiscoveredFiles.staticManifest[value];
-      if (entry) {
-        return entry.file;
+
+      // Apply the same hash function for server environment to ensure consistency
+      // This ensures that client components have the same hash across all environments
+      if (typeof fallback === "function") {
+        return fallback(info, true, sourceContent);
       }
-      return fallback(info, true);
+      return userOptions.normalizer(info.name)[0];
     };
 
     const handleSsrAssetName = (
@@ -95,43 +134,29 @@ export const resolveUserConfig: ResolveUserConfigFn =
       if (info.source === "") {
         return "";
       }
-      
+
       // Check if this is a CSS file
-      const isCssFile = input?.endsWith('.css') || 
-        info.names?.some(name => name.endsWith('.css'));
-      
+      const isCssFile =
+        input?.endsWith(".css") ||
+        info.names?.some((name) => name.endsWith(".css"));
+
       if (!ssr || !input || isCssFile) {
         if (typeof fallback === "function") {
           return fallback(info, ssr);
         }
         return userOptions.normalizer(info.names[0])[0];
       }
-      
-      
+
       // First check if we have a static manifest entry for consistent module ID resolution
       const normalized = userOptions.normalizer(input);
-      const id = normalized[0];
       let value = normalized[1];
       if (value.startsWith(userOptions.moduleBasePath)) {
         value = value.slice(userOptions.moduleBasePath.length);
       }
-      
-      const entry = autoDiscoveredFiles.staticManifest[value];
-      if (entry) {
-        // For CSS files, look for a specific CSS file that matches our normalized ID
-        if (entry?.name && userOptions.autoDiscover.cssPattern.test(value)) {
-          const found = entry.css?.find((css) => css.startsWith(id as string));
-          if (found) {
-            return join(userOptions.build.assetsDir, found);
-          } else {
-            return join(userOptions.build.assetsDir, entry.file);
-          }
-        } else {
-          // For other assets, use the entry file
-          return entry.file;
-        }
-      }
-      
+
+      // Note: staticManifest is not available during auto-discovery phase
+      // It's loaded later during the build process
+
       // Fall back to the user's assetFile function for consistent behavior
       return fallback(info, ssr);
     };
@@ -151,8 +176,8 @@ export const resolveUserConfig: ResolveUserConfigFn =
         : undefined
       : // find the other asset file names
       hasOtherOutput
-      ? (userDefinedOutput.find((o) => o.assetFileNames) as OutputOptions)
-          .assetFileNames
+      ? (userDefinedOutput.find((o) => o?.assetFileNames) as OutputOptions)
+          ?.assetFileNames
       : undefined;
 
     const userDefinedChunkFileNames = hasValidOutput
@@ -167,10 +192,29 @@ export const resolveUserConfig: ResolveUserConfigFn =
       : undefined;
 
     const stashedReturns: Record<string, string> = {};
+    // Rollup's preserveModulesRoot works in reverse of what you'd expect:
+    // - When user wants preservation (true): pass undefined to Rollup (don't strip anything)
+    // - When user wants stripping (false): pass moduleBase to Rollup (strip this path)
+    // For static builds: use empty string to preserve only module names (not paths) to prevent _virtual files
+    const preserveModulesRootString =
+      userOptions.build.preserveModulesRoot === false
+        ? userOptions.moduleBase // Strip src/ from output paths
+        : ""; // Keep src/ in output paths by setting root to empty string
+    
+
+    // For static builds (browser/ESM): bundle everything - no need to preserve modules or node_modules structure
+    // For client/server environments (SSR): preserve modules to maintain module structure for server-side rendering
+    // Use preserveModules: true for SSR, but for static builds use false to prevent _virtual files
+    const shouldPreserveModules = ssr || condition === "react-server";
+    
     const pluginOutput = {
-      preserveModulesRoot: userOptions.build.preserveModulesRoot
-        ? userOptions.moduleBase
-        : undefined,
+      // For static builds: false to bundle everything and prevent _virtual files
+      // For SSR builds: use preserveModules with preserveModulesRoot set to preserve only module names (not paths)
+      // This prevents _virtual files by flattening the output structure
+      preserveModules: shouldPreserveModules,
+      // For static builds: undefined (not needed when preserveModules is false)
+      // For SSR builds: set to empty string to preserve only module names, preventing _virtual files
+      preserveModulesRoot: shouldPreserveModules ? (preserveModulesRootString === "" ? "" : preserveModulesRootString) : undefined,
       entryFileNames:
         userDefinedEntryFileNames ??
         ((info) => {
@@ -185,9 +229,7 @@ export const resolveUserConfig: ResolveUserConfigFn =
               userOptions.build.entryFile,
               ssr
             );
-            if (userOptions.verbose) {
-              console.log("entryFileNames", input, r);
-            }
+
             stashedReturns[inputId] = r ?? info.name;
           }
           // in the case of empty basePath, it will not be sliced from the path, so, we need to slice it here
@@ -196,32 +238,36 @@ export const resolveUserConfig: ResolveUserConfigFn =
             Number(stashedReturns[inputId].startsWith("/"))
           );
         }),
-      assetFileNames: process.env["VITEST"]
-        ? undefined
-        : userDefinedAssetFileNames ??
-          ((info) => {
-            const input = info.originalFileNames[0];
-            const inputId = input + (ssr ? "-ssr" : "");
-
-            if (!stashedReturns[inputId]) {
-              const r = handleSsrAssetName(
-                info,
-                input,
-                userOptions.build.assetFile,
-                ssr
-              );
-              
-              if (userOptions.verbose) {
-                console.log("assetFileNames", input, r);
-              }
-              stashedReturns[inputId] = r ?? join(userOptions.build.assetsDir, userOptions.normalizer(input)[0]);
-            }
-            // in the case of empty basePath, it will not be sliced from the path, so, we need to slice it here
-            // at the last possible moment as to not confuse the rest of the logic around the basePath
-            return stashedReturns[inputId].slice(
-              Number(stashedReturns[inputId].startsWith("/"))
+      assetFileNames:
+        userDefinedAssetFileNames ??
+        ((info) => {
+          const input = info.originalFileNames[0];
+          const inputId = input + (ssr ? "-ssr" : "");
+
+          if (!stashedReturns[inputId]) {
+            const r = handleSsrAssetName(
+              info,
+              input,
+              userOptions.build.assetFile,
+              ssr
             );
-          }),
+
+            stashedReturns[inputId] =
+              r ??
+              join(
+                userOptions.build.preserveModulesRoot === false &&
+                  userOptions.build.assetsDir
+                  ? userOptions.build.assetsDir
+                  : "",
+                userOptions.normalizer(input)[0]
+              );
+          }
+          // in the case of empty basePath, it will not be sliced from the path, so, we need to slice it here
+          // at the last possible moment as to not confuse the rest of the logic around the basePath
+          return stashedReturns[inputId].slice(
+            Number(stashedReturns[inputId].startsWith("/"))
+          );
+        }),
       chunkFileNames:
         userDefinedChunkFileNames ??
         ((info) => {
@@ -238,9 +284,6 @@ export const resolveUserConfig: ResolveUserConfigFn =
               ssr
             );
 
-            if (userOptions.verbose) {
-              console.log("chunkFileNames", input, stashedReturns[inputId]);
-            }
             stashedReturns[inputId] = r ?? info.name;
           }
           // in the case of empty basePath, it will not be sliced from the path, so, we need to slice it here
@@ -259,18 +302,22 @@ export const resolveUserConfig: ResolveUserConfigFn =
         config.build?.rollupOptions?.output !== null
       ? [config.build?.rollupOptions?.output, pluginOutput]
       : pluginOutput;
-    const vitePrefix = config.envPrefix ?? DEFAULT_CONFIG.ENV_PREFIX;
-    
-    // Retroactively update userOptions with environment variables (env vars take precedence over config)
-    const envBaseUrl = process.env[`${vitePrefix}BASE_URL`];
-    if (envBaseUrl != null && envBaseUrl !== "") {
-      userOptions.moduleBaseURL = envBaseUrl;
-    }
-    const envPublicOrigin = process.env[`${vitePrefix}PUBLIC_ORIGIN`];
-    if (envPublicOrigin != null) {
-      userOptions.publicOrigin = envPublicOrigin;
-    }
     
+    const vitePrefix = config.envPrefix ?? DEFAULT_CONFIG.ENV_PREFIX;
+
+    // Get environment variables (env vars take precedence over config)
+    const primaryPrefix =
+      typeof vitePrefix === "string" ? vitePrefix : vitePrefix[0];
+    const envBaseUrl = getEnvValue("BASE_URL", primaryPrefix);
+    const effectiveModuleBaseURL =
+      envBaseUrl != null && envBaseUrl !== ""
+        ? envBaseUrl
+        : userOptions.moduleBaseURL;
+
+    const envPublicOrigin = getEnvValue("PUBLIC_ORIGIN", primaryPrefix);
+    const effectivePublicOrigin =
+      envPublicOrigin != null ? envPublicOrigin : userOptions.publicOrigin;
+
     const nodeEnv = getNodeEnv();
     let mode =
       config.mode ??
@@ -284,6 +331,44 @@ export const resolveUserConfig: ResolveUserConfigFn =
       }
       mode = nodeEnv;
     }
+
+    // Calculate effective values based on command and environment
+    // Prioritize userOptions.projectRoot when explicitly set, regardless of config.root
+    // This ensures Environment API environments use their specific project roots
+    const effectiveProjectRoot =
+      userOptions.projectRoot || config.root || "";
+
+    // Calculate moduleRootPath based on command and environment
+    // During serve (development): use moduleBasePath (source paths)
+    // During build (production): use build output paths
+    let effectiveModuleRootPath: string;
+    if (configEnv.command === "serve") {
+      // In development/serve mode, use moduleBasePath for source paths
+      // preserve module root, if true, set as moduleBasePath
+      effectiveModuleRootPath = userOptions.moduleBasePath || "/";
+    } else {
+      // In production/build mode, use build output paths
+      // The RSC stream contains references like "src/components/Link.client.tsx"
+      // But the compiled files are in dist/client/components/Link.client-CE-JGRqa.js
+      // the manifest maps them from the client folder, so this the correct root for a build
+      effectiveModuleRootPath = join(
+        effectiveProjectRoot,
+        userOptions.build.outDir,
+        userOptions.build.client,
+        !userOptions.moduleBasePath.startsWith("/") ? "/" : ""
+      );
+      if (
+        !userOptions.build.preserveModulesRoot &&
+        !userOptions.moduleBasePath.startsWith(userOptions.moduleBase)
+      ) {
+        effectiveModuleRootPath = join(
+          effectiveModuleRootPath,
+          userOptions.moduleBase,
+          userOptions.moduleBasePath === "" ? "/" : userOptions.moduleBasePath
+        );
+      }
+    }
+
     const minify = config.build?.minify;
 
     const srrConfig = {
@@ -304,12 +389,7 @@ export const resolveUserConfig: ResolveUserConfigFn =
         ],
       },
     };
-    let publicOrigin =
-      userOptions.publicOrigin ??
-      process.env[`${vitePrefix}PUBLIC_ORIGIN`] ??
-      "";
-    const PROD = mode === "production";
-    const DEV = mode === "development";
+    let publicOrigin = effectivePublicOrigin ?? DEFAULT_CONFIG.PUBLIC_ORIGIN;
     const port =
       typeof config.server?.port === "number" ? config.server?.port : 5173;
     const strictPort = config.server?.strictPort ?? true;
@@ -317,55 +397,60 @@ export const resolveUserConfig: ResolveUserConfigFn =
       typeof config.server?.host === "string"
         ? config.server?.host
         : "localhost";
-    const base = config.base ?? userOptions.moduleBaseURL ?? DEFAULT_CONFIG.MODULE_BASE_URL;
+    const base =
+      effectiveModuleBaseURL ?? config.base ?? DEFAULT_CONFIG.MODULE_BASE_URL;
     if (configEnv.command === "serve" && !configEnv.isPreview) {
-      if (strictPort) {
-        publicOrigin = `http${
-          config.server?.https ? "s" : ""
-        }://${host}:${port}`;
-      } else {
-        publicOrigin = "";
-      }
+      // In dev mode, use empty publicOrigin so the client uses window.location.origin.
+      // This avoids hardcoding a port that may change if the configured port is taken.
+      publicOrigin = "";
     }
-    const ssrDefine = ssr
-      ? {
-          [`process.env.${vitePrefix}SSR`]: `${ssr}`,
-          [`process.env.${vitePrefix}DEV`]: `${DEV}`,
-          [`process.env.${vitePrefix}PROD`]: `${PROD}`,
-          [`process.env.${vitePrefix}MODE`]: `"${mode}"`,
-          [`process.env.${vitePrefix}BASE_URL`]: `"${base}"`,
-          [`process.env.${vitePrefix}PUBLIC_ORIGIN`]: `"${publicOrigin}"`,
-        }
-      : {};
+    const isDev = configEnv.mode === 'development' || configEnv.command === 'serve';
+    const ssrDefine = {
+      [`process.env.${primaryPrefix}BASE_URL`]: `"${base}"`,
+      [`process.env.${primaryPrefix}PUBLIC_ORIGIN`]: `"${publicOrigin}"`,
+      [`process.env.NODE_ENV`]: `"${configEnv.mode}"`,
+      [`process.env.VITE_DEV`]: isDev ? 'true' : 'false',
+      [`process.env.VITE_PROD`]: isDev ? 'false' : 'true',
+    };
     const define = {
       ...config.define,
+      // Standard Vite env vars
+      [`import.meta.env.DEV`]: isDev ? 'true' : 'false',
+      [`import.meta.env.PROD`]: isDev ? 'false' : 'true',
+      [`import.meta.env.MODE`]: `"${configEnv.mode}"`,
+      [`import.meta.env.SSR`]: 'false', // Will be overridden per-environment
+      // Custom env vars
       [`import.meta.env.BASE_URL`]: `"${base}"`,
       [`import.meta.env.PUBLIC_ORIGIN`]: `"${publicOrigin}"`,
       ...ssrDefine,
     };
-
     // Set process.env values to ensure they're available in process.env for server-side code
-    // These will never be cleaned up, because we are resolving the user config
-    // and it's assumed the thread closes after this and we don't want
-    // it to change after the config has been resolved
-    process.env[`${vitePrefix}BASE_URL`] = base;
-    process.env[`${vitePrefix}PUBLIC_ORIGIN`] = publicOrigin;
+    if (!getEnvValue("BASE_URL", primaryPrefix)) {
+      setEnvValue("BASE_URL", base, primaryPrefix);
+    }
+    if (!getEnvValue("PUBLIC_ORIGIN", primaryPrefix)) {
+      setEnvValue("PUBLIC_ORIGIN", publicOrigin, primaryPrefix);
+    }
 
     if (condition === "react-client") {
       // client plugin build options (client plugin still outputs server files)
       const clientConfig = {
         ...config,
-        root: root,
+        root: effectiveProjectRoot,
         mode: mode,
         base: base,
         envPrefix: vitePrefix,
         resolve: {
           ...config.resolve,
-          external: config.resolve?.external ?? [
-            "react",
-            "react-dom",
-            "react-server-dom-esm/client",
-          ],
+          // For static builds (browser/ESM): don't externalize anything - bundle everything
+          // For client/server builds (SSR): externalize React modules as usual
+          external: ssr
+            ? (config.resolve?.external ?? [
+                "react",
+                "react-dom",
+                "react-server-dom-esm/client",
+              ])
+            : undefined, // Bundle everything for static builds
         },
         define: define,
         ssr: srrConfig,
@@ -395,8 +480,14 @@ export const resolveUserConfig: ResolveUserConfigFn =
           minify: minify,
           rollupOptions: {
             ...config.build?.rollupOptions,
+            // Use HTML + client entries for non-SSR client builds (static)
+            // and pure client module entries for SSR client builds.
             input: Object.fromEntries(
-              Object.entries(autoDiscoveredFiles.inputs).map(([key, value]) => [
+              Object.entries(
+                ssr
+                  ? autoDiscoveredFiles.clientInputs
+                  : autoDiscoveredFiles.staticInputs
+              ).map(([key, value]) => [
                 key,
                 value.slice(Number(value.startsWith("/"))),
               ])
@@ -405,6 +496,43 @@ export const resolveUserConfig: ResolveUserConfigFn =
             preserveEntrySignatures:
               config.build?.rollupOptions?.preserveEntrySignatures ??
               "exports-only",
+            // For static builds (browser/ESM): bundle everything including node_modules to avoid _virtual files
+            // For client/server builds (SSR): externalize node_modules as usual
+            external: ssr 
+              ? (id: string, _parent?: string, _isResolved?: boolean) => {
+                  // Don't externalize virtual modules - let Vite inline them during build
+                  // Virtual modules are Vite's internal helpers that should be inlined, not externalized
+                  if (id.includes("_virtual/") || id.startsWith("_virtual")) {
+                    return false; // Let Vite handle virtual modules by inlining them
+                  }
+                  // Use user's external config or default to fsevents
+                  const userExternal = config.build?.rollupOptions?.external ?? ["fsevents"];
+                  if (Array.isArray(userExternal)) {
+                    return userExternal.includes(id);
+                  }
+                  if (typeof userExternal === "function") {
+                    return userExternal(id, _parent, _isResolved ?? false);
+                  }
+                  return false;
+                }
+              : (() => {
+                  // For static builds, only externalize fsevents (macOS-specific, not needed in browser)
+                  // Don't externalize node_modules - they should be bundled to avoid _virtual files
+                  const userExternal = config.build?.rollupOptions?.external ?? ["fsevents"];
+                  if (Array.isArray(userExternal)) {
+                    // Only keep fsevents, filter out everything else (including node_modules)
+                    return userExternal.filter((ext) => typeof ext === "string" && ext === "fsevents");
+                  }
+                  // If user provided a function or RegExp, wrap it to only allow fsevents
+                  if (typeof userExternal === "function") {
+                    return (id: string) => {
+                      if (id === "fsevents") return true;
+                      return false; // Don't externalize anything else for static builds
+                    };
+                  }
+                  // Default: only fsevents
+                  return ["fsevents"];
+                })(),
           },
           ssr: ssr,
           manifest: config.build?.manifest ?? `.vite/manifest.json`,
@@ -424,7 +552,7 @@ export const resolveUserConfig: ResolveUserConfigFn =
     } else {
       const serverConfig = {
         ...config,
-        root: root,
+        root: effectiveProjectRoot,
         mode: mode,
         base: userOptions.moduleBaseURL,
         envPrefix: vitePrefix,
@@ -443,7 +571,7 @@ export const resolveUserConfig: ResolveUserConfigFn =
           emptyOutDir: config.build?.emptyOutDir ?? true,
           outDir:
             config.build?.outDir ?? join(userOptions.build.outDir, envDir),
-          target: config.build?.target ?? "node18",
+          target: config.build?.target ?? "esnext", // Use esnext for pure ESM - no helpers needed
           minify: minify,
           ssr: ssr,
           manifest: config.build?.manifest ?? `.vite/manifest.json`,
@@ -452,6 +580,7 @@ export const resolveUserConfig: ResolveUserConfigFn =
             typeof config.build?.ssrEmitAssets === "boolean"
               ? config.build?.ssrEmitAssets
               : true,
+
           copyPublicDir:
             typeof config.build?.copyPublicDir === "boolean"
               ? config.build?.copyPublicDir
@@ -464,10 +593,106 @@ export const resolveUserConfig: ResolveUserConfigFn =
               : true,
           rollupOptions: {
             ...config.build?.rollupOptions,
-            input: autoDiscoveredFiles.inputs,
+            input: autoDiscoveredFiles.serverInputs,
             preserveEntrySignatures:
               config.build?.rollupOptions?.preserveEntrySignatures ?? "strict",
+            // Externalize core React deps for the server bundle
+            external: config.build?.rollupOptions?.external ?? [
+              "react",
+              "react/jsx-runtime",
+              "react/jsx-dev-runtime",
+              "react-dom",
+              "react-server-dom-esm/server",
+              "react-server-dom-esm/server.node",
+            ],
+            // Use the same output configuration as client environment for consistent hashing
+            // This ensures client components have the same module IDs across all environments
             output: newOutput,
+            // Configure Rollup context for server builds to use react-server conditions
+            context: "module",
+            // Set Node.js conditions for server builds
+            plugins: [
+              ...(Array.isArray(config.build?.rollupOptions?.plugins)
+                ? config.build.rollupOptions.plugins
+                : config.build?.rollupOptions?.plugins
+                ? [config.build.rollupOptions.plugins]
+                : []),
+              {
+                name: "react-server-conditions",
+                buildStart() {
+                  if (typeof this.environment.name !== "string") {
+                    this.warn(
+                      "Environment name is not a string, skipping react-server-conditions plugin"
+                    );
+                    return;
+                  }
+
+                  if (this.environment.name === "server") {
+                    // Ensure react-server condition is available during server builds
+                    if (!process.env.NODE_OPTIONS?.includes("react-server")) {
+                      if(this.environment.config.define) {
+                        this.environment.config.define = {
+                          ...this.environment.config.define,
+                          "process.env.NODE_OPTIONS": `"${process.env.NODE_OPTIONS} --conditions react-server"`
+                        }
+                      } else {
+                        this.environment.config.define = {
+                          "process.env.NODE_OPTIONS": `"${process.env.NODE_OPTIONS} --conditions react-server"`
+                        }
+                      }
+                      // process.env.NODE_OPTIONS =
+                      //   (process.env.NODE_OPTIONS || "") +
+                      //   " --conditions react-server";
+                    }
+                  } else {
+                    if (process.env.NODE_OPTIONS?.includes("react-server")) {
+                      if(this.environment.config.define && this.environment.config.define["process.env.NODE_OPTIONS"] && this.environment.config.define["process.env.NODE_OPTIONS"].includes("react-server")) {
+                        this.environment.config.define = {
+                          ...this.environment.config.define,
+                          "process.env.NODE_OPTIONS": this.environment.config.define["process.env.NODE_OPTIONS"].replace(/--conditions[=\s]react-server/, "")
+                        }
+                      } else {
+                        this.environment.config.define = {
+                          "process.env.NODE_OPTIONS": ""
+                        }
+                      }
+                      //process.env.NODE_OPTIONS =
+                        //process.env.NODE_OPTIONS.replace(
+                          //" --conditions react-server",
+                          //""
+                        //);
+                    }
+                  }
+                },
+              },
+              // Add content hash plugin for consistent hashing across environments
+              {
+                name: "vite:plugin-react-server/content-hash",
+                augmentChunkHash(chunk) {
+                  // Add a consistent salt based on the chunk's source file to make hash generation deterministic
+                  if (chunk.facadeModuleId) {
+                    try {
+                      const sourcePath = resolve(
+                        userOptions.projectRoot,
+                        chunk.facadeModuleId
+                      );
+                      if (existsSync(sourcePath)) {
+                        const sourceContent = readFileSync(sourcePath, "utf-8");
+                        // Use a short hash of the source content as salt
+                        return createHash("sha1")
+                          .update(sourceContent)
+                          .digest("hex")
+                          .substring(0, 8);
+                      }
+                    } catch (error) {
+                      // Fallback: use the module ID as salt
+                      return chunk.facadeModuleId;
+                    }
+                  }
+                  return;
+                },
+              },
+            ],
           },
         },
       } satisfies ResolvedUserConfig;