Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

Pre-bundled client ignores the event bus port from devtools-vite

未关闭
  • 哪里不对？
#536 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

@AlemTuzlak 已经在做这个了。

开始于 2026年10月2日。

  • #538 来自 @AlemTuzlak —— 未关闭

评估

难度
3/5
预计耗时
1-2 天
新手友好度
76/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
react, typescript, vite
领域
build-system, devtools, networking

调研方向

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 }} />,
)

  1. Run vite --port 3160. The server bus starts on the configured port:

    🌴 [tanstack-devtools:server-bus]  Listening on http://localhost:4260

  2. 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

  3. 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

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

TanStack/devtools 的其他 Issue

查看 TanStack/devtools 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。