fix: remote example production config (#109)

This PR updates and fixes configuration in the `RemoteComponent` example to make it work again in a production build after configuration handling changes introduced by #52 As the configuration is now a prebuilt module in production and only includes configuration entries specified in the `react-server.production.config.mjs` file, the import map and shared module resolution information were missing in the production build. Fixes static export filesize indentation Fixes remote style link URLs when used in an RSC update request Fixes remote client component import URL handling
lazarv · Jan 14, 2025 · d09c5f5 · d09c5f5
1 parent 5e1cd79
commit d09c5f5
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 49 deletions.
diff --git a/examples/remote/react-server.config.mjs b/examples/remote/react-server.config.mjs
@@ -1,46 +1,4 @@
 export default {
-  importMap: {
-    imports: {
-      ...(process.env.NODE_ENV !== "production"
-        ? {
-            react:
-              "https://esm.sh/react@0.0.0-experimental-204a551e-20240926?dev",
-            "react/jsx-dev-runtime":
-              "https://esm.sh/react@0.0.0-experimental-204a551e-20240926/jsx-dev-runtime?dev",
-            "react-dom":
-              "https://esm.sh/react-dom@0.0.0-experimental-204a551e-20240926?dev",
-            "react-dom/client":
-              "https://esm.sh/react-dom@0.0.0-experimental-204a551e-20240926/client?dev",
-            "react-server-dom-webpack/client.browser":
-              "https://esm.sh/react-server-dom-webpack@0.0.0-experimental-204a551e-20240926/client.browser?dev",
-            "http://[::1]:3001/": "/",
-            "http://localhost:3003/": "/",
-          }
-        : {
-            react: "https://esm.sh/react@0.0.0-experimental-204a551e-20240926",
-            "react/jsx-runtime":
-              "https://esm.sh/react@0.0.0-experimental-204a551e-20240926/jsx-runtime",
-            "react-dom":
-              "https://esm.sh/react-dom@0.0.0-experimental-204a551e-20240926",
-            "react-dom/client":
-              "https://esm.sh/react-dom@0.0.0-experimental-204a551e-20240926/client",
-            "react-server-dom-webpack/client.browser":
-              "https://esm.sh/react-server-dom-webpack@0.0.0-experimental-204a551e-20240926/client.browser",
-            "http://localhost:3003/client/node_modules/@lazarv/react-server/":
-              "/client/node_modules/@lazarv/react-server/",
-          }),
-    },
-  },
-  resolve: {
-    shared: [
-      "react",
-      "react/jsx-dev-runtime",
-      "react/jsx-runtime",
-      "react-dom",
-      "react-dom/client",
-      "react-server-dom-webpack/client.browser",
-    ],
-  },
   export() {
     return [
       {

diff --git a/examples/remote/react-server.development.config.mjs b/examples/remote/react-server.development.config.mjs
@@ -0,0 +1,29 @@
+export default {
+  importMap: {
+    imports: {
+      react: "https://esm.sh/react@0.0.0-experimental-204a551e-20240926?dev",
+      "react/jsx-dev-runtime":
+        "https://esm.sh/react@0.0.0-experimental-204a551e-20240926/jsx-dev-runtime?dev",
+      "react/jsx-runtime":
+        "https://esm.sh/react@0.0.0-experimental-204a551e-20240926/jsx-runtime?dev",
+      "react-dom":
+        "https://esm.sh/react-dom@0.0.0-experimental-204a551e-20240926?dev",
+      "react-dom/client":
+        "https://esm.sh/react-dom@0.0.0-experimental-204a551e-20240926/client?dev",
+      "react-server-dom-webpack/client.browser":
+        "https://esm.sh/react-server-dom-webpack@0.0.0-experimental-204a551e-20240926/client.browser?dev",
+      "http://[::1]:3001/": "/",
+      "http://localhost:3003/": "/",
+    },
+  },
+  resolve: {
+    shared: [
+      "react",
+      "react/jsx-dev-runtime",
+      "react/jsx-runtime",
+      "react-dom",
+      "react-dom/client",
+      "react-server-dom-webpack/client.browser",
+    ],
+  },
+};
diff --git a/examples/remote/react-server.production.config.mjs b/examples/remote/react-server.production.config.mjs
@@ -0,0 +1,26 @@
+export default {
+  importMap: {
+    imports: {
+      react: "https://esm.sh/react@0.0.0-experimental-204a551e-20240926",
+      "react/jsx-runtime":
+        "https://esm.sh/react@0.0.0-experimental-204a551e-20240926/jsx-runtime",
+      "react-dom":
+        "https://esm.sh/react-dom@0.0.0-experimental-204a551e-20240926",
+      "react-dom/client":
+        "https://esm.sh/react-dom@0.0.0-experimental-204a551e-20240926/client",
+      "react-server-dom-webpack/client.browser":
+        "https://esm.sh/react-server-dom-webpack@0.0.0-experimental-204a551e-20240926/client.browser",
+      "http://localhost:3003/client/node_modules/@lazarv/react-server/":
+        "/client/node_modules/@lazarv/react-server/",
+    },
+  },
+  resolve: {
+    shared: [
+      "react",
+      "react/jsx-runtime",
+      "react-dom",
+      "react-dom/client",
+      "react-server-dom-webpack/client.browser",
+    ],
+  },
+};
diff --git a/packages/react-server/config/index.mjs b/packages/react-server/config/index.mjs
@@ -22,7 +22,7 @@ export async function loadConfig(initialConfig, options = {}) {
   const configPatterns = [
     "**/{react-server,+*,vite}.config.{json,js,ts,mjs,mts,ts.mjs,mts.mjs}",
     options.command === "build"
-      ? "**/{react-server,+*,vite}.build.config.{json,js,ts,mjs,mts,ts.mjs,mts.mjs}"
+      ? "**/{react-server,+*,vite}.{build,production,runtime,server}.config.{json,js,ts,mjs,mts,ts.mjs,mts.mjs}"
       : "**/{react-server,+*,vite}.{development,runtime,server}.config.{json,js,ts,mjs,mts,ts.mjs,mts.mjs}",
     "!**/node_modules",
     "!*/**/vite.config.{json,js,ts,mjs,mts,ts.mjs,mts.mjs}",

diff --git a/packages/react-server/lib/build/static.mjs b/packages/react-server/lib/build/static.mjs
@@ -32,7 +32,7 @@ const cwd = sys.cwd();
 
 function size(bytes) {
   const s = filesize(bytes);
-  return " ".repeat(Math.max(0, 8 - s.length)) + s;
+  return " ".repeat(Math.max(0, 10 - s.length)) + s;
 }
 
 function log(
@@ -49,7 +49,7 @@ function log(
       (dirname(normalizedBasename) === "." ? "" : "/") +
         basename(normalizedBasename)
     )} ${`${" ".repeat(
-      maxFilenameLength - normalizedBasename.length
+      Math.max(0, maxFilenameLength - normalizedBasename.length)
     )}${colors.gray(colors.bold(size(htmlStat.size)))}${colors.dim(
       `${gzipStat.size ? ` │ gzip: ${size(gzipStat.size)}` : ""}${brotliStat.size ? ` │ brotli: ${size(brotliStat.size)}` : ""}${postponedStat.size ? ` │ postponed: ${size(postponedStat.size)}` : ""}`
     )}`}`

diff --git a/packages/react-server/server/render-rsc.jsx b/packages/react-server/server/render-rsc.jsx
@@ -235,9 +235,10 @@ export async function render(Component) {
         const configBaseHref = config.base
           ? (link) => `/${config.base}/${link?.id || link}`.replace(/\/+/g, "/")
           : (link) => link?.id || link;
-        const linkHref = remote
-          ? (link) => `${protocol}//${host}${configBaseHref(link)}`
-          : configBaseHref;
+        const linkHref =
+          remote || (origin && host !== origin)
+            ? (link) => `${protocol}//${host}${configBaseHref(link)}`
+            : configBaseHref;
         const Styles = () => {
           const styles = getContext(STYLES_CONTEXT);
           return (
@@ -487,7 +488,7 @@ export async function render(Component) {
                     `const moduleCache = new Map();
                     self.__webpack_require__ = function (id) {
                       if (!moduleCache.has(id)) {
-                        const modulePromise = import(("${`/${config.base ?? ""}/`.replace(/\/+/g, "/")}" + id).replace(/\\/+/g, "/"));
+                        const modulePromise = /^https?\\:/.test(id) ? import(id) : import(("${`/${config.base ?? ""}/`.replace(/\/+/g, "/")}" + id).replace(/\\/+/g, "/"));
                         modulePromise.then(
                           (module) => {
                             modulePromise.value = module;