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(router-plugin): omit browser warnings from production bundles - #8269
webpack build with NODE_ENV unset ships the code splitter's development warning in the client bundle. It's a top-level console.warn("[tanstack-router] These exports from \"/abs/path/src/routes/x.tsx\" will not be code-split …"). It runs on every page load and leaks the absolute path of the route file on the build machine.
It happens when a route exports a component that would otherwise be split, and another option of that route is still split. It happens with the repo's webpack example and with the config in docs/router/installation/with-webpack.md.
Cause: the compiler read process.env.NODE_ENV at compile time to decide whether to inject the warning. webpack-cli sets NODE_ENV only with --node-env, and webpack only defines it inside the bundle. The Rspack and webpack Node APIs don't set it either. Vite, Rsbuild and the Rspack CLI set NODE_ENV=production before building, so their CLI builds were clean.
Fix
The code splitter already knows the bundler's mode (isProduction), and it now passes it to the compiler. The compiler injects the warning only when it isn't production. The NODE_ENV read is gone: the plugin always passes the flag, so a NODE_ENV fallback could only be reached by direct test calls.
webpack and Rspack: a config without mode counts as production. Both bundlers apply the plugins before they fill in defaults, so compiler.options.mode is still undefined at that point. Then they build in production (mode || 'production', and webpack prints "webpack will fallback to 'production'"). Before this change, a config without mode also got route HMR and the React Refresh transforms. In a production build those are dead code.
The warning still prints in the build output. Development builds still log it in the page.
Scope: @tanstack/router-plugin only. Vite builds already decide by command === 'build'. The one visible change there is that NODE_ENV=development vite build no longer injects the warning. esbuild has no mode and is unchanged.
Tests
packages/router-plugin/tests/production-warnings.test.ts runs real webpack and Rspack builds through the public tanstackRouter plugin, following source-maps.test.ts. The app has a route that exports its component and splits its errorComponent. It builds with mode: 'production' and with mode left out. The checks:
the error component is split;
the exported component is either split or reported by the build, so the scenario really triggers;
no emitted JS contains the app's absolute path.
Vitest sets NODE_ENV=test, which behaves like an unset NODE_ENV here.
On main, all 4 cases fail.
With only the isProduction pass-through, the 2 "mode left out" cases fail.
With the full change, all 4 pass.
These replace the fake-compiler matrix that the first version added to router-plugin-context.test.ts.
examples/react/quickstart-webpack-file-based, built with webpack 5.97.1 and webpack-cli 5.1.4, NODE_ENV unset (env -i), with an extra route that exports its component:
#8817 deletes compilers.ts and router-code-splitter-plugin.ts. Merging #8817 on top of this PR gives 2 new conflicts, both modify/delete on those files. The resolution is to take #8817's deletion. The changeset and the new test merge cleanly.
On #8817's head, the new test passes for mode: 'production'. It fails for mode left out: #8817's webpack/Rspack host treats a missing mode as dev, so its production bundle ships $$tsrRefreshId strings with absolute paths. A one-line change in #8817's src/hosts/webpack.ts makes all 4 cases pass: (compiler.options.mode ?? 'production') === 'production'. This was tried locally and not pushed.
Credits
Original fix and analysis by LadyBluenotes (a1014f5015). The follow-up commits merge main, remove the NODE_ENV fallback, rewrite the changeset, and replace the test with real builds.
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
No actionable comments were generated in the recent review.
Walkthrough
The router plugin now passes bundler production mode to code-split compilation. Browser warning injection uses this mode to determine whether warning code appears. Tests cover webpack, rspack, and Vite across mode and NODE_ENV configurations.
Changes: Code-splitting warning behavior
Layer / File(s)
Summary
Production mode propagation and warning compilation packages/router-plugin/src/core/code-splitter/compilers.ts, packages/router-plugin/src/core/router-code-splitter-plugin.ts, packages/router-plugin/tests/router-plugin-context.test.ts, .changeset/calm-tables-warn.md
compileCodeSplitReferenceRoute accepts isProduction. Webpack and rspack integrations treat an omitted compiler mode as production and pass the flag to the compiler. Tests check browser warning output for webpack, rspack, and Vite across mode and NODE_ENV combinations. The changeset records a patch release.
No actionable issue is established from the supplied evidence; the change is mergeable after normal checks.
Pre-merge checks: 4
Check name
Status
Explanation
Title check
The title clearly identifies the main change: removing browser warnings from production bundles in the router plugin.
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.
Description check
The description is complete and relevant. It explains the bug, cause, fix, scope, tests, validation results, release impact, and credits. It also includes all required checklist sections and a generat…
Full details: Description check
Explanation
The description is complete and relevant. It explains the bug, cause, fix, scope, tests, validation results, release impact, and credits. It also includes all required checklist sections and a generated changeset.
Finishing Touches
Generate docstrings
- [ ] Create stacked PR
- [ ] Commit on current branch
🧪 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.
Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 8 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.
…the page
The code splitter always passes isProduction, so the NODE_ENV fallback in the compiler was reachable only from direct test calls. The changeset now names the bug users see.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…o splitter warning
Builds an app whose route exports its component, with mode 'production' and with mode left out, and checks that no emitted JS names the app's absolute path. Fails on main. Replaces the fake-compiler matrix in router-plugin-context.test.ts.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Through the compiler-test-utils harness, failing on #8817 (f90a6e5):
- Rsbuild dev compresses responses when the app leaves server.compress
unset (#8863).
- A Vite root given relative or through a symbolic link misses a Start
library hoisted above the app: its server fn runs uncompiled in SSR
(#8866).
- An Rsbuild root of '.' fails the build (#8868).
- A webpack or Rspack configuration without mode builds the client with
route HMR code ($$tsrRefreshId with absolute paths) (#8269).
The Start build harness gains an app inside a temporary monorepo
(workspace) and the bundler root as the app configures it (root).
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
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>
…ilds for production
The plugin reads `compiler.options.mode` when it is applied, before
webpack and Rspack fill in their default (`production`): a configuration
without `mode` compiled in dev mode, and the client bundle shipped route
HMR code with the route files' absolute paths. Treat a missing mode as
production, as main does (#8269).
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
… map-name checks
The slice has no test for two behaviours main guards: a webpack or Rspack
production build whose configuration has no `mode` ships no splitter
warning (#8269), and on webpack and Rspack the maps of a split component
and of shared code name the route file, not the `?tsr-split` id (#8860).
Keep those cases of main's tests, cut to what the slice does not cover:
the `mode: 'production'` rows, the line mapping and Vite's dev server are
asserted in the integration tests.
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.
🎯 Changes
The bug
webpack buildwithNODE_ENVunset ships the code splitter's development warning in the client bundle. It's a top-levelconsole.warn("[tanstack-router] These exports from \"/abs/path/src/routes/x.tsx\" will not be code-split …"). It runs on every page load and leaks the absolute path of the route file on the build machine.It happens when a route exports a component that would otherwise be split, and another option of that route is still split. It happens with the repo's webpack example and with the config in
docs/router/installation/with-webpack.md.Cause: the compiler read
process.env.NODE_ENVat compile time to decide whether to inject the warning. webpack-cli setsNODE_ENVonly with--node-env, and webpack only defines it inside the bundle. The Rspack and webpack Node APIs don't set it either. Vite, Rsbuild and the Rspack CLI setNODE_ENV=productionbefore building, so their CLI builds were clean.Fix
isProduction), and it now passes it to the compiler. The compiler injects the warning only when it isn't production. TheNODE_ENVread is gone: the plugin always passes the flag, so aNODE_ENVfallback could only be reached by direct test calls.modecounts as production. Both bundlers apply the plugins before they fill in defaults, socompiler.options.modeis stillundefinedat that point. Then they build in production (mode || 'production', and webpack prints "webpack will fallback to 'production'"). Before this change, a config withoutmodealso got route HMR and the React Refresh transforms. In a production build those are dead code.Scope:
@tanstack/router-pluginonly. Vite builds already decide bycommand === 'build'. The one visible change there is thatNODE_ENV=development vite buildno longer injects the warning. esbuild has no mode and is unchanged.Tests
packages/router-plugin/tests/production-warnings.test.tsruns real webpack and Rspack builds through the publictanstackRouterplugin, followingsource-maps.test.ts. The app has a route that exports its component and splits itserrorComponent. It builds withmode: 'production'and withmodeleft out. The checks:Vitest sets
NODE_ENV=test, which behaves like an unsetNODE_ENVhere.main, all 4 cases fail.isProductionpass-through, the 2 "mode left out" cases fail.These replace the fake-compiler matrix that the first version added to
router-plugin-context.test.ts.Validation
pnpm format.Nx,
@tanstack/router-plugin:test:unit,test:types,test:eslint,test:buildpass. Nx,@tanstack/start-plugin-core:test:unitpasses.examples/react/quickstart-webpack-file-based, built with webpack 5.97.1 and webpack-cli 5.1.4,NODE_ENVunset (env -i), with an extra route that exports its component:webpack build(example config,mode: 'production')mode--mode production--mode development(control)Bundle size: all 18 scenarios are unchanged (gzip, raw and brotli all +0) against
mainat01fab5a6c8.Relation to #8817
#8817 deletes
compilers.tsandrouter-code-splitter-plugin.ts. Merging #8817 on top of this PR gives 2 new conflicts, both modify/delete on those files. The resolution is to take #8817's deletion. The changeset and the new test merge cleanly.On #8817's head, the new test passes for
mode: 'production'. It fails formodeleft out: #8817's webpack/Rspack host treats a missingmodeas dev, so its production bundle ships$$tsrRefreshIdstrings with absolute paths. A one-line change in #8817'ssrc/hosts/webpack.tsmakes all 4 cases pass:(compiler.options.mode ?? 'production') === 'production'. This was tried locally and not pushed.Credits
Original fix and analysis by LadyBluenotes (
a1014f5015). The follow-up commits mergemain, remove theNODE_ENVfallback, rewrite the changeset, and replace the test with real builds.✅ Checklist
🚀 Release Impact
🤖 Generated with Claude Code