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

[markdalgleish]

Fixed by #13872.

[github-actions]

🤖 Hello there,

We just published version 7.7.0-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[idoros]

@markdalgleish @brophdawg11

This seems to resolve the issue in most cases.

However, there's an edge case where it fails and potentially makes things worse: if a hydration error occurs for any reason, the critical CSS is preserved and never removed. :(

[frodi-karlsson]

Perhaps the extra hmr clear removal could be reverted?

[markdalgleish]

@idoros I've got a PR open to fix this, linked above. You can try this out now in this experimental release: 0.0.0-experimental-d4ee0faac — let me know if this fixes it for you.

[idoros]

@markdalgleish looks good 👍