Pre-bundled client ignores the event bus port from devtools-vite
評估
- 難度
- 3/5
- 預估耗時
- 1-2 天
- 新手友好度
- 76/100
- Issue 類型
- 缺陷
- 描述清晰度
- 描述清楚
- 活躍度
- 活躍
- 技術堆疊
- react, typescript, vite
研究方向
Start with the connection-injection transform, using the vite.config.ts and src/main.tsx reproduction described in the issue. Run the Vite app with a non-default event bus port and inspect the served /node_modules/.vite/deps chunk; done means the pre-bundled client uses the configured or fallback port and connects to the server bus.
由索引模型根據 Issue 內容生成。
描述
TanStack Devtools version
@tanstack/react-devtools 0.10.13, @tanstack/devtools-vite 0.8.5
Framework/Library version
React 19.3.0, Vite 8.3.1
Describe the bug and the steps to reproduce it
In 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.
Cause
The @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.
The examples in this repository link the packages with workspace:*, and Vite does not pre-bundle linked packages.
Reproduction
package.json dependencies:
"@tanstack/devtools-vite": "0.8.5",
"@tanstack/react-devtools": "0.10.13",
"@vitejs/plugin-react": "6.1.1",
"react": "19.3.0",
"react-dom": "19.3.0",
"vite": "8.3.1"
vite.config.ts:
import { devtools } from '@tanstack/devtools-vite'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [devtools({ eventBusConfig: { port: 4260, debug: true } }), react()],
})
src/main.tsx, loaded from a plain index.html:
import { TanStackDevtools } from '@tanstack/react-devtools'
import { createRoot } from 'react-dom/client'
createRoot(document.getElementById('root')!).render(
<TanStackDevtools eventBusConfig={{ connectToServerBus: true, debug: true }} />,
)
-
Run
vite --port 3160. The server bus starts on the configured port:🌴 [tanstack-devtools:server-bus] Listening on http://localhost:4260 -
Open http://localhost:3160/. The client fails to connect, and the server bus logs no client:
[Client] 🌴 [tanstack-devtools:client-bus] Connecting to WebSocket server [Client] 🌴 [tanstack-devtools:client-bus] WebSocket connection error -
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:function getDefaultPort(configPort) { if (typeof __TANSTACK_DEVTOOLS_PORT__ !== "undefined") return __TANSTACK_DEVTOOLS_PORT__; return configPort; }
As 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).
Expected behavior
The browser client connects to the port the server bus listens on, including the EADDRINUSE fallback port.
Workaround
Pass the same fixed port to both sides: devtools({ eventBusConfig: { port } }) and <TanStackDevtools eventBusConfig={{ port }} />. This fails again when that port is taken.
Possible fix
Also match ids under /node_modules/.vite/deps/ in connection-injection. The placeholder check already limits the transform to modules that contain the placeholders.
Environment: macOS (Darwin 25.6.0), Bun 1.4.2, Node 26.10.0, Chrome.
Your Minimal, Reproducible Example - (Sandbox Highly Recommended)
The complete reproduction is inline above: four files and three steps.
Do you intend to try to help solve this bug with your own PR?
Yes, I think I know how to fix it and will discuss it in the comments of this issue
Terms & Code of Conduct
- I agree to follow this project's Code of Conduct
- 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.
- 主要語言
- TypeScript
- 星號
- 501
- 分支
- 101
- 平均合併
- 1 天 8 小時
- 30 天內合併 PR
- 4
環境準備
- 沒有 Dockerfile 或 Docker Compose 檔案
- 有 Pull Request 範本
- 閱讀貢獻指南
從這裡開始
- 先讀完整個 Issue，再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫，在一個分支上完成修改。
- 送出 Pull Request，並在描述裡引用這個 Issue 編號。
TanStack/devtools 的其他 Issue
-
`intent` bin conflicts with @tanstack/intent and imports removed subpath可能已有人在做 @AlemTuzlak 於 2 天前認領。 未關閉
難度 2/5 1-3 小時 新手友好度 78/100
-
devtools-ui 0.7.0 breaks SSR boot with solid-js <=1.9.12: `use` is not exported by solid-js/web server build可能已有人在做 @AlemTuzlak 於 2 天前認領。 未關閉
難度 2/5 1-3 小時 新手友好度 75/100
-
data-tsd-source inject-source plugin causes hydration mismatch in SSR (TanStack Start)可能已有人在做 @AlemTuzlak 於 2 天前認領。 未關閉
難度 2/5 1-3 小時 新手友好度 78/100
-
難度 2/5 1-3 小時 新手友好度 52/100
-
Devtools breaks react-resizable-panels cursor after remount可能已有人在做 關聯的 PR 仍在進行中或已合併。 未關閉
難度 4/5 3-5 天 新手友好度 45/100
查看 TanStack/devtools 的全部 Issue
相似的 Issue
-
難度 2/5 1-3 小時 新手友好度 78/100
prime-radiant-inc/evener#3726 ·
維護者通常 1 天內回覆
-
難度 2/5 1-3 小時 新手友好度 68/100
FuRongJun-1999/dsh-memory#56 ·
維護者通常 1 天內回覆
-
bug via-triage
難度 2/5 1-3 小時 新手友好度 84/100
pingdotgg/t3code#15682 · 1 則留言 ·
維護者通常 1 天內回覆
-
難度 2/5 1-3 小時 新手友好度 72/100
openwatersio/slackwater.xyz#152 ·
維護者通常 1 天內回覆
-
bug
難度 2/5 1-3 小時 新手友好度 82/100
OpenListTeam/OpenList-Worker#103 ·
維護者通常 1 天內回覆