[Bug] `injectStyles: true` generates `module.id` references in ESM output causing runtime errors

[sub-ld]

Version

### 📝 **Environment**
- **@rslib/core**: 0.14.0
- **@rsbuild/core**: 1.5.12
- **Node.js**: Latest
- **Browser**: Any modern browser

Details

Issue Description:

🐛 Bug Report

rslib v0.14.0 generates CommonJS module.id references in ESM output when using injectStyles: true with CSS containing @font-face declarations, causing runtime errors in browsers.

🎯 Root Cause

The issue occurs when ALL these conditions are met:

1. ✅ injectStyles: true in rslib config
2. ✅ format: "esm" (ESM output format)
3. ✅ @font-face declarations in imported CSS files
4. ✅ Any export from the module that imports the CSS

Key Finding: Not React-specific - any export from a module importing CSS with @font-face triggers the issue.

💥 Runtime Error

Uncaught ReferenceError: module is not defined
    at http://localhost:4173/assets/index-[hash].js:321:2408

📋 Minimal Reproduction

Repository: https://github.com/sub-ld/rslib-inject-styles-bug

Minimal files that trigger the issue:

// src/index.ts
import "./globals.css";
export const foo = "bar";  // ANY export triggers the issue

/* src/globals.css */
@font-face {
  font-family: "TestFont";
  src: url("data:font/woff2;base64,") format("woff2");
}

🐛 Problematic Generated Code

The built ESM library contains:

___CSS_LOADER_EXPORT___.push([
  module.id, // ← CommonJS artifact in ESM bundle!
  `@font-face { font-family: "TestFont"; ... }`,
]);

🧪 Test Results

CSS Import	Export	module.id Count	Runtime Result
None	Yes	0	✅ Works
@font-face	None	1	⚠️ Has module.id but unused
@font-face	Yes	1	❌ Runtime Error

🎯 Expected Behavior

ESM libraries with injectStyles: true should:

1. Not generate CommonJS artifacts like module.id
2. Properly transform CSS loader output for ESM compatibility
3. Work seamlessly with @font-face declarations

📁 Additional Resources

• Full reproduction repo: https://github.com/sub-ld/rslib-inject-styles-bug
• Detailed technical analysis: ISSUE_DETAILS.md
• Minimal reproduction case: README.md

Reproduce link

https://github.com/sub-ld/rslib-inject-styles-bug

Reproduce Steps

git clone https://github.com/sub-ld/rslib-inject-styles-bug
cd rslib-inject-styles-bug
npm install
npm run build
npm run build:consumer
grep "module.id" dist/index.js  # Shows CommonJS artifacts in ESM bundle
npm run build:consumer && npm run preview  # Runtime error in browser

[Timeless0911]

Thanks for your report, this should be a bug introduced in Rspack v1.5.6, related PR: web-infra-dev/rspack#11634.

This should be fixed in web-infra-dev/rspack#11744 and we will release it soon.

You can override @rspack/core to 1.5.5 as a workaround.

[sub-ld]

@Timeless0911 Thanks for the quick response. In our example, we're using RSBuild and RSLib. Could you clarity how the fix to RSPack will fix this for us?

[Timeless0911]

Both Rsbuild and Rslib are based on Rspack which is the base bundler, see rspack ecosystem.