Fix chunk-merge bug in ReactFlightWebpackPlugin (v19.2.1)

[AbanoubGhadban]

Summary

• Fix recordModule() in ReactFlightWebpackPlugin to merge chunk arrays instead of overwriting when the same module appears in multiple webpack chunk groups
• This fixes TypeError: r[e] is not a function errors during RSC hydration on slow networks (e.g., 3G + CPU throttling)
• Built from React fork rsc-patches/v19.2.1 with the fix applied

Root Cause

When webpack splits modules across multiple chunks (via chunk groups), the plugin's recordModule() was called multiple times for the same module. Each call overwrote the previous entry with only the current chunk group's chunks, losing earlier chunk references. The RSC flight client then failed to preload all necessary chunks, causing __webpack_require__ to fail when a module factory hadn't been registered yet.

The Fix

Changed from:

filePathToModuleMetadata[href] = { id, chunks, name: '*' };

To merge logic that preserves chunks from all chunk groups:

if (filePathToModuleMetadata[href]) {
  // Merge chunks from additional chunk groups
  const existing = filePathToModuleMetadata[href];
  const existingChunkIds = new Set();
  for (let i = 0; i < existing.chunks.length; i += 2) {
    existingChunkIds.add(existing.chunks[i]);
  }
  for (let j = 0; j < chunks.length; j += 2) {
    if (!existingChunkIds.has(chunks[j])) {
      existing.chunks.push(chunks[j], chunks[j + 1]);
    }
  }
} else {
  filePathToModuleMetadata[href] = { id, chunks: chunks.slice(), name: '*' };
}

Test plan

• Built from fixed React fork branch
• Verify with localhub-demo-search under Slow 3G + 6x CPU throttling
• Confirm zero TypeError errors after 3+ hard reloads

Resolves #19

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/chunk-merge-bug-v19.2.1

---

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.}

[greptile-apps]

Greptile Summary

Fixes a critical bug where React Server Components would fail to hydrate on slow networks with TypeError: r[e] is not a function. The root cause was that when a client module appeared in multiple webpack chunk groups, the plugin was overwriting the module's chunk metadata instead of merging it, causing the RSC flight client to miss necessary chunk preloads.

Key changes:

• Modified recordModule() to detect when a module has already been recorded
• Added merge logic that combines chunk arrays using a Set to avoid duplicates
• Changed from direct assignment to chunks.slice() to prevent unintended mutations

Trade-offs:

• Variable shadowing (id and module reused for different purposes) reduces code readability, though the fix is functionally correct

Confidence Score: 4/5

• Safe to merge - fixes a critical production bug with correct merge logic
• The fix correctly addresses the root cause by merging chunk arrays instead of overwriting them. The logic uses Set-based deduplication and properly handles the paired chunk structure (id, file). Minor style issues with variable shadowing don't affect correctness.
• No files require special attention - the single-file change is straightforward

Important Files Changed

Filename	Overview
src/react-server-dom-webpack/cjs/react-server-dom-webpack-plugin.js	Implements chunk array merging to fix RSC hydration errors when modules appear in multiple webpack chunk groups

_{Last reviewed commit: 14ff4dd}

[greptile-apps]

_{1 file reviewed, 4 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Variable shadowing: reusing id parameter name to store metadata object reduces readability

Suggested change

	id = filePathToModuleMetadata[module];
	const existing = filePathToModuleMetadata[module];

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

[greptile-apps]

Variable shadowing: reusing module parameter name to store Set object reduces readability

Suggested change

	module = new Set();
	const existingChunkIds = new Set();

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

[greptile-apps]

Use descriptive variable name in the merge loop

Suggested change

	for (var i = 0; i < id.chunks.length; i += 2)
	module.add(id.chunks[i]);
	for (var existingIdx = 0; existingIdx < existing.chunks.length; existingIdx += 2)
	existingChunkIds.add(existing.chunks[existingIdx]);

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

[greptile-apps]

Use descriptive variable name and clearer condition formatting

Suggested change

	for (i = 0; i < chunks.length; i += 2)
	module.has(chunks[i]) ||
	id.chunks.push(chunks[i], chunks[i + 1]);
	for (var newIdx = 0; newIdx < chunks.length; newIdx += 2) {
	if (!existingChunkIds.has(chunks[newIdx])) {
	existing.chunks.push(chunks[newIdx], chunks[newIdx + 1]);
	}
	}

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}