fix: devtools not working over lan ip when using `--public` flag
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 65/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- node.js, typescript, vite
- Domain
- developer-experience, devtools
Research direction
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.
Written by the indexing model from the issue text.
Description
🐛 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;
- Dominant language
- TypeScript
- Stars
- 3.3k
- Forks
- 218
- Avg merge
- 1d 4h
- Merged PRs (30d)
- 21
Getting set up
- No Dockerfile or Docker Compose file
- No pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from nuxt/devtools
-
fix: Inspect panel styles break when host page sets a custom html font-size (rem-based units)May be free again A pull request for this issue was closed without being merged. Openbug
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
nuxt/devtools#973 · 1 comment ·
Maintainers usually reply within 1 day
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
Maintainers usually reply within 1 day
-
Difficulty 3/5 Half a day Newbie friendliness 42/100
Maintainers usually reply within 1 day
-
bug
Difficulty 3/5 1-2 days Newbie friendliness 65/100
nuxt/devtools#1100 · 2 reactions ·
Maintainers usually reply within 1 day
-
enhancement
Difficulty 5/5 Over a week Newbie friendliness 25/100
Maintainers usually reply within 1 day
Similar issues
-
area:security documentation effort:S priority:P2
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
Maintainers usually reply within 1 day
-
app:web meta:ops
Difficulty 2/5 Half a day Newbie friendliness 78/100
osu-tournament-rating/otr#1113 ·
Maintainers usually reply within 1 day
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
typegoose/mongodb-memory-server#1040 ·
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 92/100