React.lazy loaded css is erroneously removed from the DOM during navigation

[kirbysayshi]

I'm using React Router as a...

framework

Reproduction

https://stackblitz.com/edit/remix-run-remix-rd4zsmfy?file=app%2Froutes%2F_layout._index.tsx

In the stackblitz:

• pnpm run build && pnpm run start <--- IMPORTANT, must be production build

Then:

• visit /designer, see the big styled "slideshow"
• refresh the page (in the preview, not the entire stackblitz), see the big styled "slideshow"
• click the Play Link, slideshow styles are now gone (unstyled)

They are the same component, referenced in two different ways on different routes. A common use case for this is a Slider component that you might use on a SSR home page but lazy load on another page.

The styles are removed from the DOM and never put back. This is the same issue reported and closed for unknown reasons (that's where I got the stackblitz, but it's been modified to use latest react-router).

Tracing through code (and a nascent understanding of how this all works), what I see happening:

• on /designer, the route manifest has a hard reference to the generated .css file for the Slideshow
• the /play route's manifest data does not
• the generated module itself has a reference to the .css file in vite's preloader:

• during navigation, vite's preloader runs, and checks if the .css has a matching link tag in the DOM. It does!
• navigation continues, and remix's <Links /> element removes link tags that don't match the manifest for the current route. The css is now gone!
• nothing ever puts the CSS back (except visiting /designer)

Additionally, if you do the following, you'll actually see the styles due to a quirk / bug / race condition:

• visit /designer, see the big styled "slideshow"
• refresh the page (in the preview, not the entire stackblitz), see the big styled "slideshow"
• click the Play2 Link, slideshow styles will flicker but remain

This is due to the vite preloader. The /play2 route does:

const [isReady, setIsReady] = useState(false);
useEffect(() => {
  setIsReady(true);
}, []);

return isReady && <LazyLoadedComponent />;

This "works" because the lazy call is not evaluated until isReady is true, meaning after a first render. By this time, remix has already removed the link tag with the relevant CSS, so the preloader doesn't bail and appends the link tag itself: https://github.com/vitejs/vite/blob/2c4a0920ec7730e61508745fb8e4d49fc2945f00/packages/vite/src/node/plugins/importAnalysisBuild.ts#L121. So this is technically a workaround.

Additionally, if you try to instead use <ClientOnly>, the styles will still be missing since internally ClientOnly will execute the lazy() call just like using something else like Suspense. Therefore the vite preloader executes earlier, and sees the link tag before it's been removed by Remix.

I have a hunch that the issue is that remix/rr is not looking at the dynamicImports, and only looks at imports when walking the tree to create the manifest:

react-router/packages/react-router-dev/vite/plugin.ts

Lines 386 to 388 in b8cf1b6

	for (let importKey of chunk.imports) {
	walk(viteManifest[importKey]);
	}

. But I don't know if some other system is meant to manage those dynamicImports.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @react-router/dev: ^7.4.1 => 7.4.1 
    @react-router/fs-routes: ^7.4.1 => 7.4.1 
    @react-router/node: ^7.4.1 => 7.4.1 
    @react-router/serve: ^7.4.1 => 7.4.1 
    react-router: ^7.4.1 => 7.4.1 
    vite: ^5.1.0 => 5.4.16 

Note that this also affects Remix. I've tested v2.10 and v2.16.4

Used Package Manager

pnpm

Expected Behavior

In the stackblitz, visit:

• /designer, see the big styled "slideshow"
• refresh the page, see the big styled "slideshow"
• click the Play Link, see the big styled "slideshow"

Generally: a css file included via a React.lazy(() => import('./path-to-component')) should be included when that component renders.

Actual Behavior

In the stackblitz, visit:

• /designer, see the big styled "slideshow"
• refresh the page, see the big styled "slideshow"
• click the Play Link, slideshow styles are now gone (unstyled)

Generally: a css file included via React.lazy(() => import('./path-to-component')) is missing / removed when that component renders.