Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#536 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@AlemTuzlak ya está trabajando en esto.

Desde el 2/10/2026.

  • #538 de @AlemTuzlak — abierto

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
76/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript, vite
Área
build-system, devtools, networking

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.
Lenguaje dominante
TypeScript
Estrellas
501
Forks
101
Merge medio
1 d 8 h
PR fusionados (30 d)
4

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TanStack/devtools

Todos los issues de TanStack/devtools

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.