Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
  • 何か問題がありますか？
#536 コメント 0 件 リアクション 0 件 担当者 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時間
マージ済み PR（30日）
4

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

TanStack/devtools のほかの issue

TanStack/devtools の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。