System Info
- Rsbuild: 2.1.13 (also broken on 2.0.15, 2.1.9, 2.2.0-beta.2)
- Rspack: 2.1.10 (also broken on 2.0.8, 2.1.7, 2.2.0-rc.0)
- Browser: Chrome (any)
- OS: macOS
Details
When output.injectStyles: true (Rsbuild inlines CSS via style-loader), editing a CSS file in dev triggers an HMR hot-update whose module map is empty — the changed css module is missing from the update, so the style-loader module.hot.accept handler never fires and the injected <style> element never changes. No error is logged and no full reload happens; styles silently stay stale.
Reproduce link
https://github.com/chenhuang444/injectstyles-hmr-repo
Reproduce Steps
npm install && npm run dev → http://localhost:4099
- DevTools → Elements: a
<style> tag contains @font-face { font-family: ReproFont; ... } and .probe { font-family: ReproFont; ... }
- Edit
src/style.css (append any rule)
- The browser fetches
index.<hash>.hot-update.json and index.<hash>.hot-update.js (HMR client is connected), but the <style> element is unchanged — the new CSS never applies.
Expected Behavior
The changed css module appears in the hot-update module map so style-loader can apply the new content — exactly like JS modules: editing src/index.js produces a hot-update whose module map contains ./src/index.js and HMR works.
Actual Behavior
hot-update manifest after editing the css:
{"c":["index"],"r":[],"m":[]}
hot-update chunk registers chunk index with an empty module map:
self["rspackHotUpdatersbuild_minimal"]("index", {}, function(__webpack_require__) {
__webpack_require__.h = () => ("<new-hash>");
});
The css module (src/style.css) is omitted from the update entirely, so style-loader's update(content) is never called.
Version matrix (all affected)
| rsbuild |
rspack |
result |
| 2.0.15 |
2.0.8 |
empty update, CSS never applies |
| 2.1.9 |
2.1.7 |
empty update, CSS never applies |
| 2.1.13 |
2.1.10 |
empty update, CSS never applies |
| 2.2.0-beta.2 |
2.2.0-rc.0 |
empty update, CSS never applies |
With injectStyles: false (default extract mode) the same project uses the css-extract runtime protocol ([HMR] Reload all CSS) and CSS HMR works.
Context
output.injectStyles is a commonly suggested workaround for CSS HMR problems in micro-frontend setups (micro-app / qiankun), where the css-extract <link> protocol collides with the framework's style rewriting. This repro shows the workaround itself is broken: with injectStyles the css modules are plain JS modules handled by style-loader's HMR, and they depend on being delivered through the normal hot-update module map — which Rspack leaves empty for css changes.
System Info
Details
When
output.injectStyles: true(Rsbuild inlines CSS via style-loader), editing a CSS file in dev triggers an HMR hot-update whose module map is empty — the changed css module is missing from the update, so the style-loadermodule.hot.accepthandler never fires and the injected<style>element never changes. No error is logged and no full reload happens; styles silently stay stale.Reproduce link
https://github.com/chenhuang444/injectstyles-hmr-repo
Reproduce Steps
npm install && npm run dev→ http://localhost:4099<style>tag contains@font-face { font-family: ReproFont; ... }and.probe { font-family: ReproFont; ... }src/style.css(append any rule)index.<hash>.hot-update.jsonandindex.<hash>.hot-update.js(HMR client is connected), but the<style>element is unchanged — the new CSS never applies.Expected Behavior
The changed css module appears in the hot-update module map so style-loader can apply the new content — exactly like JS modules: editing
src/index.jsproduces a hot-update whose module map contains./src/index.jsand HMR works.Actual Behavior
hot-update manifest after editing the css:
{"c":["index"],"r":[],"m":[]}hot-update chunk registers chunk
indexwith an empty module map:The css module (
src/style.css) is omitted from the update entirely, so style-loader'supdate(content)is never called.Version matrix (all affected)
With
injectStyles: false(default extract mode) the same project uses the css-extract runtime protocol ([HMR] Reload all CSS) and CSS HMR works.Context
output.injectStylesis a commonly suggested workaround for CSS HMR problems in micro-frontend setups (micro-app / qiankun), where the css-extract<link>protocol collides with the framework's style rewriting. This repro shows the workaround itself is broken: with injectStyles the css modules are plain JS modules handled by style-loader's HMR, and they depend on being delivered through the normal hot-update module map — which Rspack leaves empty for css changes.