Skip to content

[Bug]: CSS HMR never applies with output.injectStyles: true (hot-update module map is empty) #15309

Description

@chenhuang444

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

  1. npm install && npm run devhttp://localhost:4099
  2. DevTools → Elements: a <style> tag contains @font-face { font-family: ReproFont; ... } and .probe { font-family: ReproFont; ... }
  3. Edit src/style.css (append any rule)
  4. 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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions