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

… package

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');
 

packages/react/src/migrations/update-20-2-0/migrate-with-mf-import-to-new-package.spec.ts

@@ -0,0 +1,138 @@
+import { type Tree } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import migrateWithMfImport from './migrate-with-mf-import-to-new-package';
+
+describe('migrate-with-mf-import-to-new-package', () => {
+  let tree: Tree;
+
+  beforeEach(() => {
+    tree = createTreeWithEmptyWorkspace();
+    tree.write(
+      'apps/shell/project.json',
+      JSON.stringify({
+        name: 'shell',
+        root: 'apps/shell',
+        sourceRoot: 'apps/shell/src',
+        projectType: 'application',
+        targets: {
+          serve: {
+            executor: '@nx/react:module-federation-dev-server',
+            options: {},
+          },
+        },
+      })
+    );
+  });
+
+  it('should migrate the import correctly for withMf', async () => {
+    // ARRANGE
+    tree.write(
+      'apps/shell/webpack.config.ts',
+      `import { withModuleFederation } from '@nx/react/module-federation';`
+    );
+
+    // ACT
+    await migrateWithMfImport(tree);
+
+    // ASSERT
+    expect(tree.read('apps/shell/webpack.config.ts', 'utf-8'))
+      .toMatchInlineSnapshot(`
+      "import { withModuleFederation } from '@nx/module-federation/webpack';
+      "
+    `);
+  });
+
+  it('should migrate the require correctly for withMf', async () => {
+    // ARRANGE
+    tree.write(
+      'apps/shell/webpack.config.js',
+      `const { withModuleFederation } = require('@nx/react/module-federation');`
+    );
+
+    // ACT
+    await migrateWithMfImport(tree);
+
+    // ASSERT
+    expect(tree.read('apps/shell/webpack.config.js', 'utf-8'))
+      .toMatchInlineSnapshot(`
+      "const { withModuleFederation } = require('@nx/module-federation/webpack');
+      "
+    `);
+  });
+
+  it('should migrate the import correctly for withMfSSR', async () => {
+    // ARRANGE
+    tree.write(
+      'apps/shell/webpack.config.ts',
+      `import { withModuleFederationForSSR } from '@nx/react/module-federation';`
+    );
+
+    // ACT
+    await migrateWithMfImport(tree);
+
+    // ASSERT
+    expect(tree.read('apps/shell/webpack.config.ts', 'utf-8'))
+      .toMatchInlineSnapshot(`
+      "import { withModuleFederationForSSR } from '@nx/module-federation/webpack';
+      "
+    `);
+  });
+
+  it('should migrate the require correctly for withMfSSR', async () => {
+    // ARRANGE
+    tree.write(
+      'apps/shell/webpack.config.js',
+      `const { withModuleFederationForSSR } = require('@nx/react/module-federation');`
+    );
+
+    // ACT
+    await migrateWithMfImport(tree);
+
+    // ASSERT
+    expect(tree.read('apps/shell/webpack.config.js', 'utf-8'))
+      .toMatchInlineSnapshot(`
+      "const { withModuleFederationForSSR } = require('@nx/module-federation/webpack');
+      "
+    `);
+  });
+
+  describe('idempotent', () => {
+    it('should migrate the import correctly for withMf even when run twice', async () => {
+      // ARRANGE
+      tree.write(
+        'apps/shell/webpack.config.ts',
+        `import { withModuleFederation } from '@nx/react/module-federation';`
+      );
+
+      // ACT
+      await migrateWithMfImport(tree);
+      await migrateWithMfImport(tree);
+
+      // ASSERT
+      expect(tree.read('apps/shell/webpack.config.ts', 'utf-8'))
+        .toMatchInlineSnapshot(`
+        "import { withModuleFederation } from '@nx/module-federation/webpack';
+        "
+      `);
+    });
+
+    it('should migrate the require correctly for withMfSSR even when run twice', async () => {
+      // ARRANGE
+      tree.write(
+        'apps/shell/webpack.config.js',
+        `const { withModuleFederationForSSR } = require('@nx/react/module-federation');`
+      );
+
+      // ACT
+      await migrateWithMfImport(tree);
+      await migrateWithMfImport(tree);
+
+      // ASSERT
+      expect(tree.read('apps/shell/webpack.config.js', 'utf-8'))
+        .toMatchInlineSnapshot(`
+        "const { withModuleFederationForSSR } = require('@nx/module-federation/webpack');
+        "
+      `);
+    });
+  });
+});