feat(module-federation): use @module-federation/enhanced for withModu…

…leFederation (#26777)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->
We currently use the `ModuleFederationPlugin` from `webpack` itself. 
This doesn't receive the same attention as the new
`@module-federation/enhanced` package, which is where all new work by
Zack Jackson and Bytedance is being conducted.


## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
Our `withModuleFederation` utils should use the
`@module-federation/enhanced` package.

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->
#26322 
Fixes #

package.json

@@ -50,6 +50,8 @@
     "@jest/reporters": "^29.4.1",
     "@jest/test-result": "^29.4.1",
     "@jest/types": "^29.4.1",
+    "@module-federation/enhanced": "^0.2.3",
+    "@module-federation/sdk": "^0.2.3",
     "@monodon/rust": "1.3.3",
     "@napi-rs/cli": "2.14.0",
     "@nestjs/cli": "^10.0.2",

packages/angular/migrations.json

@@ -1933,6 +1933,15 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "19.5.0-module-federation": {
+      "version": "19.5.0-beta.0",
+      "packages": {
+        "@module-federation/node": {
+          "version": "^2.3.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

packages/angular/ng-package.json

@@ -9,6 +9,7 @@
     "@nx/",
     "@angular-devkit",
     "@angular-eslint/",
+    "@module-federation/enhanced",
     "@schematics",
     "@phenomnomnominal/tsquery",
     "@typescript-eslint/",
@@ -20,7 +21,6 @@
     "ts-node",
     "tsconfig-paths",
     "semver",
-    "webpack",
     "http-server",
     "magic-string",
     "enquirer",

packages/angular/package.json

@@ -56,8 +56,8 @@
     "minimatch": "9.0.3",
     "semver": "^7.5.3",
     "tslib": "^2.3.0",
-    "webpack": "^5.80.0",
     "webpack-merge": "^5.8.0",
+    "@module-federation/enhanced": "~0.2.3",
     "@nx/devkit": "file:../devkit",
     "@nx/js": "file:../js",
     "@nx/eslint": "file:../eslint",

packages/angular/src/generators/host/__snapshots__/host.spec.ts.snap

@@ -232,7 +232,6 @@ exports[`Host App Generator --ssr should generate the correct files 9`] = `
       "extractLicenses": false,
       "optimization": false,
       "sourceMap": true,
-      "vendorChunk": true,
     },
     "production": {
       "outputHashing": "media",
@@ -446,7 +445,6 @@ exports[`Host App Generator --ssr should generate the correct files for standalo
       "extractLicenses": false,
       "optimization": false,
       "sourceMap": true,
-      "vendorChunk": true,
     },
     "production": {
       "outputHashing": "media",
@@ -661,7 +659,6 @@ exports[`Host App Generator --ssr should generate the correct files for standalo
       "extractLicenses": false,
       "optimization": false,
       "sourceMap": true,
-      "vendorChunk": true,
     },
     "production": {
       "outputHashing": "media",
@@ -863,7 +860,6 @@ exports[`Host App Generator --ssr should generate the correct files when --types
       "extractLicenses": false,
       "optimization": false,
       "sourceMap": true,
-      "vendorChunk": true,
     },
     "production": {
       "outputHashing": "media",

packages/angular/src/generators/host/lib/update-ssr-setup.ts

@@ -71,6 +71,15 @@ export async function updateSsrSetup(
     ),
   };
 
+  if (
+    project.targets.server.configurations &&
+    project.targets.server.configurations.development
+  ) {
+    if ('vendorChunk' in project.targets.server.configurations.development) {
+      delete project.targets.server.configurations.development.vendorChunk;
+    }
+  }
+
   project.targets['serve-ssr'].executor =
     '@nx/angular:module-federation-dev-ssr';
 

packages/angular/src/generators/remote/__snapshots__/remote.spec.ts.snap

@@ -264,7 +264,6 @@ exports[`MF Remote App Generator --ssr should generate the correct files 11`] =
       "extractLicenses": false,
       "optimization": false,
       "sourceMap": true,
-      "vendorChunk": true,
     },
     "production": {
       "outputHashing": "media",
@@ -482,7 +481,6 @@ exports[`MF Remote App Generator --ssr should generate the correct files when --
       "extractLicenses": false,
       "optimization": false,
       "sourceMap": true,
-      "vendorChunk": true,
     },
     "production": {
       "outputHashing": "media",

packages/angular/src/generators/remote/lib/update-ssr-setup.ts

@@ -100,6 +100,14 @@ export async function updateSsrSetup(
       `webpack.server.config.${typescriptConfiguration ? 'ts' : 'js'}`
     ),
   };
+  if (
+    project.targets.server.configurations &&
+    project.targets.server.configurations.development
+  ) {
+    if ('vendorChunk' in project.targets.server.configurations.development) {
+      delete project.targets.server.configurations.development.vendorChunk;
+    }
+  }
   project.targets['serve-ssr'].options = {
     ...(project.targets['serve-ssr'].options ?? {}),
     port,

packages/angular/src/generators/setup-mf/setup-mf.ts

@@ -22,7 +22,10 @@ import {
   updateHostAppRoutes,
   updateTsConfig,
 } from './lib';
-import { nxVersion } from '../../utils/versions';
+import {
+  moduleFederationEnhancedVersion,
+  nxVersion,
+} from '../../utils/versions';
 
 export async function setupMf(tree: Tree, rawOptions: Schema) {
   const options = normalizeOptions(tree, rawOptions);
@@ -43,7 +46,11 @@ export async function setupMf(tree: Tree, rawOptions: Schema) {
       installTask = addDependenciesToPackageJson(
         tree,
         {},
-        { '@nx/web': nxVersion, '@nx/webpack': nxVersion }
+        {
+          '@nx/web': nxVersion,
+          '@nx/webpack': nxVersion,
+          '@module-federation/enhanced': moduleFederationEnhancedVersion,
+        }
       );
     }
   }
@@ -71,7 +78,10 @@ export async function setupMf(tree: Tree, rawOptions: Schema) {
       installTask = addDependenciesToPackageJson(
         tree,
         {},
-        { '@nx/webpack': nxVersion }
+        {
+          '@nx/webpack': nxVersion,
+          '@module-federation/enhanced': moduleFederationEnhancedVersion,
+        }
       );
     }
   }

packages/angular/src/utils/backward-compatible-versions.ts

@@ -48,7 +48,8 @@ export const backwardCompatibleVersions: VersionMap = {
     expressVersion: '~4.18.2',
     typesExpressVersion: '4.17.14',
     browserSyncVersion: '^3.0.0',
-    moduleFederationNodeVersion: '~1.0.5',
+    moduleFederationNodeVersion: '~2.3.0',
+    moduleFederationEnhancedVersion: '~0.2.3',
     angularEslintVersion: '~16.0.0',
     tailwindVersion: '^3.0.2',
     postcssVersion: '^8.4.5',
@@ -74,7 +75,8 @@ export const backwardCompatibleVersions: VersionMap = {
     expressVersion: '~4.18.2',
     typesExpressVersion: '4.17.14',
     browserSyncVersion: '^3.0.0',
-    moduleFederationNodeVersion: '~1.0.5',
+    moduleFederationNodeVersion: '~2.3.0',
+    moduleFederationEnhancedVersion: '~0.2.3',
     angularEslintVersion: '~17.3.0',
     tailwindVersion: '^3.0.2',
     postcssVersion: '^8.4.5',

packages/angular/src/utils/mf/with-module-federation-ssr.ts

@@ -1,8 +1,12 @@
-import { ModuleFederationConfig } from '@nx/webpack/src/utils/module-federation';
+import type {
+  ModuleFederationConfig,
+  NxModuleFederationConfigOverride,
+} from '@nx/webpack/src/utils/module-federation';
 import { getModuleFederationConfig } from './utils';
 
 export async function withModuleFederationForSSR(
-  options: ModuleFederationConfig
+  options: ModuleFederationConfig,
+  configOverride?: NxModuleFederationConfigOverride
 ) {
   if (global.NX_GRAPH_CREATION) {
     return (config) => config;
@@ -45,6 +49,10 @@ export async function withModuleFederationForSSR(
             type: 'commonjs-module',
           },
           isServer: true,
+          /**
+           * Apply user-defined config override
+           */
+          ...(configOverride ? configOverride : {}),
         },
         {}
       ),

packages/angular/src/utils/mf/with-module-federation.ts

@@ -1,8 +1,14 @@
-import { ModuleFederationConfig } from '@nx/webpack/src/utils/module-federation';
+import type {
+  ModuleFederationConfig,
+  NxModuleFederationConfigOverride,
+} from '@nx/webpack/src/utils/module-federation';
 import { getModuleFederationConfig } from './utils';
-import ModuleFederationPlugin from 'webpack/lib/container/ModuleFederationPlugin';
+import { ModuleFederationPlugin } from '@module-federation/enhanced/webpack';
 
-export async function withModuleFederation(options: ModuleFederationConfig) {
+export async function withModuleFederation(
+  options: ModuleFederationConfig,
+  configOverride?: NxModuleFederationConfigOverride
+) {
   if (global.NX_GRAPH_CREATION) {
     return (config) => config;
   }
@@ -44,6 +50,10 @@ export async function withModuleFederation(options: ModuleFederationConfig) {
         library: {
           type: 'module',
         },
+        /**
+         * Apply user-defined config override
+         */
+        ...(configOverride ? configOverride : {}),
       }),
       sharedLibraries.getReplacementPlugin(),
     ],

packages/angular/src/utils/versions.ts

@@ -14,7 +14,8 @@ export const typesCorsVersion = '~2.8.5';
 export const expressVersion = '~4.18.2';
 export const typesExpressVersion = '4.17.14';
 export const browserSyncVersion = '^3.0.0';
-export const moduleFederationNodeVersion = '~1.0.5';
+export const moduleFederationNodeVersion = '^2.3.0';
+export const moduleFederationEnhancedVersion = '~0.2.3';
 
 export const angularEslintVersion = '^18.0.1';
 export const typescriptEslintVersion = '^8.0.0-alpha.28';

packages/react/migrations.json

@@ -202,6 +202,15 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "19.5.0-module-federation": {
+      "version": "19.5.0-beta.0",
+      "packages": {
+        "@module-federation/node": {
+          "version": "^2.3.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

packages/react/package.json

@@ -38,6 +38,7 @@
     "file-loader": "^6.2.0",
     "minimatch": "9.0.3",
     "tslib": "^2.3.0",
+    "@module-federation/enhanced": "~0.2.3",
     "@nx/devkit": "file:../devkit",
     "@nx/js": "file:../js",
     "@nx/eslint": "file:../eslint",

packages/react/src/generators/host/host.ts

@@ -1,4 +1,5 @@
 import {
+  addDependenciesToPackageJson,
   formatFiles,
   GeneratorCallback,
   joinPathFragments,
@@ -22,6 +23,7 @@ import { updateModuleFederationE2eProject } from './lib/update-module-federation
 import { NormalizedSchema, Schema } from './schema';
 import { addMfEnvToTargetDefaultInputs } from '../../utils/add-mf-env-to-inputs';
 import { isValidVariable } from '@nx/js';
+import { moduleFederationEnhancedVersion } from '../../utils/versions';
 
 export async function hostGenerator(
   host: Tree,
@@ -137,6 +139,13 @@ export async function hostGeneratorInternal(
 
   addMfEnvToTargetDefaultInputs(host);
 
+  const installTask = addDependenciesToPackageJson(
+    host,
+    {},
+    { '@module-federation/enhanced': moduleFederationEnhancedVersion }
+  );
+  tasks.push(installTask);
+
   if (!options.skipFormat) {
     await formatFiles(host);
   }

packages/react/src/generators/remote/remote.ts

@@ -1,5 +1,6 @@
 import { join } from 'path';
 import {
+  addDependenciesToPackageJson,
   formatFiles,
   generateFiles,
   GeneratorCallback,
@@ -24,6 +25,7 @@ import { addRemoteToDynamicHost } from './lib/add-remote-to-dynamic-host';
 import { addMfEnvToTargetDefaultInputs } from '../../utils/add-mf-env-to-inputs';
 import { maybeJs } from '../../utils/maybe-js';
 import { isValidVariable } from '@nx/js';
+import { moduleFederationEnhancedVersion } from '../../utils/versions';
 
 export function addModuleFederationFiles(
   host: Tree,
@@ -171,6 +173,13 @@ export async function remoteGeneratorInternal(host: Tree, schema: Schema) {
 
   addMfEnvToTargetDefaultInputs(host);
 
+  const installTask = addDependenciesToPackageJson(
+    host,
+    {},
+    { '@module-federation/enhanced': moduleFederationEnhancedVersion }
+  );
+  tasks.push(installTask);
+
   if (!options.skipFormat) {
     await formatFiles(host);
   }

packages/react/src/module-federation/with-module-federation-ssr.ts

@@ -1,8 +1,12 @@
-import { ModuleFederationConfig } from '@nx/webpack/src/utils/module-federation';
+import {
+  ModuleFederationConfig,
+  NxModuleFederationConfigOverride,
+} from '@nx/webpack/src/utils/module-federation';
 import { getModuleFederationConfig } from './utils';
 
 export async function withModuleFederationForSSR(
-  options: ModuleFederationConfig
+  options: ModuleFederationConfig,
+  configOverride?: NxModuleFederationConfigOverride
 ) {
   if (global.NX_GRAPH_CREATION) {
     return (config) => config;
@@ -34,6 +38,10 @@ export async function withModuleFederationForSSR(
             type: 'commonjs-module',
           },
           isServer: true,
+          /**
+           * Apply user-defined config overrides
+           */
+          ...(configOverride ? configOverride : {}),
         },
         {}
       ),

packages/react/src/module-federation/with-module-federation.ts

@@ -1,7 +1,10 @@
-import { ModuleFederationConfig } from '@nx/webpack/src/utils/module-federation';
+import {
+  ModuleFederationConfig,
+  NxModuleFederationConfigOverride,
+} from '@nx/webpack/src/utils/module-federation';
 import { getModuleFederationConfig } from './utils';
 import type { AsyncNxComposableWebpackPlugin } from '@nx/webpack';
-import ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
+import { ModuleFederationPlugin } from '@module-federation/enhanced/webpack';
 
 const isVarOrWindow = (libType?: string) =>
   libType === 'var' || libType === 'window';
@@ -11,7 +14,8 @@ const isVarOrWindow = (libType?: string) =>
  * @return {Promise<AsyncNxComposableWebpackPlugin>}
  */
 export async function withModuleFederation(
-  options: ModuleFederationConfig
+  options: ModuleFederationConfig,
+  configOverride?: NxModuleFederationConfigOverride
 ): Promise<AsyncNxComposableWebpackPlugin> {
   if (global.NX_GRAPH_CREATION) {
     return (config) => config;
@@ -62,6 +66,10 @@ export async function withModuleFederation(
          *  { appY: 'appY@http://localhost:3002/remoteEntry.js' }
          */
         ...(isGlobal ? { remoteType: 'script' } : {}),
+        /**
+         * Apply user-defined config overrides
+         */
+        ...(configOverride ? configOverride : {}),
       }),
       sharedLibraries.getReplacementPlugin()
     );