Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

fix: devtools not working over lan ip when using `--public` flag

Abierto
  • ¿Algo no está bien?
#1,118 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
65/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
node.js, typescript, vite
Área
developer-experience, devtools

Línea de trabajo

The patch is against dist/chunks/module-main.mjs, so start by locating its source (the module entry under packages/devtools/src) and the nuxt.hook("listen") handler that sets publicDevServerOrigin. From there trace how origins/hosts flow into the Vite devtools config (extendViteDevToolsConfig, allowedOrigins, @vitejs/devtools DevTools() options) and Vite's server.host/allowedHosts. Done looks like: running nuxt dev --public and opening devtools from a LAN IP succeeds, while localhost-only defaults stay intact; verify against existing devtools e2e tests if present.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

bug
🐛 The bug

When running nuxt dev --public, the devtools don't work when trying to access them from another computer on the same local network.

I depend on this because i always have the project running on one computer and access the site from a couple different computers on the same network.

🛠️ To reproduce

Run any project using devtools v4 via nuxt dev --public and try to open the devtools while accessing the website via the lan ip address.

🌈 Expected behavior

The devtools should expose the websocket to the same hosts nuxt itself does.

This may also affect people who depend on other flags like --tunnel or --host although I haven't tested that myself.

ℹ️ Additional context

I had an agent write a pnpm patch to workaround the issue. Leaving it here in case it can help others.

@[email protected] 
diff --git a/dist/chunks/module-main.mjs b/dist/chunks/module-main.mjs
@@ -3454,7 +3454,33 @@
     version,
     resolveFrom: import.meta.url
   };
+}
+function isLoopbackHost(hostname) {
+  const h = hostname.replace(/^\[|\]$/g, "");
+  return h === "localhost" || h.endsWith(".localhost") || h === "::1" || /^127(?:\.\d{1,3}){3}$/.test(h);
 }
+async function allowDevtoolsOrigins(listener, target) {
+  const explicit = process.env.NUXT_DEVTOOLS_ALLOWED_ORIGINS?.split(",").map((value) => value.trim()).filter(Boolean);
+  if (explicit?.length) {
+    target.push(...explicit.filter((origin) => !target.includes(origin)));
+    return target;
+  }
+  if (typeof listener?.getURLs !== "function") return target;
+  let urls;
+  try {
+    urls = await listener.getURLs();
+  } catch {
+    return target;
+  }
+  for (const { url } of urls || []) {
+    try {
+      const { origin, hostname } = new URL(url);
+      if (isLoopbackHost(hostname) || target.includes(origin)) continue;
+      target.push(origin);
+    } catch {}
+  }
+  return target;
+}
 async function enableModule(options, nuxt) {
   if (process.env.TEST || process.env.NODE_ENV === "test" || nuxt.options.test)
     return;
@@ -3511,10 +3537,16 @@
   const clientAssetsSource = isSelfClient ? void 0 : resolveClientAssetsSource();
   const clientUrl = clientAssetsSource ? `${ROUTE_CLIENT}/` : `${nuxt.options.app.baseURL || "/"}/`.replace(MULTIPLE_SLASHES_RE, "/");
   let publicDevServerOrigin;
-  nuxt.hook("listen", (_server, listener) => {
+  const lanAllowedOrigins = [];
+  nuxt.hook("listen", async (_server, listener) => {
     if (listener?.url)
       publicDevServerOrigin = new URL(listener.url).origin;
+    await allowDevtoolsOrigins(listener, lanAllowedOrigins);
+    if (lanAllowedOrigins.length) publicDevServerOrigin = lanAllowedOrigins[0];
   });
+  extendViteConfig((config) => {
+    if (config.server?.allowedHosts === true && !config.server.host) config.server.host = "0.0.0.0";
+  });
   const branding = {
     productName: "Nuxt DevTools",
     tagline: "DevTools for Nuxt",
@@ -3529,9 +3561,10 @@
   if (isGreaterOrEqual(version$1, "8.3.0")) {
     extendViteDevToolsConfig((devtools) => {
       devtools.branding ??= branding;
+      if (lanAllowedOrigins.length) devtools.allowedOrigins = lanAllowedOrigins;
     });
   } else {
-    const DevTools = await import('@vitejs/devtools').then((r) => r.DevTools({ branding }));
+    const DevTools = await import('@vitejs/devtools').then((r) => r.DevTools({ branding, allowedOrigins: lanAllowedOrigins }));
     addVitePlugin(DevTools);
   }
   let connectDevToolsKit;
Lenguaje dominante
TypeScript
Estrellas
3.3k
Forks
218
Merge medio
1 d 4 h
PR fusionados (30 d)
21

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de nuxt/devtools

Todos los issues de nuxt/devtools

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.