fix: add RN polyfills as runtime modules for correct execution order (#1340)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: jbroma

.changeset/polyfills-runtime-modules.md

@@ -0,0 +1,5 @@
+---
+"@callstack/repack": patch
+---
+
+Fix polyfill execution order when using Module Federation by adding a `PolyfillsRuntimeModule` to `NativeEntryPlugin`. Polyfills are now required from a runtime module that runs before Module Federation's startup wrapper, guaranteeing they execute before MF startup.

apps/tester-app/ios/Podfile.lock

@@ -1,6 +1,6 @@
 PODS:
   - boost (1.84.0)
-  - callstack-repack (5.2.2):
+  - callstack-repack (5.2.3):
     - boost
     - DoubleConversion
     - fast_float
@@ -2930,7 +2930,7 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost: 7e761d76ca2ce687f7cc98e698152abd03a18f90
-  callstack-repack: c874fe60c49dcf3067bca0627b7ace673589737c
+  callstack-repack: 15b29626cee2b659cd3f9afa4e8c33b1d42f5c59
   DoubleConversion: cb417026b2400c8f53ae97020b2be961b59470cb
   fast_float: b32c788ed9c6a8c584d114d0047beda9664e7cc6
   FBLazyVector: a867936a67af0d09c37935a1b900a1a3c795b6d1
@@ -3011,7 +3011,7 @@ SPEC CHECKSUMS:
   RNWorklets: 20451b83d42e7509f43599b405993e57e3a038af
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   SwiftyRSA: 8c6dd1ea7db1b8dc4fb517a202f88bb1354bc2c6
-  Yoga: b01392348aeea02064c21a2762a42893d82b60a7
+  Yoga: 00013dd9cde63a2d98e8002fcc4f5ddb66c10782
 
 PODFILE CHECKSUM: 6d7cbe03444d5e87210979fb32a0eca299d758fe
 

apps/tester-federation-v2/ios/Podfile.lock

@@ -1,6 +1,6 @@
 PODS:
   - boost (1.84.0)
-  - callstack-repack (5.2.0):
+  - callstack-repack (5.2.3):
     - boost
     - DoubleConversion
     - fast_float
@@ -2713,7 +2713,7 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost: 7e761d76ca2ce687f7cc98e698152abd03a18f90
-  callstack-repack: 9c91d2c48b139e38919c656474f43ab0494b4c21
+  callstack-repack: 15b29626cee2b659cd3f9afa4e8c33b1d42f5c59
   DoubleConversion: cb417026b2400c8f53ae97020b2be961b59470cb
   fast_float: b32c788ed9c6a8c584d114d0047beda9664e7cc6
   FBLazyVector: a867936a67af0d09c37935a1b900a1a3c795b6d1
@@ -2791,7 +2791,7 @@ SPEC CHECKSUMS:
   RNScreens: 5c7f22b19ee2e900e5de2c578471aeb153d1e502
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   SwiftyRSA: 8c6dd1ea7db1b8dc4fb517a202f88bb1354bc2c6
-  Yoga: b01392348aeea02064c21a2762a42893d82b60a7
+  Yoga: 00013dd9cde63a2d98e8002fcc4f5ddb66c10782
 
 PODFILE CHECKSUM: 3d5c18eefbf70d38fbbfe81a262195cadac1f5dd
 

apps/tester-federation/ios/Podfile.lock

@@ -1,6 +1,6 @@
 PODS:
   - boost (1.84.0)
-  - callstack-repack (5.2.0):
+  - callstack-repack (5.2.3):
     - boost
     - DoubleConversion
     - fast_float
@@ -2713,7 +2713,7 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost: 7e761d76ca2ce687f7cc98e698152abd03a18f90
-  callstack-repack: 9c91d2c48b139e38919c656474f43ab0494b4c21
+  callstack-repack: 15b29626cee2b659cd3f9afa4e8c33b1d42f5c59
   DoubleConversion: cb417026b2400c8f53ae97020b2be961b59470cb
   fast_float: b32c788ed9c6a8c584d114d0047beda9664e7cc6
   FBLazyVector: a867936a67af0d09c37935a1b900a1a3c795b6d1

…/repack/src/plugins/NativeEntryPlugin.ts …s/NativeEntryPlugin/NativeEntryPlugin.tspackages/repack/src/plugins/NativeEntryPlugin.ts renamed to packages/repack/src/plugins/NativeEntryPlugin/NativeEntryPlugin.ts packages/repack/src/plugins/NativeEntryPlugin.ts renamed to packages/repack/src/plugins/NativeEntryPlugin/NativeEntryPlugin.ts

@@ -1,7 +1,8 @@
 import path from 'node:path';
 import type { ResolveAlias, Compiler as RspackCompiler } from '@rspack/core';
 import type { Compiler as WebpackCompiler } from 'webpack';
-import { isRspackCompiler, moveElementBefore } from '../helpers/index.js';
+import { isRspackCompiler, moveElementBefore } from '../../helpers/index.js';
+import { makePolyfillsRuntimeModule } from './PolyfillsRuntimeModule.js';
 
 export interface NativeEntryPluginConfig {
   /**
@@ -55,18 +56,37 @@ export class NativeEntryPlugin {
       path.join(reactNativePath, 'Libraries/Core/InitializeCore.js');
 
     const initializeScriptManagerPath = require.resolve(
-      '../modules/InitializeScriptManager.js'
+      '../../modules/InitializeScriptManager.js'
     );
 
-    const includeModulesPath = require.resolve('../modules/IncludeModules.js');
+    const includeModulesPath = require.resolve(
+      '../../modules/IncludeModules.js'
+    );
+
+    const polyfillPaths = getReactNativePolyfills();
 
     const nativeEntries = [
-      ...getReactNativePolyfills(),
+      ...polyfillPaths,
       initializeCorePath,
       initializeScriptManagerPath,
       includeModulesPath,
     ];
 
+    // Polyfills are entry modules (processed by loaders), but we also require them
+    // from a runtime module to guarantee they execute before Module Federation's
+    // startup wrapper. The duplicate require during startup is a cache hit.
+    compiler.hooks.compilation.tap('RepackNativeEntryPlugin', (compilation) => {
+      compilation.hooks.additionalTreeRuntimeRequirements.tap(
+        'RepackNativeEntryPlugin',
+        (chunk) => {
+          compilation.addRuntimeModule(
+            chunk,
+            makePolyfillsRuntimeModule(compiler, { polyfillPaths })
+          );
+        }
+      );
+    });
+
     compiler.hooks.entryOption.tap(
       { name: 'RepackNativeEntryPlugin', before: 'RepackDevelopmentPlugin' },
       (_, entry) => {
@@ -76,14 +96,12 @@ export class NativeEntryPlugin {
           );
         }
 
+        // add native entries (including polyfills) to each declared entry point
         Object.keys(entry).forEach((entryName) => {
-          // runtime property defines the chunk name, otherwise it defaults to the entry key
           const entryChunkName = entry[entryName].runtime || entryName;
-
-          // add native entries to all declared entry points
           for (const nativeEntry of nativeEntries) {
             new compiler.webpack.EntryPlugin(compiler.context, nativeEntry, {
-              name: entryChunkName, // prepends the entry to the chunk of specified name
+              name: entryChunkName,
             }).apply(compiler);
           }
         });

packages/repack/src/plugins/NativeEntryPlugin/PolyfillsRuntimeModule.ts

@@ -0,0 +1,54 @@
+import type {
+  Compiler,
+  NormalModule,
+  RuntimeModule as RuntimeModuleType,
+} from '@rspack/core';
+
+interface PolyfillsRuntimeModuleConfig {
+  polyfillPaths: string[];
+}
+
+/**
+ * Runtime module that requires polyfill entry modules before the startup
+ * function (__webpack_require__.x), ensuring they run before Module Federation's
+ * embed_federation_runtime wrapper. Polyfills go through the normal loader
+ * pipeline as entry modules; this module only controls execution timing.
+ */
+export const makePolyfillsRuntimeModule = (
+  compiler: Compiler,
+  moduleConfig: PolyfillsRuntimeModuleConfig
+): RuntimeModuleType => {
+  const Template = compiler.webpack.Template;
+  const RuntimeModule = compiler.webpack.RuntimeModule;
+  const RuntimeGlobals = compiler.webpack.RuntimeGlobals;
+
+  const PolyfillsRuntimeModule = class extends RuntimeModule {
+    constructor(private config: PolyfillsRuntimeModuleConfig) {
+      super('repack/polyfills', RuntimeModule.STAGE_BASIC);
+    }
+
+    generate() {
+      const compilation = this.compilation!;
+      const chunk = this.chunk!;
+      const chunkGraph = compilation.chunkGraph;
+      const chunkModules = new Set(chunkGraph.getChunkModules(chunk));
+
+      const requireCalls = this.config.polyfillPaths
+        .map((polyfillPath) => {
+          for (const mod of compilation.modules) {
+            if ((mod as NormalModule).resource === polyfillPath) {
+              if (!chunkModules.has(mod)) return null;
+              const moduleId = chunkGraph.getModuleId(mod);
+              return `${RuntimeGlobals.require}(${JSON.stringify(moduleId)});`;
+            }
+          }
+          return null;
+        })
+        .filter(Boolean) as string[];
+
+      return Template.asString(requireCalls);
+    }
+  };
+
+  return new PolyfillsRuntimeModule(moduleConfig);
+};

packages/repack/src/plugins/NativeEntryPlugin/index.ts

@@ -0,0 +1,2 @@
+export { NativeEntryPlugin } from './NativeEntryPlugin.js';
+export type { NativeEntryPluginConfig } from './NativeEntryPlugin.js';

packages/repack/src/plugins/RepackPlugin.ts

@@ -3,7 +3,7 @@ import type { Compiler as WebpackCompiler } from 'webpack';
 import { BabelPlugin } from './BabelPlugin.js';
 import { DevelopmentPlugin } from './DevelopmentPlugin.js';
 import { LoggerPlugin, type LoggerPluginConfig } from './LoggerPlugin.js';
-import { NativeEntryPlugin } from './NativeEntryPlugin.js';
+import { NativeEntryPlugin } from './NativeEntryPlugin/index.js';
 import { OutputPlugin, type OutputPluginConfig } from './OutputPlugin/index.js';
 import { RepackTargetPlugin } from './RepackTargetPlugin/index.js';
 import { SourceMapPlugin } from './SourceMapPlugin.js';

packages/repack/src/plugins/index.ts

@@ -9,3 +9,4 @@ export * from './ModuleFederationPluginV1.js';
 export * from './ModuleFederationPluginV2.js';
 export * from './CodeSigningPlugin/index.js';
 export * from './HermesBytecodePlugin/index.js';
+export * from './NativeEntryPlugin/index.js';