TanStack / TanStack/router

Start + Rsbuild: shared chunks cause CSS issues in the initial SSR response

Open
#8,415 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
15.1k
Forks
1.9k
Avg merge
1d 20h
Merged PRs (30d)
143

Description

Which project does this relate to?

Start

Describe the bug

We've got an app that is using Tanstack with the native rsbuild support. We have a header control that appears in multiple routes, but not all the routes. We noticed that sometimes this header control has a flash of unstyled content or incorrect styling applied after the SSR pass. On further inspection, it seems that when rsbuild is creating a shared chunk for this shared control, it is incorrectly computing what the relevant css styles are.

I used AI to create a minimal reproduction. In the repro there are /alpha and /beta routes, each importing a simplified version of our header and its own route CSS. A Rspack cache group extracts the shared component into a separate chunk.

When loading the demo app you can see

Directly loading /alpha causes /beta's css to also be loaded in addition to /alphas stylesheets. This alone doesn't cause problems, but it is wasteful so ideally we would avoid that.

Directly loading /beta is missing some critical styles from the shared header control. In this repo, this means header renders as display: block instead of grid, approximately 79px tall instead of 64px.

With JavaScript enabled, the missing stylesheet loads later and causes a layout shift. It's easier to see if you turn off Javascript, the styles just remain incorrect from the SSR response since the client JS never loads that pulls in the right CSS during hydration.

Complete minimal reproducer

https://github.com/christiango/tanstack-rsbuild-css-repro

Steps to Reproduce the Bug
  1. Clone and install:
git clone https://github.com/christiango/tanstack-rsbuild-css-repro.git
cd tanstack-rsbuild-css-repro
pnpm install
pnpm exec playwright install chromium
pnpm repro
  1. Observe two failing browser tests: unrelated CSS on Alpha and missing shared-header CSS on Beta. The home-route control passes.3.
  2. Run pnpm verify:repro. This confirms the expected failures, rebuilds with shared extraction disabled, and verifies that all three browser checks pass. Dynamic route imports remain split.
  3. For manual inspection, run pnpm build, then pnpm start, disable browser JavaScript, and open http://127.0.0.1:4317/beta.
Expected behavior

The initial SSR response should include every stylesheet required by the matched route and its static dependencies, without including any styles from unrelated routes.

Both Alpha and Beta should render the shared header as a 64px grid before hydration. Results should not depend on manifest traversal order.

Screenshots or Videos

No response

Platform

OS: macOS, Apple Silicon
Browser: Chromium supplied by Playwright 1.60.0
Node: 24.15.0; pnpm: 11.25.0
@tanstack/react-start: 1.168.25
@tanstack/react-router: 1.170.15
@tanstack/start-plugin-core: 1.171.17
Bundler: Rsbuild 2.1.11, resolving Rspack 2.1.10 locally
React / React DOM: 19.2.4

Additional context

I asked copilot to make a fix, which I validated with pnpm patches that it does in fact fix the issue, however it is really complex and invasive. https://github.com/christiango/router/tree/fix/rsbuild-ssr-stylesheets-8415 in case that helps the tanstack team find the correct solution

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked minimal reproducer, run pnpm repro, and inspect the SSR stylesheet handling for the /alpha and /beta routes when shared extraction is enabled. Use pnpm verify:repro and the JavaScript-disabled /beta check to confirm the fix: each route should include its matched-route styles and shared header CSS without unrelated route styles or layout shifts.

Written by the indexing model from the issue text.

Assessment

Tech stack
playwright, react, typescript
Domain
build-system, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.