You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
fix(vue-start): pre-bundle @tanstack/vue-store so a cold dev start doesn't reload the page - #8869
Vue Start excludes @tanstack/vue-router from Vite's dependency optimization, so the scanner never sees the router's @tanstack/vue-store import. The first page load on a cold dependency cache discovers it late. It imports vue, so Vite re-chunks the already optimized vue, logs optimized dependencies changed. reloading, and reloads the page. That happens on every cold start.
The fix declares @tanstack/vue-router > @tanstack/vue-store in optimizeDeps.include, as React Start does for @tanstack/react-store. The change comes from #8817 (packages/vue-start/src/plugin/vite.ts). It's only the Vue half of #8817's cold-start fix. The other half, Start no longer pre-bundling @tanstack/<framework>-router/hmr, concerns a subpath that only exists in #8817.
Evidence (no automated test on main)
The behaviour depends on Vite's optimizer state: a cold node_modules/.vite, a real browser crawling the module graph, and a count of document loads. main has no harness for that:
start-plugin-core's start-app.ts doesn't drive a browser;
the e2e/vue-start apps run with whatever cache the previous run left, and their first test would carry the assertion, so it would depend on test order.
A unit test checking that the config contains the string would only restate the change. #8817 tests the behaviour in start-plugin-core/tests/integration/start-dev-cold-start.test.ts ("vue: the page hydrates in the document it first loaded"), on its own browser and dev-server harness. That stays the single test.
Manual check on e2e/vue-start/basic, with vite dev on an empty node_modules/.vite each time. A Playwright script opens / and counts load events until 8 s pass without one:
dependencies optimized: cookie-es, seroval-plugins/web, no reload (3/3)
page loads
2, 1, 2
1, 1, 1
In the main run with a single load, the reload was announced before the page's HMR client connected. cookie-es and seroval-plugins/web are still discovered late, but they don't re-chunk anything, so no reload.
Validation
Run locally with Node 26.12.1, a frozen install, through Nx:
pnpm format;
vue-start: test:build passes (it's the package's only test target);
tanstack-vue-start-e2e-dev-ssr-styles:test:e2e (vite dev, normal and bundled dev) passes;
bundle size: not run. optimizeDeps applies only to the dev server.
from .changeset/dev-cold-start-and-invalidate-index.md: the sentence "Vue Start declares @tanstack/vue-router > @tanstack/vue-store for the optimizer, … so a cold start no longer reloads the page once.", and the '@tanstack/vue-start': patch line, since nothing else in that changeset concerns vue-start;
from its description: "Vue Start dev no longer reloads after dependency optimization."
Its start-dev-cold-start.test.ts stays: it's the only test, and it also covers the /hmr half.
On a cold dependency cache, the first page load no longer re-optimizes Vue dependencies and reloads the page. Vue Start now pre-bundles the relevant Vue Router and Vue Store dependencies when client-side optimization is enabled, or when server-side optimization is opted into. This makes the initial page load more stable in those configurations.
…esn't reload
Vue Start excludes `@tanstack/vue-router` from optimization, so Vite's
scanner never sees its `@tanstack/vue-store` import. Discovered while the
first page loads, it imports `vue` and re-chunks the already optimized
`vue`: Vite logs "optimized dependencies changed. reloading" and reloads
the page on every cold start. Declare it through `optimizeDeps.include`,
as React Start does for `@tanstack/react-store`.
From #8817.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
No actionable comments were generated in the recent review.
Walkthrough
Vue Start now includes @tanstack/vue-router > @tanstack/vue-store in Vite dependency optimization for the client or an opted-in server environment. A patch changeset records the update and its stated effect on cold-cache first page loads.
Changes: Vue Store Pre-bundling
Layer / File(s)
Summary
Dependency optimization and release note packages/vue-start/src/plugin/vite.ts, .changeset/vue-start-prebundle-vue-store.md
Vite includes @tanstack/vue-router > @tanstack/vue-store in dependency optimization under the existing environment condition. The changeset records a patch release and the stated cold-cache effect.
No merge-blocking defect was identified in this dependency optimization change.
Pre-merge checks: 5
Check name
Status
Explanation
Title check
The title names the fix (pre-bundling @tanstack/vue-store in vue-start) and the symptom it addresses (a cold dev start reloading the page). This matches the changeset and the code change, which adds @…
Description check
The description follows the template structure. It has a detailed What section explaining the cause and fix, and it gives evidence through a manual before-and-after table and validation steps. It disc…
Docstring Coverage
No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…
Linked Issues check
Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check
Check skipped because no linked issues were found for this pull request.
Full details: Title check
Explanation
The title names the fix (pre-bundling @tanstack/vue-store in vue-start) and the symptom it addresses (a cold dev start reloading the page). This matches the changeset and the code change, which adds @tanstack/vue-router > @tanstack/vue-store to optimizeDeps.include in packages/vue-start/src/plugin/vite.ts. The title is specific and relevant, though it is slightly long at 90 characters.
Full details: Description check
Explanation
The description follows the template structure. It has a detailed What section explaining the cause and fix, and it gives evidence through a manual before-and-after table and validation steps. It discloses no AI authorship. It does state 'Generated with Claude Code' in the footer, which covers the AI-authorship disclosure rule. The Checklist and Release Impact sections are not filled in: no boxes are ticked, and it does not say whether a changeset was generated, although the raw summary shows a changeset was added. The description also does not explicitly tick the contributing guide or local testing items. These are minor gaps, and the core content is complete.
Resolution
Tick the checklist items the author has completed, including the contributing guide and local testing items. In Release Impact, tick the box for a published change with a generated changeset, since .changeset/vue-start-prebundle-vue-store.md is included in the PR.
Full details: Docstring Coverage
Explanation
No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 0 functions across 1 files. (1 skipped: 1 unsupported.)
Finishing Touches
Generate docstrings
Commit to this branch
Create a new PR
Generate unit tests (beta)
Commit to this branch
Create a new PR
Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
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.
Reviewing files that changed from the base of the PR and between 1ba19a0 and 1ec10c7.
Files selected for processing: 2
.changeset/vue-start-prebundle-vue-store.md
packages/vue-start/src/plugin/vite.ts
Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 5 remain after this review.
System calls cannot be simulated consistently and are left out of the measure. The reported value understates the real cost. Switch to the Walltime instrument to measure them.
⚠️2 benchmarks with a significant change ran on different hardware
Their base and head results were measured on machines with a different CPU, core count or memory, so the changes might not come from the code. Run base and head on the same runner type.
main c156097: #8858, #8863, #8805, #8269, #8866, #8867, #8868, #8869,
#8870, #8871, #8876, #8888, #8889, #8890, #8892, Version Packages
(#8854, #8891) and docs.
- #8817's side and deletions throughout (Babel compilers, start-compiler,
add-hmr, start-app.ts, server-fn-id-check.ts, router-utils ast.ts).
The lines main changed for #8863, #8866, #8868, #8269 and #8889/#8892
stay #8817's here: their fixes follow as separate commits after the
tests that reproduce them.
- @rsbuild/core 2.3.1 (#8890) in the catalog, the examples and
benchmarks/compiler-perf; Start's peers keep #8817's ^2.2.13 floor.
Lockfile and e2e/react-start/basic's route tree regenerated.
- Tests: main's start-vite-root, start-rsbuild-root, rsbuild
server-compress and router-plugin production-warnings tests are
replaced by their ports in the harness (start-build-roots,
dev-server-config, production-bundle); main's start-dev-restart test
is ported to the dev-server harness and replaces resolve-entries.test.ts
(internals). #8817's Rsbuild SPA dev case gives way to main's
spa-shell e2e. The route HMR `hot` binding test gains main's unsplit
case (#8870).
- KNOWN-BUGS: main fixed decorators after `export` (#8867) and the
Rsbuild sibling-route manifest (#8780, #8876).
- Changesets: drop what main ships now (custom server-fn ids, the Rsbuild
manifest and SPA/compress items, exsolve, Vue store pre-bundling,
falsy `use` entries, `.ts` route HMR).
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Vue Start excludes
@tanstack/vue-routerfrom Vite's dependency optimization, so the scanner never sees the router's@tanstack/vue-storeimport. The first page load on a cold dependency cache discovers it late. It importsvue, so Vite re-chunks the already optimizedvue, logsoptimized dependencies changed. reloading, and reloads the page. That happens on every cold start.The fix declares
@tanstack/vue-router > @tanstack/vue-storeinoptimizeDeps.include, as React Start does for@tanstack/react-store. The change comes from #8817 (packages/vue-start/src/plugin/vite.ts). It's only the Vue half of #8817's cold-start fix. The other half, Start no longer pre-bundling@tanstack/<framework>-router/hmr, concerns a subpath that only exists in #8817.Evidence (no automated test on main)
The behaviour depends on Vite's optimizer state: a cold
node_modules/.vite, a real browser crawling the module graph, and a count of document loads. main has no harness for that:start-plugin-core'sstart-app.tsdoesn't drive a browser;e2e/vue-startapps run with whatever cache the previous run left, and their first test would carry the assertion, so it would depend on test order.A unit test checking that the config contains the string would only restate the change. #8817 tests the behaviour in
start-plugin-core/tests/integration/start-dev-cold-start.test.ts("vue: the page hydrates in the document it first loaded"), on its own browser and dev-server harness. That stays the single test.Manual check on
e2e/vue-start/basic, withvite devon an emptynode_modules/.viteeach time. A Playwright script opens/and countsloadevents until 8 s pass without one:dependencies optimized: @tanstack/vue-store, cookie-es, seroval-plugins/web, thenoptimized dependencies changed. reloading(3/3)dependencies optimized: cookie-es, seroval-plugins/web, no reload (3/3)In the main run with a single load, the reload was announced before the page's HMR client connected.
cookie-esandseroval-plugins/webare still discovered late, but they don't re-chunk anything, so no reload.Validation
Run locally with Node 26.12.1, a frozen install, through Nx:
pnpm format;test:buildpasses (it's the package's only test target);tanstack-vue-start-e2e-dev-ssr-styles:test:e2e(vite dev, normal and bundled dev) passes;optimizeDepsapplies only to the dev server.Merging into #8817
Merging this branch into #8817's head adds no conflicts to the ones main already has:
vue-start/src/plugin/vite.tsmerges to #8817's exact text.After that, #8817 should drop:
.changeset/dev-cold-start-and-invalidate-index.md: the sentence "Vue Start declares@tanstack/vue-router > @tanstack/vue-storefor the optimizer, … so a cold start no longer reloads the page once.", and the'@tanstack/vue-start': patchline, since nothing else in that changeset concerns vue-start;Its
start-dev-cold-start.test.tsstays: it's the only test, and it also covers the/hmrhalf.🤖 Generated with Claude Code
Summary by CodeRabbit