Route navigation removes CSS files that lazy loaded components are using

[joshuaellis]

Reproduction

Failing test example – https://github.com/joshuaellis/react-router/tree/chore/css-lazy-load-bug
Stack blitz live demo – https://stackblitz.com/~/github.com/joshuaellis/react-router-css-bug?file=app/routes.ts

System Info

System:
    OS: macOS 14.6.1
    CPU: (11) arm64 Apple M3 Pro
    Memory: 199.03 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.19.0 - ~/.nvm/versions/node/v22.19.0/bin/node
    npm: 10.9.3 - ~/.nvm/versions/node/v22.19.0/bin/npm
    pnpm: 9.10.0 - ~/Library/pnpm/pnpm
    bun: 1.2.13 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 140.0.7339.214
    Safari: 17.6
  npmPackages:
    vite: ^6.1.0 => 6.2.5

Used Package Manager

pnpm

Expected Behavior

If a lazy loaded component shares the same CSS chunk as a route when you navigate away from the route the css is removed even if the lazy component still exists thus the component looses it's styles.

e.g. Route A imports component 1 and the layout of the Route A & B imports component 1 in a lazy way when we navigate away from Route A to Route B then the Lazy Component 1 looses it's styles.

Actual Behavior

I would expect the CSS to preserve so Component 1 looks correct.

This does happen if Route A never imports Component 1 and you navigate to Route B.

[joshuaellis]

I expect this is a quirk of react where here

react-router/packages/react-router/lib/dom/ssr/components.tsx

Line 287 in 0e77485

{keyedLinks.map(({ key, link }) =>

We map over the route CSS so that "link" tag belongs to the component not however lazy loading works/injects & so when the lazy component mounts the style tag is deduped(?) by react so we don't double load the styles & thus when the route unmounts and takes it's styles away we're left with a lazy loaded component missing its CSS module.