BloopAI/vibe-kanban · warning

[Preview] Ignoring dev server URL with same port as Vibe Kan

Error message

[Preview] Ignoring dev server URL with same port as Vibe Kanban (${devServerPort}). This usually means the dev server failed to start or reported the wrong port.

What it means

This warning is logged by the PreviewBrowserContainer when the detected/overridden dev server port equals the port Vibe Kanban's own web UI is served on. Proxying the preview iframe to the app's own port would create an infinite loop (the preview would load Vibe Kanban itself), so the URL is discarded and iframeUrl becomes undefined, leaving the preview blank. It usually indicates the dev server failed to start and a fallback/incorrect port was reported.

Source

Thrown at packages/web-core/src/pages/workspaces/PreviewBrowserContainer.tsx:292

      return undefined;
    }

    // Non-loopback URLs (e.g. Coder port-forwarded URLs like
    // https://4000--workspace--user.coder.example.com) can be loaded
    // directly — subdomain proxy routing only works for localhost.
    if (!isLoopbackPreview) {
      const directUrl = new URL(effectiveParsedUrl.toString());
      directUrl.searchParams.set('_refresh', String(previewRefreshKey));
      return directUrl.toString();
    }

    // Loopback URLs need the preview proxy for origin isolation
    if (!previewProxyPort) return undefined;

    // Don't proxy to Vibe Kanban's own ports (would create infinite loop)
    const vibeKanbanPort = window.location.port || '80';
    if (devServerPort === vibeKanbanPort) {
      console.warn(
        `[Preview] Ignoring dev server URL with same port as Vibe Kanban (${devServerPort}). ` +
          'This usually means the dev server failed to start or reported the wrong port.'
      );
      return undefined;
    }

    // Also check if it's the preview proxy port itself
    if (devServerPort === String(previewProxyPort)) {
      console.warn(
        `[Preview] Ignoring dev server URL with same port as preview proxy (${devServerPort}).`
      );
      return undefined;
    }

    const path = effectiveParsedUrl.pathname + effectiveParsedUrl.search;

    // Subdomain-based routing: the proxy extracts the port from the Host header
    const hostToken =

View on GitHub (pinned to 4deb7eca8f)

Solutions

1. Start/fix the workspace dev server so it binds a real port distinct from the Vibe Kanban frontend port, then refresh the preview.
2. Check the dev server logs in the task attempt output for a startup crash (port already in use, missing dependency) and fix the underlying failure.
3. Set the dev server to a different port (e.g. change its config or FRONTEND_PORT via .env) so the ports no longer collide.
4. Correct or clear the URL entered in the preview address bar if a wrong URL was manually entered.

Example fix

// before (vite.config.ts)
server: { port: 3000 } // same port as Vibe Kanban frontend
// after
server: { port: 5173, strictPort: true }

const vibeKanbanPort = window.location.port || '80';
const port = new URL(devServerUrl).port;
if (port === vibeKanbanPort) {
  console.warn('Dev server URL points at the Vibe Kanban app itself; fix the dev server.');
  return;
}

function isSafePreviewPort(devServerPort: string | undefined): boolean {
  const appPort = window.location.port || '80';
  return !!devServerPort && devServerPort !== appPort;
}

When it happens

Trigger: Computed in the iframeUrl useMemo when isLoopbackPreview is true, previewProxyPort is set, and devServerPort === (window.location.port || '80') — i.e. the dev-server URL's port matches the port the Vibe Kanban UI itself is loaded from.

Common situations: The workspace dev server crashed or never bound its port and auto-detection picked up the app's port; the user manually typed the Vibe Kanban URL into the preview URL override bar; running the dev server with a port equal to FRONTEND_PORT; a dev tool (e.g. vite) defaulting to a port that collides with the app's port.

Related errors

• [Preview] Ignoring dev server URL with same port as preview

AI-assisted analysis of BloopAI/vibe-kanban@4deb7eca8f (2026-08-29). Data as JSON: /api/errors/8c1211d0c0224f22. Report an issue: GitHub.