feat(module-federation): move withModuleFederation for webpack to new…

… package (#29031)

<!-- 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 -->
The `withModuleFederation` helper currently lives in the `@nx/react`
package.
With the goal of consolidating the module federation support into a
single package, this introduces a divergence in where module-federation
support lies


## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
Move `withModuleFederation` helper for angular into the
`@nx/module-federation` package, exposed via
`@nx/module-federation/webpack`.
Adds a migration to migrate existing projects to use the new package

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

Fixes #

packages/module-federation/.eslintrc.json

@@ -35,7 +35,8 @@
               "typescript",
               "@nx/cypress",
               "@nx/playwright",
-              "@nx/vite"
+              "@nx/vite",
+              "@module-federation/node"
             ]
           }
         ]

packages/module-federation/package.json

@@ -28,10 +28,11 @@
     "@nx/devkit": "file:../devkit",
     "@nx/js": "file:../js",
     "picocolors": "^1.1.0",
-    "@module-federation/sdk": "0.7.6",
     "webpack": "5.88.0",
     "@rspack/core": "1.1.2",
     "@module-federation/enhanced": "0.7.6",
+    "@module-federation/node": "2.6.11",
+    "@module-federation/sdk": "0.7.6",
     "express": "^4.19.2",
     "http-proxy-middleware": "^3.0.3"
   },

packages/react/src/module-federation/utils.ts → packages/module-federation/src/with-module-federation/webpack/utils.ts

@@ -7,7 +7,7 @@ import {
   ModuleFederationConfig,
   sharePackages,
   shareWorkspaceLibraries,
-} from '@nx/module-federation';
+} from '../../utils';
 
 import {
   createProjectGraphAsync,

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

@@ -1,7 +1,7 @@
 import {
   ModuleFederationConfig,
   NxModuleFederationConfigOverride,
-} from '@nx/module-federation';
+} from '../../utils';
 import { getModuleFederationConfig } from './utils';
 import type { NormalModuleReplacementPlugin } from 'webpack';
 

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

@@ -1,20 +1,18 @@
 import {
   ModuleFederationConfig,
   NxModuleFederationConfigOverride,
-} from '@nx/module-federation';
+} from '../../utils';
 import { getModuleFederationConfig } from './utils';
-import type { AsyncNxComposableWebpackPlugin } from '@nx/webpack';
 import { ModuleFederationPlugin } from '@module-federation/enhanced/webpack';
 import type { NormalModuleReplacementPlugin } from 'webpack';
 
 /**
  * @param {ModuleFederationConfig} options
- * @return {Promise<AsyncNxComposableWebpackPlugin>}
  */
 export async function withModuleFederation(
   options: ModuleFederationConfig,
   configOverride?: NxModuleFederationConfigOverride
-): Promise<AsyncNxComposableWebpackPlugin> {
+) {
   if (global.NX_GRAPH_CREATION) {
     return (config) => config;
   }

packages/module-federation/webpack.ts

@@ -0,0 +1,2 @@
+export * from './src/with-module-federation/webpack/with-module-federation';
+export * from './src/with-module-federation/webpack/with-module-federation-ssr';

packages/react/migrations.json

@@ -35,6 +35,12 @@
       "version": "20.2.0-beta.2",
       "description": "Update the ModuleFederationConfig import use @nx/module-federation.",
       "factory": "./src/migrations/update-20-2-0/migrate-mf-imports-to-new-package"
+    },
+    "update-20-2-0-update-with-module-federation-import": {
+      "cli": "nx",
+      "version": "20.2.0-beta.2",
+      "description": "Update the withModuleFederation import use @nx/module-federation/webpack.",
+      "factory": "./src/migrations/update-20-2-0/migrate-with-mf-import-to-new-package"
     }
   },
   "packageJsonUpdates": {

packages/react/module-federation.ts

@@ -1,12 +1,23 @@
-import { withModuleFederation } from './src/module-federation/with-module-federation';
-import { withModuleFederationForSSR } from './src/module-federation/with-module-federation-ssr';
+import { withModuleFederation } from '@nx/module-federation/webpack';
+import { withModuleFederationForSSR } from '@nx/module-federation/webpack';
 
-export { withModuleFederation };
-export { withModuleFederationForSSR };
+/**
+ * @deprecated Use `@nx/module-federation/webpack` instead. This will be removed in Nx v22.
+ */
+export { withModuleFederation, withModuleFederationForSSR };
 
 // Support for older generated code: `const withModuleFederation = require('@nx/react/module-federation')`
+/**
+ * @deprecated Use `@nx/module-federation/webpack` instead. This will be removed in Nx v22.
+ */
 module.exports = withModuleFederation;
 
 // Allow newer generated code to work: `const { withModuleFederation } = require(...)`;
+/**
+ * @deprecated Use `@nx/module-federation/webpack` instead. This will be removed in Nx v22.
+ */
 module.exports.withModuleFederation = withModuleFederation;
+/**
+ * @deprecated Use `@nx/module-federation/webpack` instead. This will be removed in Nx v22.
+ */
 module.exports.withModuleFederationForSSR = withModuleFederationForSSR;

packages/react/package.json

@@ -38,7 +38,6 @@
     "minimatch": "9.0.3",
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
-    "@module-federation/enhanced": "0.7.6",
     "@nx/devkit": "file:../devkit",
     "@nx/js": "file:../js",
     "@nx/eslint": "file:../eslint",

packages/react/src/generators/host/__snapshots__/host.webpack.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`hostGenerator bundler=webpack should generate host files and configs for SSR 1`] = `
 "const { composePlugins, withNx } = require('@nx/webpack');
 const { withReact } = require('@nx/react');
-const { withModuleFederationForSSR } = require('@nx/react/module-federation');
+const { withModuleFederationForSSR } = require('@nx/module-federation/webpack');
 
 const baseConfig = require('./module-federation.config');
 
@@ -46,7 +46,7 @@ module.exports = moduleFederationConfig;
 exports[`hostGenerator bundler=webpack should generate host files and configs for SSR when --typescriptConfiguration=true 1`] = `
 "import { composePlugins, withNx } from '@nx/webpack';
 import { withReact } from '@nx/react';
-import { withModuleFederationForSSR } from '@nx/react/module-federation';
+import { withModuleFederationForSSR } from '@nx/module-federation/webpack';
 
 import baseConfig from './module-federation.config';
 
@@ -86,7 +86,7 @@ export default config;
 exports[`hostGenerator bundler=webpack should generate host files and configs when --typescriptConfiguration=false 1`] = `
 "const { composePlugins, withNx } = require('@nx/webpack');
 const { withReact } = require('@nx/react');
-const { withModuleFederation } = require('@nx/react/module-federation');
+const { withModuleFederation } = require('@nx/module-federation/webpack');
 
 const baseConfig = require('./module-federation.config');
 
@@ -134,7 +134,7 @@ module.exports = {
 exports[`hostGenerator bundler=webpack should generate host files and configs when --typescriptConfiguration=true 1`] = `
 "import {composePlugins, withNx} from '@nx/webpack';
 import {withReact} from '@nx/react';
-import {withModuleFederation} from '@nx/react/module-federation';
+import {withModuleFederation} from '@nx/module-federation/webpack';
 import { ModuleFederationConfig } from '@nx/module-federation';
 
 import baseConfig from './module-federation.config';

packages/react/src/generators/host/files/webpack-module-federation-ssr-ts/webpack.server.config.ts__tmpl__

@@ -1,6 +1,6 @@
 import {composePlugins, withNx} from '@nx/webpack';
 import {withReact} from '@nx/react';
-import {withModuleFederationForSSR} from '@nx/react/module-federation';
+import {withModuleFederationForSSR} from '@nx/module-federation/webpack';
 
 import baseConfig from './module-federation.config';
 

packages/react/src/generators/host/files/webpack-module-federation-ssr/webpack.server.config.js__tmpl__

@@ -1,6 +1,6 @@
 const {composePlugins, withNx} = require('@nx/webpack');
 const {withReact} = require('@nx/react');
-const {withModuleFederationForSSR} = require('@nx/react/module-federation');
+const {withModuleFederationForSSR} = require('@nx/module-federation/webpack');
 
 const baseConfig = require('./module-federation.config');
 

packages/react/src/generators/host/files/webpack-module-federation-ts/webpack.config.prod.ts__tmpl__

@@ -1,6 +1,6 @@
 import { composePlugins, withNx } from '@nx/webpack';
 import { withReact } from '@nx/react';
-import { withModuleFederation } from '@nx/react/module-federation';
+import { withModuleFederation } from '@nx/module-federation/webpack';
 import { ModuleFederationConfig } from '@nx/module-federation';
 
 import baseConfig from './module-federation.config';

packages/react/src/generators/host/files/webpack-module-federation-ts/webpack.config.ts__tmpl__

@@ -1,6 +1,6 @@
 import {composePlugins, withNx} from '@nx/webpack';
 import {withReact} from '@nx/react';
-import {withModuleFederation} from '@nx/react/module-federation';
+import {withModuleFederation} from '@nx/module-federation/webpack';
 import { ModuleFederationConfig } from '@nx/module-federation';
 
 import baseConfig from './module-federation.config';

packages/react/src/generators/host/files/webpack-module-federation/webpack.config.js__tmpl__

@@ -1,6 +1,6 @@
 const { composePlugins, withNx } = require('@nx/webpack');
 const { withReact } = require('@nx/react');
-const { withModuleFederation } = require('@nx/react/module-federation');
+const { withModuleFederation } = require('@nx/module-federation/webpack');
 
 const baseConfig = require('./module-federation.config');
 

packages/react/src/generators/host/files/webpack-module-federation/webpack.config.prod.js__tmpl__

@@ -1,6 +1,6 @@
 const { composePlugins, withNx } = require('@nx/webpack');
 const { withReact } = require('@nx/react');
-const { withModuleFederation } = require('@nx/react/module-federation');
+const { withModuleFederation } = require('@nx/module-federation/webpack');
 
 const baseConfig = require('./module-federation.config');
 

packages/react/src/generators/remote/__snapshots__/remote.webpack.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`remote generator bundler=webpack should create the remote with the correct config files 1`] = `
 "const { composePlugins, withNx } = require('@nx/webpack');
 const { withReact } = require('@nx/react');
-const { withModuleFederation } = require('@nx/react/module-federation');
+const { withModuleFederation } = require('@nx/module-federation/webpack');
 
 const baseConfig = require('./module-federation.config');
 
@@ -39,7 +39,7 @@ module.exports = {
 exports[`remote generator bundler=webpack should create the remote with the correct config files when --js=true 1`] = `
 "const { composePlugins, withNx } = require('@nx/webpack');
 const { withReact } = require('@nx/react');
-const { withModuleFederation } = require('@nx/react/module-federation');
+const { withModuleFederation } = require('@nx/module-federation/webpack');
 
 const baseConfig = require('./module-federation.config');
 
@@ -75,7 +75,7 @@ module.exports = {
 exports[`remote generator bundler=webpack should create the remote with the correct config files when --typescriptConfiguration=true 1`] = `
 "import { composePlugins, withNx } from '@nx/webpack';
 import { withReact } from '@nx/react';
-import { withModuleFederation } from '@nx/react/module-federation';
+import { withModuleFederation } from '@nx/module-federation/webpack';
 
 import baseConfig from './module-federation.config';
 
@@ -122,7 +122,7 @@ export default config;
 exports[`remote generator bundler=webpack should generate correct remote with config files when using --ssr 1`] = `
 "const {composePlugins, withNx} = require('@nx/webpack');
 const {withReact} = require('@nx/react');
-const {withModuleFederationForSSR} = require('@nx/react/module-federation');
+const {withModuleFederationForSSR} = require('@nx/module-federation/webpack');
 
 const baseConfig = require("./module-federation.server.config");
 
@@ -156,7 +156,7 @@ module.exports = {
 exports[`remote generator bundler=webpack should generate correct remote with config files when using --ssr and --typescriptConfiguration=true 1`] = `
 "import { composePlugins, withNx } from '@nx/webpack';
 import { withReact } from '@nx/react';
-import { withModuleFederationForSSR } from '@nx/react/module-federation';
+import { withModuleFederationForSSR } from '@nx/module-federation/webpack';
 
 import baseConfig from './module-federation.server.config';
 

packages/react/src/generators/remote/files/webpack-module-federation-ssr-ts/webpack.server.config.ts__tmpl__

@@ -1,6 +1,6 @@
 import {composePlugins, withNx} from '@nx/webpack';
 import {withReact} from '@nx/react';
-import {withModuleFederationForSSR} from '@nx/react/module-federation';
+import {withModuleFederationForSSR} from '@nx/module-federation/webpack';
 
 import baseConfig from "./module-federation.server.config";
 

packages/react/src/generators/remote/files/webpack-module-federation-ssr/webpack.server.config.js__tmpl__

@@ -1,6 +1,6 @@
 const {composePlugins, withNx} = require('@nx/webpack');
 const {withReact} = require('@nx/react');
-const {withModuleFederationForSSR} = require('@nx/react/module-federation');
+const {withModuleFederationForSSR} = require('@nx/module-federation/webpack');
 
 const baseConfig = require("./module-federation.server.config");
 

packages/react/src/generators/remote/files/webpack-module-federation-ts/webpack.config.ts__tmpl__

@@ -1,6 +1,6 @@
 import {composePlugins, withNx} from '@nx/webpack';
 import {withReact} from '@nx/react';
-import {withModuleFederation} from '@nx/react/module-federation';
+import {withModuleFederation} from '@nx/module-federation/webpack';
 
 import baseConfig from './module-federation.config';
 

packages/react/src/generators/remote/files/webpack-module-federation/webpack.config.js__tmpl__

@@ -1,6 +1,6 @@
 const { composePlugins, withNx } = require('@nx/webpack');
 const { withReact } = require('@nx/react');
-const { withModuleFederation } = require('@nx/react/module-federation');
+const { withModuleFederation } = require('@nx/module-federation/webpack');
 
 const baseConfig = require('./module-federation.config');