fix(devtools-vite): inject the bus port into pre-bundled dependency chunks by AlemTuzlak · Pull Request #538 · TanStack/devtools

AlemTuzlak · 2026-10-02T13:01:55Z

When Vite pre-bundles @tanstack/react-devtools from npm, the browser event bus client always connects to port 4206. The server bus can use another port (eventBusConfig.port, or a random port after EADDRINUSE), so the client cannot connect. This PR also injects the port, host, and protocol into Vite's pre-bundled chunks under node_modules/.vite/deps*.

🎯 Changes

connection-injection skipped pre-bundled chunks: their ids (for example /node_modules/.vite/deps/BRS44MK7-KeTQTbh5.js) do not contain @tanstack/devtools. As a result, __TANSTACK_DEVTOOLS_PORT__ stayed in the code and getDefaultPort returned 4206.
The filter now also accepts ids that contain /.vite/deps. The placeholder check still limits the transform to modules that contain the placeholders. Other packages stay untouched.
The examples did not show the bug: they link packages with workspace:*, and Vite does not pre-bundle linked packages.

✅ Checklist

I have followed the steps in the Contributing guide.
I have tested code changes locally with pnpm test:pr, or these tests do not apply to this pull request.
I fully understand the code in this pull request, including any code generated with AI assistance.

🚀 Release Impact

This change affects published code, and I have generated a changeset.
This change is docs/CI/dev-only (no release).

Testing

Commands run

vitest run in packages/devtools-vite: 22 tests pass, with a new test for a .vite/deps id.
eslint and tsc in packages/devtools-vite: pass.
I did not run the full pnpm test:pr.

Manual test

Use the reproduction in Pre-bundled client ignores the event bus port from devtools-vite #536: install @tanstack/react-devtools from npm, and set devtools({ eventBusConfig: { port: 4260 } }).
Before this fix: the browser logs WebSocket connection error, and the served .vite/deps chunk still contains __TANSTACK_DEVTOOLS_PORT__.
After this fix: the server bus logs New WebSocket client connected, and the chunk contains 4260.

How this PR makes testing easy

A unit test in packages/devtools-vite/tests/index.test.ts transforms a .vite/deps id and expects the port.

Linked issues

Fixes #536

Risk / rollback

Low. Only modules that contain the devtools placeholders change. To undo, revert this PR.

🤖 Generated with Claude Code

Summary by CodeRabbit

Bug Fixes
- Vite-prebundled dependencies now receive the configured connection details, helping clients connect when the server uses a port other than the default.

…hunks Vite pre-bundles npm installs of @tanstack/react-devtools into chunks under node_modules/.vite/deps. Their ids do not contain "@tanstack/devtools", so connection-injection skipped them and __TANSTACK_DEVTOOLS_PORT__ stayed in the code. The browser then always dialed 4206, also when the server bus moved to another port. The examples link packages with workspace:*, and Vite does not pre-bundle linked packages, so the examples did not show the bug. Fixes #536

coderabbitai · 2026-10-02T13:02:11Z

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: TanStack/devtools/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: cc9c8fc7-1f54-432a-aeae-ec7eed80f6e7

📥 Commits

Reviewing files that changed from the base of the PR and between afa01fe and a2b0718.

📒 Files selected for processing (3)

.changeset/vite-deps-bus-port.md
packages/devtools-vite/src/plugin.ts
packages/devtools-vite/tests/index.test.ts

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 3 remain after this review.

📝 Walkthrough

Walkthrough

The connection-injection transform now processes Vite pre-bundled dependency chunks when they contain a connection placeholder. A test checks port replacement, and a patch changeset records the update.

Changes

Vite Connection Injection

Layer / File(s)	Summary
Pre-bundled dependency connection injection `packages/devtools-vite/src/plugin.ts`, `packages/devtools-vite/tests/index.test.ts`, `.changeset/vite-deps-bus-port.md`	The transform allows IDs containing `/.vite/deps` through its package-ID filter. The test checks that the port placeholder is replaced with `4206`. The changeset records a patch release for `@tanstack/devtools-vite`.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~8 minutes

Change: Bug fix · Severity of issue fixed: Medium

Merge Risk: ⚪ Minimal · up to a2b07

Matching Vite pre-bundled chunks receive the event-bus connection settings, with the client’s existing defaults preserved. No actionable merge-blocking risk remains.

Architecture Summary

Architecture risk: 🔵 Low · up to a2b07

The change affects 1 system.

Changed systems: packages/devtools-vite

Architecture concerns
No architecture-level concerns identified.

Review details

Systems and components

observed — packages/devtools-vite (library) was modified; 2 changed files map to changed impact.

Before / after behavior

observed — Modified behavior in packages/devtools-vite/src/plugin.ts: The connection-injection transform now allows IDs containing /.vite/deps through its package-ID filter. Previously, IDs without either @tanstack/devtools or @tanstack/event-bus were skipped; those IDs are now processed when they contain a placeholder.
observed — Modified behavior in packages/devtools-vite/tests/index.test.ts: Adds a test for transforming a port placeholder in a Vite pre-bundled dependency chunk, expecting the result to be const port = 4206.
observed — Modified behavior in .changeset/vite-deps-bus-port.md: Adds a patch changeset for @tanstack/devtools-vite and a release note describing the event-bus settings injected into Vite pre-bundled dependency chunks and the connection failure when an npm-installed client uses the default port 4206 while the server uses another port.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: injecting the bus port into Vite pre-bundled dependency chunks.
Description check	✅ Passed	The description explains the bug, the implementation, testing results, manual validation, release impact, linked issue, and rollback risk. It leaves the full pnpm test:pr checklist item unchecked but …
Linked Issues check	✅ Passed	Issue [`#536`] requires the browser event-bus client to use the server bus port, including a fallback port. The PR extends `connection-injection` to Vite pre-bundled IDs under `/.vite/deps` while retain…
Out of Scope Changes check	✅ Passed	The changeset, the `connection-injection` filter update, and the focused test all support issue [`#536`]. No unrelated product behavior or unrelated files appear in the supplied whole-PR summary.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2…

✨ Finishing Touches

📝 Generate docstrings

Commit to this branch
Create a new PR

🧪 Generate unit tests (beta)

Commit to this branch
Create a new PR

Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Autopilot is currently an internal CodeRabbit preview.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

nx-cloud · 2026-10-02T13:02:37Z

View your CI Pipeline Execution ↗ for commit a2b0718

Command	Status	Duration	Result
`nx run-many --targets=build --exclude=examples/...`	✅ Succeeded	4s	View ↗

☁️ Nx Cloud last updated this comment at 2026-10-02 13:02:36 UTC

nx-cloud · 2026-10-02T13:02:38Z

View your CI Pipeline Execution ↗ for commit a2b0718

Command	Status	Duration	Result
`nx run-many --target=test:e2e --parallel=1 --pr...`	✅ Succeeded	1m 15s	View ↗
`nx affected --targets=test:eslint,test:sherif,t...`	✅ Succeeded	40s	View ↗
`nx run-many --targets=build --exclude=examples/...`	✅ Succeeded	4s	View ↗

☁️ Nx Cloud last updated this comment at 2026-10-02 13:04:21 UTC

pkg-pr-new · 2026-10-02T13:02:59Z

More templates

@tanstack/angular-devtools

npm i https://pkg.pr.new/@tanstack/angular-devtools@538

@tanstack/devtools

npm i https://pkg.pr.new/@tanstack/devtools@538

@tanstack/devtools-a11y

npm i https://pkg.pr.new/@tanstack/devtools-a11y@538

@tanstack/devtools-bundler-core

npm i https://pkg.pr.new/@tanstack/devtools-bundler-core@538

@tanstack/devtools-client

npm i https://pkg.pr.new/@tanstack/devtools-client@538

@tanstack/devtools-rspack

npm i https://pkg.pr.new/@tanstack/devtools-rspack@538

@tanstack/devtools-ui

npm i https://pkg.pr.new/@tanstack/devtools-ui@538

@tanstack/devtools-utils

npm i https://pkg.pr.new/@tanstack/devtools-utils@538

@tanstack/devtools-vite

npm i https://pkg.pr.new/@tanstack/devtools-vite@538

@tanstack/devtools-webmcp

npm i https://pkg.pr.new/@tanstack/devtools-webmcp@538

@tanstack/devtools-event-bus

npm i https://pkg.pr.new/@tanstack/devtools-event-bus@538

@tanstack/devtools-event-client

npm i https://pkg.pr.new/@tanstack/devtools-event-client@538

@tanstack/preact-devtools

npm i https://pkg.pr.new/@tanstack/preact-devtools@538

@tanstack/react-devtools

npm i https://pkg.pr.new/@tanstack/react-devtools@538

@tanstack/solid-devtools

npm i https://pkg.pr.new/@tanstack/solid-devtools@538

@tanstack/svelte-devtools

npm i https://pkg.pr.new/@tanstack/svelte-devtools@538

@tanstack/vue-devtools

npm i https://pkg.pr.new/@tanstack/vue-devtools@538

commit: a2b0718

Navigation Menu

Uh oh!

fix(devtools-vite): inject the bus port into pre-bundled dependency chunks - #538

fix(devtools-vite): inject the bus port into pre-bundled dependency chunks#538
AlemTuzlak wants to merge 1 commit into
mainfrom
fix/536-prebundled-bus-port

AlemTuzlak commented Oct 2, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Oct 2, 2026 •

edited

Loading

Walkthrough

Changes

Uh oh!

nx-cloud Bot commented Oct 2, 2026

Uh oh!

nx-cloud Bot commented Oct 2, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Oct 2, 2026

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

AlemTuzlak commented Oct 2, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

🚀 Release Impact

Testing

Linked issues

Risk / rollback

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Oct 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Architecture Summary

Uh oh!

nx-cloud Bot commented Oct 2, 2026

Uh oh!

nx-cloud Bot commented Oct 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented Oct 2, 2026

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

AlemTuzlak commented Oct 2, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Oct 2, 2026 •

edited

Loading

nx-cloud Bot commented Oct 2, 2026 •

edited

Loading