fix: using ipv6 listener hostname

lazarv · Sep 12, 2024 · d5ae385 · d5ae385
1 parent 6feece8
commit d5ae385
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 6 deletions.
diff --git a/examples/remote/index.jsx b/examples/remote/index.jsx
@@ -23,7 +23,7 @@ export default function Remote() {
         }}
       >
         <h2>Remote</h2>
-        <RemoteComponent src="http://localhost:3001" ttl={0} />
+        <RemoteComponent src="http://[::1]:3001" ttl={0} />
       </div>
       <div
         style={{

diff --git a/examples/remote/package.json b/examples/remote/package.json
@@ -4,7 +4,7 @@
   "description": "@lazarv/react-server RemoteComponent example application",
   "scripts": {
     "dev:host": "react-server ./index.jsx --port 3000 --name host",
-    "dev:remote": "react-server ./remote.jsx --port 3001 --cors --name remote",
+    "dev:remote": "react-server ./remote.jsx --host ::1 --port 3001 --cors --name remote",
     "dev:static": "react-server ./static.jsx --port 3002 --cors --name static",
     "dev:streaming": "react-server ./streaming.jsx --port 3003 --cors --name streaming",
     "dev": "CI=1 run-p dev:host dev:remote dev:static dev:streaming",

diff --git a/examples/remote/react-server.config.mjs b/examples/remote/react-server.config.mjs
@@ -13,7 +13,7 @@ export default {
               "https://esm.sh/react-dom@0.0.0-experimental-58af67a8f8-20240628/client?dev",
             "react-server-dom-webpack/client.browser":
               "https://esm.sh/react-server-dom-webpack@0.0.0-experimental-58af67a8f8-20240628/client.browser?dev",
-            "http://localhost:3001/": "/",
+            "http://[::1]:3001/": "/",
             "http://localhost:3003/": "/",
           }
         : {

diff --git a/packages/react-server/lib/dev/action.mjs b/packages/react-server/lib/dev/action.mjs
@@ -1,3 +1,5 @@
+import { isIPv6 } from "node:net";
+
 import open from "open";
 import colors from "picocolors";
 
@@ -56,7 +58,7 @@ export default async function dev(root, options) {
               if (listenerHost) {
                 resolvedUrls.push(
                   new URL(
-                    `http${options.https ?? configRoot.server?.https ? "s" : ""}://${listenerHost}:${listener.address().port}`
+                    `http${options.https ?? configRoot.server?.https ? "s" : ""}://${isIPv6(listenerHost) ? `[${listenerHost}]` : listenerHost}:${listener.address().port}`
                   )
                 );
                 openServer(
@@ -69,7 +71,7 @@ export default async function dev(root, options) {
                 getServerAddresses(listener).forEach((address) => {
                   resolvedUrls.push(
                     new URL(
-                      `http${options.https ?? configRoot.server?.https ? "s" : ""}://${address.address}:${listener.address().port}`
+                      `http${options.https ?? configRoot.server?.https ? "s" : ""}://${isIPv6(address.address) ? `[${address.address}]` : address.address}:${listener.address().port}`
                     )
                   );
                   if (!opening) {

diff --git a/packages/react-server/lib/start/action.mjs b/packages/react-server/lib/start/action.mjs
@@ -1,6 +1,7 @@
 import cluster from "node:cluster";
 import { once } from "node:events";
 import { createRequire } from "node:module";
+import { isIPv6 } from "node:net";
 import { availableParallelism } from "node:os";
 import { pathToFileURL } from "node:url";
 
@@ -68,7 +69,7 @@ async function worker(root, options) {
       logger.info(
         `worker #${process.pid} listening on ${
           config.server?.https || options.https ? "https" : "http"
-        }://${listenerHost}:${listener.address().port} in ${formatDuration(Date.now() - globalThis.__react_server_start__)}`
+        }://${isIPv6(listenerHost) ? `[${listenerHost}]` : listenerHost}:${listener.address().port} in ${formatDuration(Date.now() - globalThis.__react_server_start__)}`
       );
     } else {
       getServerAddresses(listener).forEach((address) =>