fix: failed to load CSS update file for lazy bundle

[upupming]

Summary by CodeRabbit

• Bug Fixes

  • Fixed "Failed to load CSS update file" error for lazy bundles.

• Improvements

  • Improved handling of async chunk naming for lazy-loaded bundles to better support multi-entry scenarios.

• Tests

  • Added end-to-end tests covering lazy bundle loading, HMR behavior, and CSS hot-update validation.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Checklist

• Tests updated (or not required).
• Documentation updated (or not required).
• Changeset added, and when a BREAKING CHANGE occurs, it needs to be clearly marked (or not required).

[changeset-bot]

🦋 Changeset detected

Latest commit: b0dfc81

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@lynx-js/template-webpack-plugin	Patch
@lynx-js/react-rsbuild-plugin	Patch
@lynx-js/react-alias-rsbuild-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

📝 Walkthrough

Walkthrough

Updates add React lazy-loading test fixtures and tests for HMR/entry-name handling, plus a template-webpack-plugin change to derive multiple entry names from chunk groups for async chunk encoding (and a changeset documenting a patch release).

Changes

Cohort / File(s)	Summary
Changeset ​.changeset/brave-news-sin.md	Adds patch release entry documenting fix for "Failed to load CSS update file" in lazy bundles
Test fixtures packages/rspeedy/plugin-react/test/fixtures/lazy-bundle/LazyComponent.tsx, packages/rspeedy/plugin-react/test/fixtures/lazy-bundle/LazyComponent.css, packages/rspeedy/plugin-react/test/fixtures/lazy-bundle/index.tsx, packages/rspeedy/plugin-react/test/fixtures/lazy-bundle/index.css	New React component, CSS, and Suspense-based app fixture for lazy-loading scenarios
Tests packages/rspeedy/plugin-react/test/lazy.test.ts	Adds tests to capture beforeEncode/beforeEmit behavior: verifies emitted entryNames and ensures app-service.js does not load hot-update.js during HMR
Template plugin packages/webpack/template-webpack-plugin/src/LynxTemplatePlugin.ts	Per-entry async processing now collects multiple entryNames from chunk groups, computes async chunkNames from them, and passes array of entryNames into encodeByAssetsInformation

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• fix: cannot read property 'call' of undefined #2146 — Modifies the same LynxTemplatePlugin.ts to adjust entry-name collection and filter HMR/dev assets, closely related to this change.

Suggested labels

framework:React

Suggested reviewers

• colinaaa
• hzy

Poem

🐰 I hopped through chunks both slow and spry,
Collected names beneath the sky,
Suspense held fast while CSS took flight,
Hot-update files hidden from sight—
A tiny patch, the bundle's delight.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main fix implemented in this PR: resolving CSS update file loading issues for lazy-loaded bundles, which is addressed by changes to LynxTemplatePlugin.ts and new test fixtures.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

The base branch was changed.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

Actionable comments posted: 3

🤖 Fix all issues with AI agents

In @.changeset/brave-news-sin.md:
- Line 5: In .changeset/brave-news-sin.md tighten the release note by removing
the duplicated word "error" in the line that currently reads: Fix error "Failed
to load CSS update file" error for lazy bundle — replace it with a concise
phrasing such as Fix "Failed to load CSS update file" for lazy bundle or Fix
failure to load CSS update file for lazy bundle so the message isn't repetitive.

In `@packages/rspeedy/plugin-react/test/lazy.test.ts`:
- Around line 177-293: The test "lazy bundle beforeEncode entryNames" calls
vi.stubEnv('NODE_ENV', 'development') but never restores it; wrap the
build+assertion block in a try/finally and restore the stub in finally (call
vi.unstubEnv() or the proper Vitest undo helper your test-suite uses) so
NODE_ENV is always reverted; locate the vi.stubEnv call near the top of that
test and ensure the try/finally encloses the await rsbuild.build() and all
expectations that reference entryNamesOfBeforeEncode and backgroundJSContent.
- Around line 295-416: The test mutates fixtures and stubs NODE_ENV without
guaranteeing cleanup; wrap the HMR mutation and related assertions in a
try/finally so the original LazyComponent.tsx content (tmpContent) is always
restored and the environment is reset after the test: capture the original
process.env.NODE_ENV before vi.stubEnv, perform the file write,
waitCompilationDone and assertions inside try, and in finally write back
tmpContent to the LazyComponent.tsx path and restore process.env.NODE_ENV (or
clear the stub) so subsequent tests remain isolated; update symbols referenced:
the test block 'lazy bundle app-service.js should not load hot-update.js',
tmpContent, fs.readFile/fs.writeFile calls for
'./fixtures/lazy-bundle/LazyComponent.tsx', waitCompilationDone, and vi.stubEnv.

🧹 Nitpick comments (1)

packages/rspeedy/plugin-react/test/fixtures/lazy-bundle/index.tsx (1)

1-12: Handle lazy-load failures to avoid blank renders.

If the chunk fails to load (e.g., missing HMR update), the error will bubble and the fixture renders nothing. Consider wrapping with an error boundary or add error handling in the lazy loader.

✅ Suggested change (async/await with fallback)

-const LazyComponent = lazy(() => import('./LazyComponent.js'))
+const LazyComponent = lazy(async () => {
+  try {
+    return await import('./LazyComponent.js')
+  } catch {
+    return { default: () => <text>Load failed</text> }
+  }
+})

As per coding guidelines: **/*.{js,ts,jsx,tsx}: Use async/await patterns with proper error handling in JavaScript/TypeScript code.

[codspeed-hq]

CodSpeed Performance Report

Merging this PR will degrade performance by 5.63%

_{Comparing fix/lazy-bundle-hmr-entrynames (b0dfc81) with main (1a5f2a1)}

Summary

❌ 1 regressed benchmark
✅ 62 untouched benchmarks
⏩ 3 skipped benchmarks¹

⚠️ Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

	Benchmark	BASE	HEAD	Efficiency
❌	basic-performance-nest-level-100	6.9 ms	7.4 ms	-5.63%

Footnotes

1. 3 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

[relativeci]

Web Explorer

#7411 Bundle Size — 383.56KiB (0%).

b0dfc81(current) vs 1a5f2a1 main#7408(baseline)

Bundle metrics   1 change

	Current #7411	Baseline #7408
Initial JS	154.71KiB	154.71KiB
Initial CSS	35.05KiB	35.05KiB
Cache Invalidation	0%	0%
Chunks	8	8
Assets	8	8
Modules	238(-0.42%)	239
Duplicate Modules	16	16
Duplicate Code	2.99%	2.99%
Packages	4	4
Duplicate Packages	0	0

Bundle size by type  no changes

	Current #7411	Baseline #7408
JS	252.66KiB	252.66KiB
Other	95.85KiB	95.85KiB
CSS	35.05KiB	35.05KiB

Bundle analysis report Branch fix/lazy-bundle-hmr-entrynames Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}