fix: use root-relative URLs for in-project client component modules in dev (#337)

In dev mode, client component modules were always loaded via
`/@fs/<cwd>/...` URLs (both in `__webpack_require__` and `<link
rel="modulepreload">`). However, Vite's module graph normalizes
in-project files to root-relative URLs (e.g., `/app/providers.jsx`).
This URL mismatch caused the browser to load the same module twice, once
at `/@fs/...` and again at the root-relative path with a `?t=`
cache-bust timestamp from Vite's HMR/dep optimization.

Author: lazarv

packages/react-server/lib/dev/create-server.mjs

@@ -864,9 +864,17 @@ export default async function createServer(root, options) {
           if (!mod) return;
 
           if (mod.__react_server_client_component__) {
-            modules.unshift(
-              `/@fs/${sys.normalizePath(moduleId)}`.replace(/\/+/g, "/")
-            );
+            const normalizedId = sys.normalizePath(moduleId);
+            const relPath = sys.normalizePath(relative(cwd, normalizedId));
+            if (
+              relPath.startsWith("../") ||
+              relPath.startsWith("__/") ||
+              relPath.includes("node_modules")
+            ) {
+              modules.unshift(`/@fs/${normalizedId}`.replace(/\/+/g, "/"));
+            } else {
+              modules.unshift(`/${relPath}`.replace(/\/+/g, "/"));
+            }
           } else {
             if (/node_modules/.test(moduleId)) return;
 

packages/react-server/lib/plugins/react-server-runtime.mjs

@@ -46,26 +46,28 @@ export default function viteReactServerRuntime() {
           };
           self.__react_server_hydrate_init__();`;
         } else if (id.endsWith("/@__webpack_require__")) {
+          const basePrefix = config.base
+            ? `${config.base}/`.replace(/\/+/g, "/")
+            : "/";
+          const fsPrefix = config.base
+            ? `${config.base}/@fs/${cwd()}`.replace(/\/+/g, "/")
+            : `/@fs/${cwd()}`.replace(/\/+/g, "/");
           return `
           const moduleCache = new Map();
           self.__webpack_require__ = function (id) {
           if (!moduleCache.has(id)) {
             if (/^https?\\:/.test(id)) {
               const url = new URL(id);
-              url.pathname = "${
-                config.base
-                  ? `${config.base}/@fs/${cwd()}`.replace(/\/+/g, "/")
-                  : `/@fs/${cwd()}`.replace(/\/+/g, "/")
-              }" + url.pathname;
+              url.pathname = "${fsPrefix}" + url.pathname;
               const mod = import(/* @vite-ignore */ url.href);
               moduleCache.set(id, mod);
               return mod;
             }
-          ${
-            config.base
-              ? `const mod = import(/* @vite-ignore */ new URL("${`${config.base}/@fs/${cwd()}/`.replace(/\/+/g, "/")}" + id, location.origin).href);`
-              : `const mod = import(/* @vite-ignore */ new URL("${`/@fs/${cwd()}/`.replace(/\/+/g, "/")}" + id, location.origin).href);`
-          }
+          const isExternal = id.startsWith("__/") || id.startsWith("../") || id.includes("node_modules");
+          const prefix = isExternal
+            ? "${fsPrefix}/" + (id.startsWith("__/") ? id.replace(/^(__\\/)+/, function(m) { return m.replace(/__\\//g, "../"); }) : id)
+            : "${basePrefix}" + id;
+          const mod = import(/* @vite-ignore */ new URL(prefix, location.origin).href);
           moduleCache.set(id, mod);
           return mod;
           }