@nx/react 19.7.0-beta.3 → 19.7.0-beta.5

package/src/generators/host/lib/add-module-federation-files.js

@@ -21,11 +21,15 @@ function addModuleFederationFiles(host, options, defaultRemoteManifest) {
     // Module federation requires bootstrap code to be dynamically imported.
     // Renaming original entry file so we can use `import(./bootstrap)` in
     // new entry file.
-    host.rename((0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, 'src/main.tsx')), (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, 'src/bootstrap.tsx')));
-    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, `../files/${options.js ? 'common' : 'common-ts'}`), options.appProjectRoot, templateVariables);
+    host.rename((0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)({ js: options.js, useJsx: options.bundler === 'rspack' }, 'src/main.tsx')), (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)({ js: options.js, useJsx: options.bundler === 'rspack' }, 'src/bootstrap.tsx')));
+    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, `../files/${options.js
+        ? options.bundler === 'rspack'
+            ? 'rspack-common'
+            : 'common'
+        : 'common-ts'}`), options.appProjectRoot, templateVariables);
     const pathToModuleFederationFiles = options.typescriptConfiguration
-        ? 'module-federation-ts'
-        : 'module-federation';
+        ? `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation-ts`
+        : `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation`;
     // New entry file is created here.
     (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, `../files/${pathToModuleFederationFiles}`), options.appProjectRoot, templateVariables);
     function deleteFileIfExists(host, filePath) {
@@ -33,17 +37,25 @@ function addModuleFederationFiles(host, options, defaultRemoteManifest) {
             host.delete(filePath);
         }
     }
-    function processWebpackConfig(options, host, fileName) {
-        const pathToWebpackConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, fileName);
-        deleteFileIfExists(host, pathToWebpackConfig);
+    function processBundlerConfigFile(options, host, fileName) {
+        const pathToBundlerConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, fileName);
+        deleteFileIfExists(host, pathToBundlerConfig);
     }
     if (options.typescriptConfiguration) {
-        processWebpackConfig(options, host, 'webpack.config.js');
-        processWebpackConfig(options, host, 'webpack.config.prod.js');
+        if (options.bundler === 'rspack') {
+            processBundlerConfigFile(options, host, 'rspack.config.js');
+            processBundlerConfigFile(options, host, 'rspack.config.prod.js');
+        }
+        else {
+            processBundlerConfigFile(options, host, 'webpack.config.js');
+            processBundlerConfigFile(options, host, 'webpack.config.prod.js');
+        }
     }
     if (options.dynamic) {
-        processWebpackConfig(options, host, 'webpack.config.prod.js');
-        processWebpackConfig(options, host, 'webpack.config.prod.ts');
+        processBundlerConfigFile(options, host, 'webpack.config.prod.js');
+        processBundlerConfigFile(options, host, 'webpack.config.prod.ts');
+        processBundlerConfigFile(options, host, 'rspack.config.prod.js');
+        processBundlerConfigFile(options, host, 'rspack.config.prod.ts');
         if (!host.exists(pathToMFManifest)) {
             host.write(pathToMFManifest, `{
         ${defaultRemoteManifest

package/src/generators/host/lib/setup-ssr-for-host.js

@@ -6,11 +6,14 @@ const versions_1 = require("../../../utils/versions");
 async function setupSsrForHost(tree, options, appName, defaultRemoteManifest) {
     const tasks = [];
     let project = (0, devkit_1.readProjectConfiguration)(tree, appName);
-    project.targets.serve.executor = '@nx/react:module-federation-ssr-dev-server';
+    project.targets.serve.executor =
+        options.bundler === 'rspack'
+            ? '@nx/rspack:module-federation-ssr-dev-server'
+            : '@nx/react:module-federation-ssr-dev-server';
     (0, devkit_1.updateProjectConfiguration)(tree, appName, project);
     const pathToModuleFederationSsrFiles = options.typescriptConfiguration
-        ? 'module-federation-ssr-ts'
-        : 'module-federation-ssr';
+        ? `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation-ssr-ts`
+        : `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation-ssr`;
     (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, `../files/${pathToModuleFederationSsrFiles}`), project.root, {
         ...options,
         static: !options?.dynamic,

package/src/generators/host/schema.d.ts

@@ -28,6 +28,7 @@ export interface Schema {
   typescriptConfiguration?: boolean;
   dynamic?: boolean;
   addPlugin?: boolean;
+  bundler?: 'rspack' | 'webpack';
 }
 
 export interface NormalizedSchema extends Schema {

package/src/generators/host/schema.json

@@ -183,6 +183,14 @@
       "type": "boolean",
       "default": false,
       "x-priority": "internal"
+    },
+    "bundler": {
+      "description": "The bundler to use.",
+      "type": "string",
+      "enum": ["rspack", "webpack"],
+      "x-prompt": "Which bundler do you want to use to build the application?",
+      "default": "rspack",
+      "x-priority": "important"
     }
   },
   "required": ["name"],

package/src/generators/remote/files/rspack-common/src/main.jsx__tmpl__

@@ -0,0 +1 @@
+import('./bootstrap');

package/src/generators/remote/files/rspack-common/src/remote-entry.js__tmpl__

@@ -0,0 +1 @@
+export { default } from './app/app';

package/src/generators/remote/files/rspack-module-federation/rspack.config.js__tmpl__

@@ -0,0 +1,16 @@
+const { composePlugins, withNx, withReact } = require('@nx/rspack');
+const { withModuleFederation } = require('@nx/rspack/module-federation');
+
+const baseConfig = require('./module-federation.config');
+
+const config = {
+  ...baseConfig,
+};
+
+// Nx plugins for rspack to build config object from Nx options and context.
+/**
+ * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support Module Federation
+ * The DTS Plugin can be enabled by setting dts: true
+ * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
+ */
+module.exports = composePlugins(withNx(), withReact(), withModuleFederation(config, { dts: false }));

package/src/generators/remote/files/rspack-module-federation/rspack.config.prod.js__tmpl__

@@ -0,0 +1 @@
+module.exports = require('./rspack.config');

package/src/generators/remote/files/rspack-module-federation-ssr/module-federation.server.config.js__tmpl__

@@ -0,0 +1,6 @@
+module.exports = {
+    name: '<%= projectName %>',
+   exposes: {
+     './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
+   },
+};

package/src/generators/remote/files/rspack-module-federation-ssr/rspack.server.config.js__tmpl__

@@ -0,0 +1,16 @@
+const {composePlugins, withNx, withReact} = require('@nx/rspack');
+const {withModuleFederationForSSR} = require('@nx/rspack/module-federation');
+
+const baseConfig = require("./module-federation.server.config");
+
+const defaultConfig = {
+    ...baseConfig,
+};
+
+// Nx plugins for rspack to build config object from Nx options and context.
+/**
+ * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support Module Federation
+ * The DTS Plugin can be enabled by setting dts: true
+ * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
+ */
+module.exports = composePlugins(withNx(), withReact({ssr: true}), withModuleFederationForSSR(defaultConfig, { dts: false }));

package/src/generators/remote/files/rspack-module-federation-ssr-ts/module-federation.server.config.ts__tmpl__

@@ -0,0 +1,10 @@
+import {ModuleFederationConfig} from '@nx/rspack/module-federation';
+
+const config: ModuleFederationConfig = {
+    name: '<%= projectName %>',
+    exposes: {
+        './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
+    },
+};
+
+export default config;

package/src/generators/remote/files/rspack-module-federation-ssr-ts/rspack.server.config.ts__tmpl__

@@ -0,0 +1,16 @@
+import {composePlugins, withNx, withReact} from '@nx/rspack';
+import {withModuleFederationForSSR} from '@nx/rspack/module-federation';
+
+import baseConfig from "./module-federation.server.config";
+
+const defaultConfig = {
+    ...baseConfig,
+};
+
+// Nx plugins for rspack to build config object from Nx options and context.
+/**
+ * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support Module Federation
+ * The DTS Plugin can be enabled by setting dts: true
+ * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
+ */
+export default composePlugins(withNx(), withReact({ssr: true}), withModuleFederationForSSR(defaultConfig, { dts: false }));

package/src/generators/remote/files/rspack-module-federation-ssr-ts/tsconfig.lint.json__tmpl__

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+        "node",
+        "@nx/react/typings/cssmodule.d.ts",
+        "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "rspack.config.ts",
+    "rspack.prod.config.ts"
+  ]
+}

package/src/generators/remote/files/rspack-module-federation-ts/module-federation.config.ts__tmpl__

@@ -0,0 +1,13 @@
+import {ModuleFederationConfig} from '@nx/rspack/module-federation';
+
+const config: ModuleFederationConfig = {
+    name: '<%= projectName %>',
+    <% if (dynamic) { %>
+   library: { type: 'var', name: '<%= projectName %>'},
+   <% } %>
+    exposes: {
+        './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
+    },
+};
+
+export default config;

package/src/generators/remote/files/rspack-module-federation-ts/rspack.config.prod.ts__tmpl__

@@ -0,0 +1 @@
+export default require('./rspack.config');

package/src/generators/remote/files/rspack-module-federation-ts/rspack.config.ts__tmpl__

@@ -0,0 +1,16 @@
+import {composePlugins, withNx, withReact} from '@nx/rspack';
+import {withModuleFederation} from '@nx/rspack/module-federation';
+
+import baseConfig from './module-federation.config';
+
+const config = {
+    ...baseConfig,
+};
+
+// Nx plugins for rspack to build config object from Nx options and context.
+/**
+ * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support Module Federation
+ * The DTS Plugin can be enabled by setting dts: true
+ * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
+ */
+export default composePlugins(withNx(), withReact(), withModuleFederation(config, { dts: false }));

package/src/generators/remote/files/rspack-module-federation-ts/tsconfig.lint.json__tmpl__

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+        "node",
+        "@nx/react/typings/cssmodule.d.ts",
+        "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "rspack.config.ts",
+    "rspack.prod.config.ts"
+  ]
+}

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

@@ -0,0 +1,9 @@
+module.exports = {
+   name: '<%= projectName %>',
+   <% if (dynamic) { %>
+   library: { type: 'var', name: '<%= projectName %>'},
+   <% } %>
+   exposes: {
+     './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
+   },
+};

package/src/generators/remote/files/webpack-module-federation-ssr/server.ts__tmpl__

@@ -0,0 +1,45 @@
+import * as path from 'path';
+import express from 'express';
+import cors from 'cors';
+
+import { handleRequest } from './src/main.server';
+
+const port = process.env['PORT'] || <%= port %>;
+const app = express();
+
+const browserDist = path.join(process.cwd(), '<%= browserBuildOutputPath %>');
+const serverDist = path.join(process.cwd(), '<%= serverBuildOutputPath %>');
+const indexPath = path.join(browserDist, 'index.html');
+
+app.use(cors());
+
+// Client-side static bundles
+app.get(
+  '*.*',
+  express.static(browserDist, {
+    maxAge: '1y',
+  })
+);
+
+// Static bundles for server-side module federation
+app.use('/server',
+  express.static(serverDist, {
+    maxAge: '1y'
+  })
+);
+
+app.use('*', handleRequest(indexPath));
+
+const server = app.listen(port, () => {
+  console.log(`Express server listening on http://localhost:${port}`);
+
+  /**
+   * DO NOT REMOVE IF USING @nx/react:module-federation-dev-ssr executor
+   * to serve your Host application with this Remote application.
+   * This message allows Nx to determine when the Remote is ready to be
+   * consumed by the Host.
+   */
+  process.send?.('nx.server.ready');
+});
+
+server.on('error', console.error);

package/src/generators/remote/files/webpack-module-federation-ssr-ts/server.ts__tmpl__

@@ -0,0 +1,45 @@
+import * as path from 'path';
+import express from 'express';
+import cors from 'cors';
+
+import { handleRequest } from './src/main.server';
+
+const port = process.env['PORT'] || <%= port %>;
+const app = express();
+
+const browserDist = path.join(process.cwd(), '<%= browserBuildOutputPath %>');
+const serverDist = path.join(process.cwd(), '<%= serverBuildOutputPath %>');
+const indexPath = path.join(browserDist, 'index.html');
+
+app.use(cors());
+
+// Client-side static bundles
+app.get(
+  '*.*',
+  express.static(browserDist, {
+    maxAge: '1y',
+  })
+);
+
+// Static bundles for server-side module federation
+app.use('/server',
+  express.static(serverDist, {
+    maxAge: '1y'
+  })
+);
+
+app.use('*', handleRequest(indexPath));
+
+const server = app.listen(port, () => {
+  console.log(`Express server listening on http://localhost:${port}`);
+
+  /**
+   * DO NOT REMOVE IF USING @nx/react:module-federation-dev-ssr executor
+   * to serve your Host application with this Remote application.
+   * This message allows Nx to determine when the Remote is ready to be
+   * consumed by the Host.
+   */
+  process.send?.('nx.server.ready');
+});
+
+server.on('error', console.error);

package/src/generators/remote/files/webpack-module-federation-ts/tsconfig.lint.json__tmpl__

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+        "node",
+        "@nx/react/typings/cssmodule.d.ts",
+        "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "webpack.config.ts",
+    "webpack.prod.config.ts"
+  ]
+}

package/src/generators/remote/lib/setup-ssr-for-remote.js

@@ -7,8 +7,8 @@ async function setupSsrForRemote(tree, options, appName) {
     const tasks = [];
     const project = (0, devkit_1.readProjectConfiguration)(tree, appName);
     const pathToModuleFederationSsrFiles = options.typescriptConfiguration
-        ? 'module-federation-ssr-ts'
-        : 'module-federation-ssr';
+        ? `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation-ssr-ts`
+        : `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation-ssr`;
     (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, `../files/${pathToModuleFederationSsrFiles}`), project.root, {
         ...options,
         port: Number(options?.devServerPort) || 4200,

package/src/generators/remote/lib/update-host-with-remote.js

@@ -40,11 +40,15 @@ function findAppComponentPath(host, sourceRoot) {
         'app/app.tsx',
         'app/App.tsx',
         'app/app.js',
+        'app/app.jsx',
         'app/App.js',
+        'app/App.jsx',
         'app.tsx',
         'App.tsx',
         'app.js',
         'App.js',
+        'app.jsx',
+        'App.jsx',
     ];
     for (const loc of locations) {
         if (host.exists((0, devkit_1.joinPathFragments)(sourceRoot, loc))) {

package/src/generators/remote/remote.js

@@ -23,16 +23,22 @@ function addModuleFederationFiles(host, options) {
         ...options,
         tmpl: '',
     };
-    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, `./files/${options.js ? 'common' : 'common-ts'}`), options.appProjectRoot, templateVariables);
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, `./files/${options.js
+        ? options.bundler === 'rspack'
+            ? 'rspack-common'
+            : 'common'
+        : 'common-ts'}`), options.appProjectRoot, templateVariables);
     const pathToModuleFederationFiles = options.typescriptConfiguration
-        ? 'module-federation-ts'
-        : 'module-federation';
+        ? `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation-ts`
+        : `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation`;
     (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, `./files/${pathToModuleFederationFiles}`), options.appProjectRoot, templateVariables);
     if (options.typescriptConfiguration) {
-        const pathToWebpackConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'webpack.config.js');
-        const pathToWebpackProdConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'webpack.config.prod.js');
-        if (host.exists(pathToWebpackConfig)) {
-            host.delete(pathToWebpackConfig);
+        const pathToBundlerConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, options.bundler === 'rspack' ? 'rspack.config.js' : 'webpack.config.js');
+        const pathToWebpackProdConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, options.bundler === 'rspack'
+            ? 'rspack.config.prod.js'
+            : 'webpack.config.prod.js');
+        if (host.exists(pathToBundlerConfig)) {
+            host.delete(pathToBundlerConfig);
         }
         if (host.exists(pathToWebpackProdConfig)) {
             host.delete(pathToWebpackProdConfig);
@@ -57,6 +63,7 @@ async function remoteGeneratorInternal(host, schema) {
         dynamic: schema.dynamic ?? false,
         // TODO(colum): remove when MF works with Crystal
         addPlugin: false,
+        bundler: schema.bundler ?? 'rspack',
     };
     if (options.dynamic) {
         // Dynamic remotes generate with library { type: 'var' } by default.
@@ -68,8 +75,6 @@ async function remoteGeneratorInternal(host, schema) {
     }
     const initAppTask = await (0, application_1.default)(host, {
         ...options,
-        // Only webpack works with module federation for now.
-        bundler: 'webpack',
         skipFormat: true,
     });
     tasks.push(initAppTask);
@@ -79,7 +84,7 @@ async function remoteGeneratorInternal(host, schema) {
     // Module federation requires bootstrap code to be dynamically imported.
     // Renaming original entry file so we can use `import(./bootstrap)` in
     // new entry file.
-    host.rename((0, path_1.join)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, 'src/main.tsx')), (0, path_1.join)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, 'src/bootstrap.tsx')));
+    host.rename((0, path_1.join)(options.appProjectRoot, (0, maybe_js_1.maybeJs)({ js: options.js, useJsx: options.bundler === 'rspack' }, 'src/main.tsx')), (0, path_1.join)(options.appProjectRoot, (0, maybe_js_1.maybeJs)({ js: options.js, useJsx: options.bundler === 'rspack' }, 'src/bootstrap.tsx')));
     addModuleFederationFiles(host, options);
     (0, update_module_federation_project_1.updateModuleFederationProject)(host, options);
     (0, setup_tspath_for_remote_1.setupTspathForRemote)(host, options);
@@ -88,12 +93,20 @@ async function remoteGeneratorInternal(host, schema) {
             project: options.projectName,
             serverPort: options.devServerPort,
             skipFormat: true,
+            bundler: options.bundler,
         });
         tasks.push(setupSsrTask);
         const setupSsrForRemoteTask = await (0, setup_ssr_for_remote_1.setupSsrForRemote)(host, options, options.projectName);
         tasks.push(setupSsrForRemoteTask);
         const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.projectName);
-        projectConfig.targets.server.options.webpackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `webpack.server.config.${options.typescriptConfiguration ? 'ts' : 'js'}`);
+        if (options.bundler === 'rspack') {
+            projectConfig.targets.server.executor = '@nx/rspack:rspack';
+            projectConfig.targets.server.options.rspackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `rspack.server.config.${options.typescriptConfiguration ? 'ts' : 'js'}`);
+            delete projectConfig.targets.server.options.webpackConfig;
+        }
+        else {
+            projectConfig.targets.server.options.webpackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `webpack.server.config.${options.typescriptConfiguration ? 'ts' : 'js'}`);
+        }
         (0, devkit_1.updateProjectConfiguration)(host, options.projectName, projectConfig);
     }
     if (!options.setParserOptionsProject) {

package/src/generators/remote/schema.d.ts

@@ -28,6 +28,7 @@ export interface Schema {
   unitTestRunner: 'jest' | 'vitest' | 'none';
   typescriptConfiguration?: boolean;
   dynamic?: boolean;
+  bundler?: 'rspack' | 'webpack';
 }
 
 export interface NormalizedSchema extends ApplicationNormalizedSchema {

package/src/generators/remote/schema.json

@@ -182,6 +182,14 @@
       "type": "boolean",
       "default": false,
       "x-priority": "internal"
+    },
+    "bundler": {
+      "description": "The bundler to use.",
+      "type": "string",
+      "enum": ["rspack", "webpack"],
+      "x-prompt": "Which bundler do you want to use to build the application?",
+      "default": "rspack",
+      "x-priority": "important"
     }
   },
   "required": ["name"],

package/src/generators/setup-ssr/schema.d.ts

@@ -4,4 +4,5 @@ export interface Schema {
   serverPort?: number;
   skipFormat?: boolean;
   extraInclude?: string[];
+  bundler?: 'rspack' | 'webpack';
 }

package/src/generators/setup-ssr/schema.json

@@ -41,6 +41,12 @@
       "hidden": true,
       "description": "Extra include entries in tsconfig.",
       "default": []
+    },
+    "bundler": {
+      "description": "The bundler to use.",
+      "type": "string",
+      "enum": ["rspack", "webpack"],
+      "default": "webpack"
     }
   },
   "required": ["project"],

package/src/generators/setup-ssr/setup-ssr.js

@@ -69,7 +69,9 @@ async function setupSsrGenerator(tree, options) {
         ...projectConfig.targets,
         server: {
             dependsOn: ['build'],
-            executor: '@nx/webpack:webpack',
+            executor: options.bundler === 'rspack'
+                ? '@nx/rspack:rspack'
+                : '@nx/webpack:webpack',
             outputs: ['{options.outputPath}'],
             defaultConfiguration: 'production',
             options: {
@@ -81,7 +83,11 @@ async function setupSsrGenerator(tree, options) {
                 compiler: 'babel',
                 externalDependencies: 'all',
                 outputHashing: 'none',
-                webpackConfig: (0, devkit_1.joinPathFragments)(projectRoot, 'webpack.config.js'),
+                ...(options.bundler === 'rspack'
+                    ? { rspackConfig: (0, devkit_1.joinPathFragments)(projectRoot, 'rspack.config.js') }
+                    : {
+                        webpackConfig: (0, devkit_1.joinPathFragments)(projectRoot, 'webpack.config.js'),
+                    }),
             },
             configurations: {
                 development: {
@@ -117,7 +123,9 @@ async function setupSsrGenerator(tree, options) {
             },
         },
         serve: {
-            executor: '@nx/webpack:ssr-dev-server',
+            executor: options.bundler === 'rspack'
+                ? '@nx/rspack:ssr-dev-server'
+                : '@nx/webpack:ssr-dev-server',
             defaultConfiguration: 'development',
             options: {
                 browserTarget: `${options.project}:build:development`,

package/src/module-federation/with-module-federation-ssr.js

@@ -10,13 +10,13 @@ async function withModuleFederationForSSR(options, configOverride) {
         isServer: true,
     });
     return (config) => {
-        config.target = false;
+        config.target = 'async-node';
         config.output.uniqueName = options.name;
         config.optimization = {
             ...(config.optimization ?? {}),
             runtimeChunk: false,
         };
-        config.plugins.push(new (require('@module-federation/node').UniversalFederationPlugin)({
+        config.plugins.push(new (require('@module-federation/enhanced').ModuleFederationPlugin)({
             name: options.name,
             filename: 'remoteEntry.js',
             exposes: options.exposes,
@@ -24,10 +24,6 @@ async function withModuleFederationForSSR(options, configOverride) {
             shared: {
                 ...sharedDependencies,
             },
-            library: {
-                type: 'commonjs-module',
-            },
-            isServer: true,
             /**
              * Apply user-defined config overrides
              */
@@ -38,7 +34,11 @@ async function withModuleFederationForSSR(options, configOverride) {
                     ...(configOverride?.runtimePlugins ?? []),
                     require.resolve('@nx/webpack/src/utils/module-federation/plugins/runtime-library-control.plugin.js'),
                 ]
-                : configOverride?.runtimePlugins,
+                : [
+                    ...(configOverride?.runtimePlugins ?? []),
+                    require.resolve('@module-federation/node/runtimePlugin'),
+                ],
+            virtualRuntimeEntry: true,
         }, {}), sharedLibraries.getReplacementPlugin());
         // The env var is only set from the module-federation-dev-server
         // Attach the runtime plugin

package/src/module-federation/with-module-federation.js

@@ -60,6 +60,7 @@ async function withModuleFederation(options, configOverride) {
                     require.resolve('@nx/webpack/src/utils/module-federation/plugins/runtime-library-control.plugin.js'),
                 ]
                 : configOverride?.runtimePlugins,
+            virtualRuntimeEntry: true,
         }), sharedLibraries.getReplacementPlugin());
         // The env var is only set from the module-federation-dev-server
         // Attach the runtime plugin

package/src/rules/update-module-federation-project.d.ts

@@ -6,4 +6,5 @@ export declare function updateModuleFederationProject(host: Tree, options: {
     devServerPort?: number;
     typescriptConfiguration?: boolean;
     dynamic?: boolean;
+    bundler?: 'rspack' | 'webpack';
 }): GeneratorCallback;