CSS duplication until first HMR request

[idoros]

When using react-router in development mode, it injects a <style> element containing "critical CSS" for SSR. However, this style element is only removed on the first HMR update.

This results in duplicate CSS being visible in the browser’s dev-tools until the first code change occurs. While this is confusing in a starter project, it becomes increasingly problematic in larger projects, making it harder to understand and debug the actual styling.

I'm using React Router as a...

framework

Reproduction

This can be seen in an online project or by simply runnning npm run dev:

1. open dev-tools on page and select the body or other element that has some css selector targeting it
2. see the duplicate css
3. change an inner component that will be catched by the HMR so that it won't trigger a reload
4. see the duplicate css disappear

Initial load

After HMR

System Info

any browser any system

Used Package Manager

npm

Expected Behavior

No duplicate CSS

I wonder if it would be possible to trigger the removal of the SSR-injected styles earlier - maybe after the HydratedRouter renders the page?

Actual Behavior

Critical CSS is present alongside the evaluated code CSS