Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#536 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@AlemTuzlak ci sta già lavorando.

Dal 2/10/2026.

  • #538 di @AlemTuzlak — aperta

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
76/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript, vite
Ambito
build-system, devtools, networking

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.
Lingua principale
TypeScript
Stelle
503
Fork
102
Merge medio
1g 8h
PR unite (30g)
4

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di TanStack/devtools

Tutte le issue di TanStack/devtools

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.