@nx/react 20.2.0-beta.2 → 20.2.0-beta.3

package/migrations.json

@@ -29,6 +29,18 @@
       "version": "19.6.1-beta.0",
       "description": "Ensure Target Defaults are set correctly for Module Federation.",
       "factory": "./src/migrations/update-19-6-1/ensure-depends-on-for-mf"
+    },
+    "update-20-2-0-update-module-federation-config-import": {
+      "cli": "nx",
+      "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": {
@@ -152,6 +164,27 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "20.2.0": {
+      "version": "20.2.0-beta.3",
+      "packages": {
+        "@module-federation/enhanced": {
+          "version": "0.7.6",
+          "alwaysAddToPackageJson": false
+        },
+        "@module-federation/runtime": {
+          "version": "0.7.6",
+          "alwaysAddToPackageJson": false
+        },
+        "@module-federation/sdk": {
+          "version": "0.7.6",
+          "alwaysAddToPackageJson": false
+        },
+        "@module-federation/node": {
+          "version": "2.6.11",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/module-federation.d.ts

@@ -1,4 +1,6 @@
-import { withModuleFederation } from './src/module-federation/with-module-federation';
-import { withModuleFederationForSSR } from './src/module-federation/with-module-federation-ssr';
-export { withModuleFederation };
-export { withModuleFederationForSSR };
+import { withModuleFederation } from '@nx/module-federation/webpack';
+import { withModuleFederationForSSR } from '@nx/module-federation/webpack';
+/**
+ * @deprecated Use `@nx/module-federation/webpack` instead. This will be removed in Nx v22.
+ */
+export { withModuleFederation, withModuleFederationForSSR };

package/module-federation.js

@@ -1,12 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withModuleFederationForSSR = exports.withModuleFederation = void 0;
-const with_module_federation_1 = require("./src/module-federation/with-module-federation");
-Object.defineProperty(exports, "withModuleFederation", { enumerable: true, get: function () { return with_module_federation_1.withModuleFederation; } });
-const with_module_federation_ssr_1 = require("./src/module-federation/with-module-federation-ssr");
-Object.defineProperty(exports, "withModuleFederationForSSR", { enumerable: true, get: function () { return with_module_federation_ssr_1.withModuleFederationForSSR; } });
+const webpack_1 = require("@nx/module-federation/webpack");
+Object.defineProperty(exports, "withModuleFederation", { enumerable: true, get: function () { return webpack_1.withModuleFederation; } });
+const webpack_2 = require("@nx/module-federation/webpack");
+Object.defineProperty(exports, "withModuleFederationForSSR", { enumerable: true, get: function () { return webpack_2.withModuleFederationForSSR; } });
 // Support for older generated code: `const withModuleFederation = require('@nx/react/module-federation')`
-module.exports = with_module_federation_1.withModuleFederation;
+/**
+ * @deprecated Use `@nx/module-federation/webpack` instead. This will be removed in Nx v22.
+ */
+module.exports = webpack_1.withModuleFederation;
 // Allow newer generated code to work: `const { withModuleFederation } = require(...)`;
-module.exports.withModuleFederation = with_module_federation_1.withModuleFederation;
-module.exports.withModuleFederationForSSR = with_module_federation_ssr_1.withModuleFederationForSSR;
+/**
+ * @deprecated Use `@nx/module-federation/webpack` instead. This will be removed in Nx v22.
+ */
+module.exports.withModuleFederation = webpack_1.withModuleFederation;
+/**
+ * @deprecated Use `@nx/module-federation/webpack` instead. This will be removed in Nx v22.
+ */
+module.exports.withModuleFederationForSSR = webpack_2.withModuleFederationForSSR;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "20.2.0-beta.2",
+  "version": "20.2.0-beta.3",
   "private": false,
   "description": "The React plugin for Nx contains executors and generators for managing React applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Vitest, Playwright, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -38,11 +38,11 @@
     "minimatch": "9.0.3",
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
-    "@module-federation/enhanced": "0.6.9",
-    "@nx/devkit": "20.2.0-beta.2",
-    "@nx/js": "20.2.0-beta.2",
-    "@nx/eslint": "20.2.0-beta.2",
-    "@nx/web": "20.2.0-beta.2",
+    "@nx/devkit": "20.2.0-beta.3",
+    "@nx/js": "20.2.0-beta.3",
+    "@nx/eslint": "20.2.0-beta.3",
+    "@nx/web": "20.2.0-beta.3",
+    "@nx/module-federation": "20.2.0-beta.3",
     "express": "^4.19.2",
     "http-proxy-middleware": "^3.0.3"
   },

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js

@@ -4,13 +4,11 @@ exports.default = moduleFederationDevServer;
 const devkit_1 = require("@nx/devkit");
 const dev_server_impl_1 = require("@nx/webpack/src/executors/dev-server/dev-server.impl");
 const file_server_impl_1 = require("@nx/web/src/executors/file-server/file-server.impl");
-const module_federation_1 = require("@nx/webpack/src/utils/module-federation");
+const utils_1 = require("@nx/module-federation/src/utils");
 const async_iterable_1 = require("@nx/devkit/src/utils/async-iterable");
 const wait_for_port_open_1 = require("@nx/web/src/utils/wait-for-port-open");
 const fs_1 = require("fs");
 const path_1 = require("path");
-const start_remote_proxies_1 = require("@nx/webpack/src/utils/module-federation/start-remote-proxies");
-const parse_static_remotes_config_1 = require("@nx/webpack/src/utils/module-federation/parse-static-remotes-config");
 const build_static_remotes_1 = require("../../utils/build-static.remotes");
 function getBuildOptions(buildTarget, context) {
     const target = (0, devkit_1.parseTargetString)(buildTarget, context);
@@ -120,9 +118,9 @@ async function* moduleFederationDevServer(options, context) {
     if (!options.isInitialHost) {
         return yield* currIter;
     }
-    const moduleFederationConfig = (0, module_federation_1.getModuleFederationConfig)(buildOptions.tsConfig, context.root, p.root, 'react');
+    const moduleFederationConfig = (0, utils_1.getModuleFederationConfig)(buildOptions.tsConfig, context.root, p.root, 'react');
     const remoteNames = options.devRemotes?.map((r) => typeof r === 'string' ? r : r.remoteName);
-    const remotes = (0, module_federation_1.getRemotes)(remoteNames, options.skipRemotes, moduleFederationConfig, {
+    const remotes = (0, utils_1.getRemotes)(remoteNames, options.skipRemotes, moduleFederationConfig, {
         projectName: context.projectName,
         projectGraph: context.projectGraph,
         root: context.root,
@@ -133,11 +131,11 @@ async function* moduleFederationDevServer(options, context) {
         ...(remotes.devRemotes.map((r) => typeof r === 'string' ? r : r.remoteName) ?? []).map((r) => r.replace(/-/g, '_')),
         p.name.replace(/-/g, '_'),
     ]);
-    const staticRemotesConfig = (0, parse_static_remotes_config_1.parseStaticRemotesConfig)([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
+    const staticRemotesConfig = (0, utils_1.parseStaticRemotesConfig)([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
     const mappedLocationsOfStaticRemotes = await (0, build_static_remotes_1.buildStaticRemotes)(staticRemotesConfig, nxBin, context, options);
     const devRemoteIters = await startRemotes(remotes.devRemotes, context, options, 'serve');
     const staticRemotesIter = startStaticRemotesFileServer(staticRemotesConfig, context, options);
-    (0, start_remote_proxies_1.startRemoteProxies)(staticRemotesConfig, mappedLocationsOfStaticRemotes, options.ssl
+    (0, utils_1.startRemoteProxies)(staticRemotesConfig, mappedLocationsOfStaticRemotes, options.ssl
         ? {
             pathToCert: (0, path_1.join)(devkit_1.workspaceRoot, options.sslCert),
             pathToKey: (0, path_1.join)(devkit_1.workspaceRoot, options.sslKey),

package/src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl.js

@@ -4,14 +4,12 @@ exports.default = moduleFederationSsrDevServer;
 const devkit_1 = require("@nx/devkit");
 const ssr_dev_server_impl_1 = require("@nx/webpack/src/executors/ssr-dev-server/ssr-dev-server.impl");
 const path_1 = require("path");
-const module_federation_1 = require("@nx/webpack/src/utils/module-federation");
+const utils_1 = require("@nx/module-federation/src/utils");
 const async_iterable_1 = require("@nx/devkit/src/utils/async-iterable");
 const child_process_1 = require("child_process");
 const fs_1 = require("fs");
-const parse_static_remotes_config_1 = require("@nx/webpack/src/utils/module-federation/parse-static-remotes-config");
 const file_server_impl_1 = require("@nx/web/src/executors/file-server/file-server.impl");
 const cache_directory_1 = require("nx/src/utils/cache-directory");
-const start_ssr_remote_proxies_1 = require("@nx/webpack/src/utils/module-federation/start-ssr-remote-proxies");
 const wait_for_port_open_1 = require("@nx/web/src/utils/wait-for-port-open");
 function normalizeOptions(options) {
     return {
@@ -155,9 +153,9 @@ async function* moduleFederationSsrDevServer(ssrDevServerOptions, context) {
     if (!options.isInitialHost) {
         return yield* iter;
     }
-    const moduleFederationConfig = (0, module_federation_1.getModuleFederationConfig)(buildOptions.tsConfig, context.root, projectConfig.root, 'react');
+    const moduleFederationConfig = (0, utils_1.getModuleFederationConfig)(buildOptions.tsConfig, context.root, projectConfig.root, 'react');
     const remoteNames = options.devRemotes?.map((remote) => typeof remote === 'string' ? remote : remote.remoteName);
-    const remotes = (0, module_federation_1.getRemotes)(remoteNames, options.skipRemotes, moduleFederationConfig, {
+    const remotes = (0, utils_1.getRemotes)(remoteNames, options.skipRemotes, moduleFederationConfig, {
         projectName: context.projectName,
         projectGraph: context.projectGraph,
         root: context.root,
@@ -167,11 +165,11 @@ async function* moduleFederationSsrDevServer(ssrDevServerOptions, context) {
         ...(remotes.devRemotes.map((r) => typeof r === 'string' ? r : r.remoteName) ?? []).map((r) => r.replace(/-/g, '_')),
         projectConfig.name.replace(/-/g, '_'),
     ]);
-    const staticRemotesConfig = (0, parse_static_remotes_config_1.parseStaticSsrRemotesConfig)([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
+    const staticRemotesConfig = (0, utils_1.parseStaticSsrRemotesConfig)([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
     const mappedLocationsOfStaticRemotes = await buildSsrStaticRemotes(staticRemotesConfig, nxBin, context, options);
     const devRemoteIters = await startRemotes(remotes.devRemotes, context, options);
     const staticRemotesIter = startSsrStaticRemotesFileServer(staticRemotesConfig, context, options);
-    (0, start_ssr_remote_proxies_1.startSsrRemoteProxies)(staticRemotesConfig, mappedLocationsOfStaticRemotes, options.ssl
+    (0, utils_1.startSsrRemoteProxies)(staticRemotesConfig, mappedLocationsOfStaticRemotes, options.ssl
         ? {
             pathToCert: options.sslCert,
             pathToKey: options.sslKey,

package/src/executors/module-federation-static-server/module-federation-static-server.impl.d.ts

@@ -1,7 +1,7 @@
 import { ModuleFederationStaticServerSchema } from './schema';
 import { ModuleFederationDevServerOptions } from '../module-federation-dev-server/schema';
 import { ExecutorContext } from 'nx/src/config/misc-interfaces';
-import { StaticRemotesConfig } from '@nx/webpack/src/utils/module-federation/parse-static-remotes-config';
+import { StaticRemotesConfig } from '@nx/module-federation/src/utils';
 export declare function startProxies(staticRemotesConfig: StaticRemotesConfig, hostServeOptions: ModuleFederationDevServerOptions, mappedLocationOfHost: string, mappedLocationsOfRemotes: Record<string, string>, sslOptions?: {
     pathToCert: string;
     pathToKey: string;

package/src/executors/module-federation-static-server/module-federation-static-server.impl.js

@@ -5,8 +5,7 @@ exports.default = moduleFederationStaticServer;
 const path_1 = require("path");
 const devkit_1 = require("@nx/devkit");
 const fs_1 = require("fs");
-const module_federation_1 = require("@nx/webpack/src/utils/module-federation");
-const parse_static_remotes_config_1 = require("@nx/webpack/src/utils/module-federation/parse-static-remotes-config");
+const utils_1 = require("@nx/module-federation/src/utils");
 const build_static_remotes_1 = require("../../utils/build-static.remotes");
 const child_process_1 = require("child_process");
 const process = require("node:process");
@@ -164,13 +163,13 @@ async function* moduleFederationStaticServer(schema, context) {
     // Get the remotes from the module federation config
     const p = context.projectsConfigurations.projects[context.projectName];
     const options = getBuildAndServeOptionsFromServeTarget(schema.serveTarget, context);
-    const moduleFederationConfig = (0, module_federation_1.getModuleFederationConfig)(options.buildOptions.tsConfig, context.root, p.root, 'react');
-    const remotes = (0, module_federation_1.getRemotes)([], options.serveOptions.skipRemotes, moduleFederationConfig, {
+    const moduleFederationConfig = (0, utils_1.getModuleFederationConfig)(options.buildOptions.tsConfig, context.root, p.root, 'react');
+    const remotes = (0, utils_1.getRemotes)([], options.serveOptions.skipRemotes, moduleFederationConfig, {
         projectName: context.projectName,
         projectGraph: context.projectGraph,
         root: context.root,
     }, options.pathToManifestFile);
-    const staticRemotesConfig = (0, parse_static_remotes_config_1.parseStaticRemotesConfig)([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
+    const staticRemotesConfig = (0, utils_1.parseStaticRemotesConfig)([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
     options.serveOptions.staticRemotesPort ??= remotes.staticRemotePort;
     const mappedLocationsOfStaticRemotes = await (0, build_static_remotes_1.buildStaticRemotes)(staticRemotesConfig, nxBin, context, options.serveOptions);
     // Build the host

package/src/generators/application/application.js

@@ -15,7 +15,6 @@ const devkit_1 = require("@nx/devkit");
 const init_1 = require("../init/init");
 const eslint_1 = require("@nx/eslint");
 const versions_1 = require("../../utils/versions");
-const maybe_js_1 = require("../../utils/maybe-js");
 const install_common_dependencies_1 = require("./lib/install-common-dependencies");
 const create_ts_config_1 = require("../../utils/create-ts-config");
 const add_swc_dependencies_1 = require("@nx/js/src/utils/swc/add-swc-dependencies");
@@ -28,7 +27,6 @@ const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-projec
 const setup_tailwind_1 = require("../setup-tailwind/setup-tailwind");
 const flat_config_1 = require("@nx/eslint/src/utils/flat-config");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
-const add_project_root_to_rspack_plugin_excludes_1 = require("./lib/add-project-root-to-rspack-plugin-excludes");
 async function addLinting(host, options) {
     const tasks = [];
     if (options.linter === eslint_1.Linter.EsLint) {
@@ -116,6 +114,15 @@ async function applicationGeneratorInternal(host, schema) {
             tasks.push(ensureDependencies(host, { uiFramework: 'react' }));
         }
     }
+    else if (options.bundler === 'rspack') {
+        const { rspackInitGenerator } = (0, devkit_1.ensurePackage)('@nx/rspack', versions_1.nxRspackVersion);
+        const rspackInitTask = await rspackInitGenerator(host, {
+            ...options,
+            addPlugin: false,
+            skipFormat: true,
+        });
+        tasks.push(rspackInitTask);
+    }
     if (!options.rootProject) {
         (0, create_ts_config_1.extractTsConfigBase)(host);
     }
@@ -163,22 +170,6 @@ async function applicationGeneratorInternal(host, schema) {
             plugins: ['react()'],
         }, false);
     }
-    else if (options.bundler === 'rspack') {
-        const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/rspack', versions_1.nxRspackVersion);
-        const rspackTask = await configurationGenerator(host, {
-            project: options.projectName,
-            main: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)({
-                js: options.js,
-                useJsx: true,
-            }, `src/main.tsx`)),
-            tsConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
-            target: 'web',
-            newProject: true,
-            framework: 'react',
-        });
-        tasks.push(rspackTask);
-        (0, add_project_root_to_rspack_plugin_excludes_1.addProjectRootToRspackPluginExcludesIfExists)(host, options.appProjectRoot);
-    }
     if (options.bundler !== 'vite' && options.unitTestRunner === 'vitest') {
         const { createOrEditViteConfig, vitestGenerator } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
         const vitestTask = await vitestGenerator(host, {

package/src/generators/application/files/base-rspack/rspack.config.js__tmpl__

@@ -0,0 +1,53 @@
+<%_ if (rspackPluginOptions) { _%>
+const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin');
+const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin');
+const { join } = require('path');
+
+module.exports = {
+  output: {
+    path: join(__dirname, '<%= offsetFromRoot %><%= rspackPluginOptions.outputPath %>'),
+  },
+  devServer: {
+    port: 4200,
+    historyApiFallback: {
+      index: '/index.html',
+      disableDotRule: true,
+      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
+    },
+  },
+  plugins: [
+    new NxAppRspackPlugin({
+      tsConfig: '<%= rspackPluginOptions.tsConfig %>',
+      main: '<%= rspackPluginOptions.main %>',
+      index: '<%= rspackPluginOptions.index %>',
+      baseHref: '<%= rspackPluginOptions.baseHref %>',
+      assets: <%- JSON.stringify(rspackPluginOptions.assets) %>,
+      styles: <%- JSON.stringify(rspackPluginOptions.styles) %>,
+      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
+      optimization: process.env['NODE_ENV'] === 'production',
+    }),
+    new NxReactRspackPlugin({
+      // Uncomment this line if you don't want to use SVGR
+      // See: https://react-svgr.com/
+      // svgr: false
+    }),
+  ],
+};
+<%_ } else { _%>
+const { composePlugins, withNx, withReact } = require('@nx/rspack');
+
+// Nx plugins for rspack.
+module.exports = composePlugins(
+  withNx(),
+  withReact({
+    // Uncomment this line if you don't want to use SVGR
+    // See: https://react-svgr.com/
+    // svgr: false
+  }),
+  (config) => {
+    // Update the rspack config as needed here.
+    // e.g. `config.plugins.push(new MyPlugin())`
+    return config;
+  }
+);
+<%_ } _%>

package/src/generators/application/lib/add-e2e.js

@@ -6,10 +6,12 @@ const web_1 = require("@nx/web");
 const versions_1 = require("../../../utils/versions");
 const has_webpack_plugin_1 = require("../../../utils/has-webpack-plugin");
 const has_vite_plugin_1 = require("../../../utils/has-vite-plugin");
+const has_rspack_plugin_1 = require("../../../utils/has-rspack-plugin");
 const find_plugin_for_config_file_1 = require("@nx/devkit/src/utils/find-plugin-for-config-file");
 const target_defaults_utils_1 = require("@nx/devkit/src/generators/target-defaults-utils");
 async function addE2e(tree, options) {
     const hasNxBuildPlugin = (options.bundler === 'webpack' && (0, has_webpack_plugin_1.hasWebpackPlugin)(tree)) ||
+        (options.bundler === 'rspack' && (0, has_rspack_plugin_1.hasRspackPlugin)(tree)) ||
         (options.bundler === 'vite' && (0, has_vite_plugin_1.hasVitePlugin)(tree));
     let e2eWebServerInfo = {
         e2eWebServerAddress: `http://localhost:${options.devServerPort ?? 4200}`,

package/src/generators/application/lib/add-project.js

@@ -4,6 +4,7 @@ exports.addProject = addProject;
 const devkit_1 = require("@nx/devkit");
 const has_webpack_plugin_1 = require("../../../utils/has-webpack-plugin");
 const maybe_js_1 = require("../../../utils/maybe-js");
+const has_rspack_plugin_1 = require("../../../utils/has-rspack-plugin");
 function addProject(host, options) {
     const project = {
         root: options.appProjectRoot,
@@ -20,10 +21,75 @@ function addProject(host, options) {
             };
         }
     }
+    else if (options.bundler === 'rspack' &&
+        (!(0, has_rspack_plugin_1.hasRspackPlugin)(host) || !options.addPlugin)) {
+        project.targets = {
+            build: createRspackBuildTarget(options),
+            serve: createRspackServeTarget(options),
+        };
+    }
     (0, devkit_1.addProjectConfiguration)(host, options.projectName, {
         ...project,
     });
 }
+function createRspackBuildTarget(options) {
+    return {
+        executor: '@nx/rspack:rspack',
+        outputs: ['{options.outputPath}'],
+        defaultConfiguration: 'production',
+        options: {
+            outputPath: (0, devkit_1.joinPathFragments)('dist', options.appProjectRoot),
+            index: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/index.html'),
+            baseHref: '/',
+            main: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, `src/main.tsx`)),
+            tsConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
+            assets: [
+                (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/favicon.ico'),
+                (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/assets'),
+            ],
+            rspackConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'rspack.config.js'),
+            styles: options.styledModule || !options.hasStyles
+                ? []
+                : [
+                    (0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/styles.${options.style}`),
+                ],
+            scripts: [],
+            configurations: {
+                development: {
+                    mode: 'development',
+                },
+                production: {
+                    mode: 'production',
+                    optimization: true,
+                    sourceMap: false,
+                    outputHashing: 'all',
+                    namedChunks: false,
+                    extractLicenses: true,
+                    vendorChunk: false,
+                },
+            },
+        },
+    };
+}
+function createRspackServeTarget(options) {
+    return {
+        executor: '@nx/rspack:dev-server',
+        defaultConfiguration: 'development',
+        options: {
+            buildTarget: `${options.projectName}:build`,
+            hmr: true,
+        },
+        configurations: {
+            development: {
+                buildTarget: `${options.projectName}:build:development`,
+            },
+            production: {
+                buildTarget: `${options.projectName}:build:production`,
+                hmr: false,
+            },
+        },
+    };
+}
 function createBuildTarget(options) {
     return {
         executor: '@nx/webpack:webpack',

package/src/generators/application/lib/create-application-files.js

@@ -10,6 +10,7 @@ const maybe_js_1 = require("../../../utils/maybe-js");
 const has_webpack_plugin_1 = require("../../../utils/has-webpack-plugin");
 const get_app_tests_1 = require("./get-app-tests");
 const onboarding_1 = require("nx/src/nx-cloud/utilities/onboarding");
+const has_rspack_plugin_1 = require("../../../utils/has-rspack-plugin");
 async function createApplicationFiles(host, options) {
     let styleSolutionSpecificAppFiles;
     if (options.styledModule && options.style !== 'styled-jsx') {
@@ -114,7 +115,12 @@ async function createApplicationFiles(host, options) {
         }
     }
     else if (options.bundler === 'rspack') {
-        (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-rspack'), options.appProjectRoot, templateVariables);
+        (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-rspack'), options.appProjectRoot, {
+            ...templateVariables,
+            rspackPluginOptions: (0, has_rspack_plugin_1.hasRspackPlugin)(host)
+                ? createNxRspackPluginOptions(options)
+                : null,
+        });
     }
     if (options.unitTestRunner === 'none' ||
         (options.unitTestRunner === 'vitest' && options.inSourceTests == true)) {
@@ -156,3 +162,24 @@ function createNxWebpackPluginOptions(options) {
             ],
     };
 }
+function createNxRspackPluginOptions(options) {
+    return {
+        target: 'web',
+        outputPath: (0, devkit_1.joinPathFragments)('dist', options.appProjectRoot != '.'
+            ? options.appProjectRoot
+            : options.projectName),
+        index: './src/index.html',
+        baseHref: '/',
+        main: (0, maybe_js_1.maybeJs)({
+            js: options.js,
+            useJsx: true,
+        }, `./src/main.tsx`),
+        tsConfig: './tsconfig.app.json',
+        assets: ['./src/favicon.ico', './src/assets'],
+        styles: options.styledModule || !options.hasStyles
+            ? []
+            : [
+                `./src/styles.${options.style !== 'tailwind' ? options.style : 'css'}`,
+            ],
+    };
+}

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

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

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

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

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

@@ -1,7 +1,7 @@
 // @ts-check
 
 /**
- * @type {import('@nx/rspack/module-federation').ModuleFederationConfig}
+ * @type {import('@nx/module-federation').ModuleFederationConfig}
  **/
 const moduleFederationConfig = {
     name: '<%= projectName %>',

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

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

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

@@ -1,4 +1,4 @@
-import { ModuleFederationConfig } from '@nx/rspack/module-federation';
+import { ModuleFederationConfig } from '@nx/module-federation';
 
 const config: ModuleFederationConfig = {
   name: '<%= projectName %>',

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

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

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

@@ -1,4 +1,4 @@
-import { ModuleFederationConfig } from '@nx/rspack/module-federation';
+import { ModuleFederationConfig } from '@nx/module-federation';
 
 const config: ModuleFederationConfig = {
   name: '<%= projectName %>',

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 // @ts-check
 
 /**
- * @type {import('@nx/webpack').ModuleFederationConfig}
+ * @type {import('@nx/module-federation').ModuleFederationConfig}
  **/
 const moduleFederationConfig = {
   name: '<%= projectName %>',

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

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

@@ -1,4 +1,4 @@
-import { ModuleFederationConfig } from '@nx/webpack';
+import { ModuleFederationConfig } from '@nx/module-federation';
 
 const config: ModuleFederationConfig = {
   name: '<%= projectName %>',

package/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';
 

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

@@ -1,4 +1,4 @@
-import { ModuleFederationConfig } from '@nx/webpack';
+import { ModuleFederationConfig } from '@nx/module-federation';
 
 const config: ModuleFederationConfig = {
   name: '<%= projectName %>',