René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Pre-bundled client ignores the event bus port from devtools-vite","articleBody":"### TanStack Devtools version\n\n@tanstack/react-devtools 0.10.13, @tanstack/devtools-vite 0.8.5\n\n### Framework/Library version\n\nReact 19.3.0, Vite 8.3.1\n\n### Describe the bug and the steps to reproduce it\n\nIn the browser, the event bus client always uses port 4206, even when `devtools-vite` runs the server bus on another port. So `eventBusConfig.port` in `devtools()` has no effect in the browser. The `EADDRINUSE` fallback fails the same way. When another dev server holds 4206, the plugin moves its own bus to a random port. The browser still dials 4206.\n\n**Cause**\n\nThe `@tanstack/devtools:connection-injection` transform replaces `__TANSTACK_DEVTOOLS_PORT__` only in modules whose id contains `@tanstack/devtools` or `@tanstack/event-bus`. Vite pre-bundles `@tanstack/react-devtools` and serves the bus client from a chunk such as `/node_modules/.vite/deps/BRS44MK7-KeTQTbh5.js`. That id matches neither filter, so the placeholder stays, and `getDefaultPort(4206)` returns 4206.\n\nThe examples in this repository link the packages with `workspace:*`, and Vite does not pre-bundle linked packages.\n\n**Reproduction**\n\n`package.json` dependencies:\n\n```json\n\"@tanstack/devtools-vite\": \"0.8.5\",\n\"@tanstack/react-devtools\": \"0.10.13\",\n\"@vitejs/plugin-react\": \"6.1.1\",\n\"react\": \"19.3.0\",\n\"react-dom\": \"19.3.0\",\n\"vite\": \"8.3.1\"\n```\n\n`vite.config.ts`:\n\n```ts\nimport { devtools } from '@tanstack/devtools-vite'\nimport react from '@vitejs/plugin-react'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n  plugins: [devtools({ eventBusConfig: { port: 4260, debug: true } }), react()],\n})\n```\n\n`src/main.tsx`, loaded from a plain `index.html`:\n\n```tsx\nimport { TanStackDevtools } from '@tanstack/react-devtools'\nimport { createRoot } from 'react-dom/client'\n\ncreateRoot(document.getElementById('root')!).render(\n  \u003cTanStackDevtools eventBusConfig={{ connectToServerBus: true, debug: true }} />,\n)\n```\n\n1. Run `vite --port 3160`. The server bus starts on the configured port:\n\n   ```\n   🌴 [tanstack-devtools:server-bus]  Listening on http://localhost:4260\n   ```\n\n2. Open http://localhost:3160/. The client fails to connect, and the server bus logs no client:\n\n   ```\n   [Client] 🌴 [tanstack-devtools:client-bus] Connecting to WebSocket server\n   [Client] 🌴 [tanstack-devtools:client-bus] WebSocket connection error\n   ```\n\n3. Fetch the served chunk that contains the bus client, for example `curl -s 'http://localhost:3160/node_modules/.vite/deps/BRS44MK7-KeTQTbh5.js'`. The placeholder is still there:\n\n   ```js\n   function getDefaultPort(configPort) {\n   \tif (typeof __TANSTACK_DEVTOOLS_PORT__ !== \"undefined\") return __TANSTACK_DEVTOOLS_PORT__;\n   \treturn configPort;\n   }\n   ```\n\nAs a control, add `optimizeDeps: { exclude: ['@tanstack/react-devtools'] }`. The server bus then logs `New WebSocket client connected`, and the client logs `WebSocket connection opened`. This exclusion is not a usable workaround, because it breaks the `dayjs` default import (#423).\n\n**Expected behavior**\n\nThe browser client connects to the port the server bus listens on, including the `EADDRINUSE` fallback port.\n\n**Workaround**\n\nPass the same fixed port to both sides: `devtools({ eventBusConfig: { port } })` and `\u003cTanStackDevtools eventBusConfig={{ port }} />`. This fails again when that port is taken.\n\n**Possible fix**\n\nAlso match ids under `/node_modules/.vite/deps/` in `connection-injection`. The placeholder check already limits the transform to modules that contain the placeholders.\n\n**Environment:** macOS (Darwin 25.6.0), Bun 1.4.2, Node 26.10.0, Chrome.\n\n### Your Minimal, Reproducible Example - (Sandbox Highly Recommended)\n\nThe complete reproduction is inline above: four files and three steps.\n\n### Do you intend to try to help solve this bug with your own PR?\n\nYes, I think I know how to fix it and will discuss it in the comments of this issue\n\n### Terms & Code of Conduct\n\n- [x] I agree to follow this project's Code of Conduct\n- [x] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.\n","author":{"url":"https://github.com/svyatov","@type":"Person","name":"svyatov"},"datePublished":"2026-09-30T21:13:43Z","url":"https://github.com/TanStack/devtools/issues/536"}