[Bug]: fast refresh causes style flash

[elawad]

Version

System:
  OS: macOS 14.7.7
  CPU: (10) arm64 Apple M1 Pro
  Memory: 83.83 MB / 16.00 GB
  Shell: 5.9 - /bin/zsh
Browsers:
  Chrome: 139.0.7258.67
  Safari: 18.6
  Safari Technology Preview: 18.4
npmPackages:
  @rsbuild/core: 1.4.9 => 1.4.9
  @rsbuild/plugin-react: ^1.3.5 => 1.3.5

Details

Rsbuild 1.4.9 and onward causes style flash during fast refresh / hmr. However, on 1.4.8 changes would not cause a style flash.

See linked CodeSandbox on 1.4.9 with issue. If you revert to 1.4.8, issue no longer occurs.

Reproduce link

https://codesandbox.io/p/devbox/rsbuild-hmr-phmdwv

Reproduce Steps

1. Install @rsbuild/[email protected] and react + plugin
2. Run rsbuild dev
3. Modify App.tsx and observe style flash

Screenshots

1.4.9 always loads index.css on any file change.

1.4.8 does not have this behavior.

[chenjiahan]

Maybe related to: https://github.com/web-infra-dev/rspack/pull/11096

[JSerFeng]

This is not a bug, it's how css extract plugin works, the style flashes to avoid the style updates by splitChunks, css may change even no css modules are modified, this can occur by special splitChunks rules. And webpack's mini-css-extract-plugin behaves the same.

1.4.8 not flash is because it has a bug that initial style can't update, #11072

[elawad]

Thanks for explaining @JSerFeng

I've compared to other HMR like Vite, and they do not have this style flash. But if this is the way it works now, then we'll just need to deal with it.

See how it visually looks like the entire page is loading. Not a seamless HMR. This gets more noticeable in our large work apps.

https://github.com/user-attachments/assets/cf34197a-1f32-4731-b8b7-40892073a077

[chenjiahan]

@JSerFeng I think we need to explore how to optimize the DX here. Also, I found that each HMR will cause index.css to be loaded twice, which seems unusual.

[JSerFeng]

Yes, I've closed this because I think in the future we will refactor the css-extract runtime to built-in css runtime, make them work the same, that should solve the flash here.

[uncaught]

Could you please prioritize this, this is super annoying to work with since 1.4.9. We never had this kind of disruption with any other tooling (gulp, webpack) in the past.

[JSerFeng]

Could you please prioritize this

I would indeed if I got more time, sorry 😢, I can help if anyone is happy to make a PR

[uncaught]

Setting tools.rspack.lazyCompilation = false (rsbuild config) helps a little. It then won't flash you to death when navigating between lazy chunks.

@JSerFeng the types.d.ts says this lazyCompilation should be false by default, but it obviously isn't. Is that another bug? Did this change with 1.4.9, too? Because I don't think we had lazily compiled chunks configured before (we updated resbuild from 1.4.15 to 1.5.3).

[JSerFeng]

the types.d.ts says this lazyCompilation should be false by default, but it obviously isn't. Is that another bug?

It's enabled by default for async chunks in rsbuild. https://rsbuild.rs/config/dev/lazy-compilation#devlazycompilation

[mrleidesen]

same problem in 1.5.16, but 1.4.8 is fine

[mogelbrod]

Also encountered this after upgrading from v1.4 to v1.6 without otherwise modifying the rsbuild/rspack configuration.

Every time a async chunk is requested for the first time index.css is reloaded (removed + re-added?) which causes the app to lose all of its styling.