fix(esbuild): fix esbuild 0.25.0 compatibility and remote module loading module-federation#4255

Author: HaasStefan

apps/esbuild/build/build-common.js

@@ -11,7 +11,7 @@ async function buildProject(projectName, watch) {
 
   fs.rmSync(outputPath, { force: true, recursive: true });
 
-  await esbuild.build({
+  const buildOptions = {
     entryPoints: [path.join(projectName, 'main.ts')],
     outdir: outputPath,
     bundle: true,
@@ -28,8 +28,15 @@ async function buildProject(projectName, watch) {
         require(path.join('../', projectName, 'federation.config.js')),
       ),
     ],
-    watch,
-  });
+  };
+
+  if (watch) {
+    const ctx = await esbuild.context(buildOptions);
+    await ctx.watch();
+    console.log(`Watching ${projectName} for changes...`);
+  } else {
+    await esbuild.build(buildOptions);
+  }
 
   ['index.html', 'favicon.ico', 'styles.css'].forEach((file) => {
     fs.copyFileSync(path.join(projectName, file), path.join(outputPath, file));

packages/esbuild/src/adapters/lib/containerReference.ts

@@ -59,28 +59,38 @@ export const buildFederationHost = (config: NormalizedFederationConfig) => {
     const runtimePlugin = () => ({
       name: 'import-maps-plugin',
       async init(args) {
-        const remotePrefetch = args.options.remotes.map(async (remote) => {
-          console.log('remote', remote);
-          if (remote.type === 'esm') {
-            await import(remote.entry);
-          }
-        });
-
-        await Promise.all(remotePrefetch);
-        if (typeof moduleMap !== 'undefined') {
-          const map = Object.keys(moduleMap).reduce((acc, expose) => {
-            const importMap = importShim.getImportMap().imports;
-            const key = args.origin.name + expose.replace('.', '');
-            if (!importMap[key]) {
-              const encodedModule = encodeInlineESM(
-                createVirtualRemoteModule(args.origin.name, key, moduleMap[expose].exports)
-              );
-              acc[key] = encodedModule;
+        // Load all remotes and collect their moduleMaps
+        const remotesWithModuleMaps = await Promise.all(
+          args.options.remotes.map(async (remote) => {
+            console.log('remote', remote);
+            if (remote.type === 'esm') {
+              const remoteModule = await import(remote.entry);
+              return { remote, moduleMap: remoteModule.moduleMap };
+            }
+            return { remote, moduleMap: null };
+          })
+        );
+
+        // Build import map entries for all remote modules
+        const allImports = {};
+        for (const { remote, moduleMap } of remotesWithModuleMaps) {
+          if (moduleMap && typeof moduleMap === 'object') {
+            for (const expose of Object.keys(moduleMap)) {
+              const currentImportMap = importShim.getImportMap().imports;
+              // Use remote name + expose path (e.g., "mfe1/component")
+              const key = remote.name + expose.replace('.', '');
+              if (!currentImportMap[key] && !allImports[key]) {
+                const encodedModule = encodeInlineESM(
+                  createVirtualRemoteModule(remote.name, key, moduleMap[expose].exports)
+                );
+                allImports[key] = encodedModule;
+              }
             }
-            return acc;
-          }, {});
+          }
+        }
 
-          await importShim.addImportMap({ imports: map });
+        if (Object.keys(allImports).length > 0) {
+          await importShim.addImportMap({ imports: allImports });
         }
 
         return args;
@@ -96,6 +106,33 @@ export const buildFederationHost = (config: NormalizedFederationConfig) => {
 
     await Promise.all(mfHoZJ92.initializeSharing('default', 'version-first'));
 
+    // Ensure import maps are registered before any code that uses remotes runs
+    const remotesList = ${remoteConfigs};
+    const allImports = {};
+    for (const remote of remotesList) {
+      if (remote.type === 'esm') {
+        try {
+          const remoteModule = await import(remote.entry);
+          const moduleMap = remoteModule.moduleMap;
+          if (moduleMap && typeof moduleMap === 'object') {
+            for (const expose of Object.keys(moduleMap)) {
+              const key = remote.name + expose.replace('.', '');
+              if (!allImports[key]) {
+                const encodedModule = encodeInlineESM(
+                  createVirtualRemoteModule(remote.name, key, moduleMap[expose].exports)
+                );
+                allImports[key] = encodedModule;
+              }
+            }
+          }
+        } catch (e) {
+          console.error('Failed to load remote:', remote.name, e);
+        }
+      }
+    }
+    if (Object.keys(allImports).length > 0) {
+      await importShim.addImportMap({ imports: allImports });
+    }
 
   `;
 };