fix: storybook infinite loading

package.json

@@ -18,7 +18,7 @@
     "install-17": "node scripts/react-17-install-prep.mjs && yarn add react@^17 react-dom@^17 @testing-library/react@^12 @testing-library/react-hooks@^8 @testing-library/dom@^8 react-test-renderer@^16.9.0 && node scripts/oldReactSupport.mjs",
     "install-18": "node scripts/react-18-install-prep.mjs && yarn add react@^18 react-dom@^18 react-test-renderer@^18.3.1 && node scripts/oldReactSupport.mjs",
     "install-canary": "node scripts/react-canary-install-prep.mjs && yarn add react@canary react-dom@canary",
-    "start": "cross-env NODE_ENV=storybook storybook dev -p 9003 --ci -c '.storybook'",
+    "start": "cross-env NODE_ENV=storybook storybook dev -p 9003 --host 127.0.0.1 --ci -c '.storybook'",
     "build:storybook": "storybook build -c .storybook -o dist/$(git rev-parse HEAD)/storybook",
     "start:chromatic": "CHROMATIC=1 NODE_ENV=storybook storybook dev -p 9004 --ci -c '.chromatic'",
     "build:chromatic": "CHROMATIC=1 storybook build -c .chromatic -o dist/$(git rev-parse HEAD)/chromatic",

packages/dev/storybook-builder-parcel/package.json

@@ -6,7 +6,6 @@
   "dependencies": {
     "@parcel/core": "^2.16.3",
     "@parcel/reporter-cli": "^2.16.3",
-    "http-proxy-middleware": "^2.0.6",
     "storybook": "^9.0.18"
   },
   "peerDependencies": {

packages/dev/storybook-builder-parcel/preset.js

@@ -1,6 +1,6 @@
 const { Parcel } = require("@parcel/core");
 const path = require("path");
-const { createProxyMiddleware } = require("http-proxy-middleware");
+const http = require("http");
 const fs = require("fs");
 
 const { generateIframeModern } = require("./gen-iframe-modern.js");
@@ -16,35 +16,50 @@ exports.start = async function ({ options, router }) {
       return next();
     }
 
-    let proxy = createProxyMiddleware({
-      target: "http://localhost:3000/",
-      selfHandleResponse: true,
-      logLevel: "warn",
-      onProxyRes(proxyRes, req, res) {
-        // Parcel dev server responds with main HTML page if the file doesn't exist...
-        if (
-          proxyRes.statusCode === 404 ||
-          (proxyRes.headers["content-type"]?.startsWith("text/html") &&
-            !req.url.startsWith("/iframe.html"))
-        ) {
-          return next();
-        } else {
-          res.statusCode = proxyRes.statusCode;
-          for (let header in proxyRes.headers) {
-            res.setHeader(header, proxyRes.headers[header]);
-          }
-          proxyRes.pipe(res);
-        }
-      },
+    const proxyOptions = {
+      hostname: "127.0.0.1",
+      port: 3000,
+      path: req.url,
+      method: req.method,
+      headers: { ...req.headers, host: "127.0.0.1:3000" },
+    };
+
+    const proxyReq = http.request(proxyOptions, (proxyRes) => {
+      // Parcel dev server responds with main HTML page if the file doesn't exist...
+      if (
+        proxyRes.statusCode === 404 ||
+        (proxyRes.headers["content-type"]?.startsWith("text/html") &&
+          !req.url.startsWith("/iframe.html"))
+      ) {
+        proxyRes.resume();
+        return next();
+      }
+
+      res.writeHead(proxyRes.statusCode, proxyRes.headers);
+      proxyRes.pipe(res);
+    });
+
+    proxyReq.setTimeout(10000, () => {
+      proxyReq.destroy(new Error("Proxy request timed out after 10 seconds"));
+      if (!res.headersSent) {
+        res.writeHead(504).end("Proxy Timeout");
+      }
+    });
+
+    proxyReq.on("error", (err) => {
+      if (err.code === "ECONNREFUSED") return next();
+      if (!res.headersSent) res.writeHead(502).end(); 
     });
 
-    // Remove socket/connection temporarily to prevent proxy from subscribing to `close` event and triggering warning.
-    let { socket, connection } = req;
-    req.socket = null;
-    req.connection = null;
-    await proxy(req, res, next);
-    req.socket = socket;
-    req.connection = connection;
+    req.on("close", () => {
+      proxyReq.destroy();
+    });
+
+    if (req.method === "POST" || req.method === "PUT" || req.method === "PATCH") {
+      req.pipe(proxyReq);
+    } else {
+      proxyReq.end();
+    }
   });
 
   let subscription = await parcel.watch();
@@ -89,11 +104,13 @@ async function createParcel(options, isDev = false) {
     serveOptions: isDev
       ? {
           port: 3000,
+          host: "127.0.0.1",
         }
       : null,
     hmrOptions: isDev
       ? {
           port: 3001,
+          host: "127.0.0.1",
         }
       : null,
     additionalReporters: [