@nx/react 0.0.0-pr-29464-73fdcbb → 0.0.0-pr-30565-cfe2164

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "0.0.0-pr-29464-73fdcbb",
+  "version": "0.0.0-pr-30565-cfe2164",
   "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",
-    "@nx/devkit": "0.0.0-pr-29464-73fdcbb",
-    "@nx/js": "0.0.0-pr-29464-73fdcbb",
-    "@nx/eslint": "0.0.0-pr-29464-73fdcbb",
-    "@nx/web": "0.0.0-pr-29464-73fdcbb",
-    "@nx/module-federation": "0.0.0-pr-29464-73fdcbb",
+    "@nx/devkit": "0.0.0-pr-30565-cfe2164",
+    "@nx/js": "0.0.0-pr-30565-cfe2164",
+    "@nx/eslint": "0.0.0-pr-30565-cfe2164",
+    "@nx/web": "0.0.0-pr-30565-cfe2164",
+    "@nx/module-federation": "0.0.0-pr-30565-cfe2164",
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.3",
     "semver": "^7.6.3"

package/plugins/nx-react-webpack-plugin/lib/apply-react-config.js

@@ -57,9 +57,7 @@ function applyReactConfig(options, config = {}) {
     };
 }
 function addHotReload(config) {
-    if (config.mode === 'development' &&
-        typeof config['devServer'] === 'object' &&
-        config['devServer']?.hot) {
+    if (config.mode === 'development' && config['devServer']?.hot) {
         // add `react-refresh/babel` to babel loader plugin
         const babelLoader = config.module.rules.find((rule) => rule &&
             typeof rule !== 'string' &&

package/src/generators/application/application.js

@@ -46,26 +46,25 @@ async function applicationGeneratorInternal(tree, schema) {
     });
     tasks.push(jsInitTask);
     const options = await (0, normalize_options_1.normalizeOptions)(tree, schema);
-    options.useReactRouter =
-        options.routing && options.bundler === 'vite'
-            ? options.useReactRouter ??
-                (await (0, prompt_1.promptWhenInteractive)({
-                    name: 'response',
-                    message: 'Would you like to use react-router for server-side rendering?',
-                    type: 'autocomplete',
-                    choices: [
-                        {
-                            name: 'Yes',
-                            message: 'I want to use react-router   [ https://reactrouter.com/start/framework/routing   ]',
-                        },
-                        {
-                            name: 'No',
-                            message: 'I do not want to use react-router for server-side rendering',
-                        },
-                    ],
-                    initial: 0,
-                }, { response: 'No' }).then((r) => r.response === 'Yes'))
-            : false;
+    options.useReactRouter = options.routing
+        ? options.useReactRouter ??
+            (await (0, prompt_1.promptWhenInteractive)({
+                name: 'response',
+                message: 'Would you like to use react-router for server-side rendering?',
+                type: 'autocomplete',
+                choices: [
+                    {
+                        name: 'Yes',
+                        message: 'I want to use react-router   [ https://reactrouter.com/start/framework/routing   ]',
+                    },
+                    {
+                        name: 'No',
+                        message: 'I do not want to use react-router for server-side rendering',
+                    },
+                ],
+                initial: 0,
+            }, { response: 'No' }).then((r) => r.response === 'Yes'))
+        : false;
     (0, show_possible_warnings_1.showPossibleWarnings)(tree, options);
     const initTask = await (0, init_1.default)(tree, {
         ...options,
@@ -168,7 +167,7 @@ async function applicationGeneratorInternal(tree, schema) {
         moduleResolution: 'bundler',
     }, options.linter === 'eslint'
         ? ['eslint.config.js', 'eslint.config.cjs', 'eslint.config.mjs']
-        : undefined, options.useReactRouter ? 'app' : 'src');
+        : undefined);
     (0, sort_fields_1.sortPackageJsonFields)(tree, options.appProjectRoot);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);

package/src/generators/application/files/react-router-ssr/common/app/app-nav.tsx__tmpl__

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { NavLink } from "react-router";
 
 export function AppNav() {

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

@@ -27,10 +27,6 @@ async function addE2e(tree, options) {
         const { getWebpackE2EWebServerInfo } = (0, devkit_1.ensurePackage)('@nx/webpack', versions_1.nxVersion);
         e2eWebServerInfo = await getWebpackE2EWebServerInfo(tree, options.projectName, (0, devkit_1.joinPathFragments)(options.appProjectRoot, `webpack.config.${options.js ? 'js' : 'ts'}`), options.addPlugin, options.devServerPort ?? 4200);
     }
-    else if (options.bundler === 'rspack') {
-        const { getRspackE2EWebServerInfo } = (0, devkit_1.ensurePackage)('@nx/rspack', versions_1.nxVersion);
-        e2eWebServerInfo = await getRspackE2EWebServerInfo(tree, options.projectName, (0, devkit_1.joinPathFragments)(options.appProjectRoot, `rspack.config.${options.js ? 'js' : 'ts'}`), options.addPlugin, options.devServerPort ?? 4200);
-    }
     else if (options.bundler === 'vite') {
         const { getViteE2EWebServerInfo, getReactRouterE2EWebServerInfo } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
         e2eWebServerInfo = options.useReactRouter

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

@@ -3,43 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addJest = addJest;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../../utils/versions");
-const node_path_1 = require("node:path");
 async function addJest(host, options) {
     if (options.unitTestRunner === 'none') {
         return () => { };
     }
     const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/jest', versions_1.nxVersion);
-    await configurationGenerator(host, {
+    return await configurationGenerator(host, {
         ...options,
         project: options.projectName,
         supportTsx: true,
         skipSerializers: true,
-        setupFile: options.useReactRouter ? 'react-router' : 'none',
+        setupFile: 'none',
         compiler: options.compiler,
         skipFormat: true,
         runtimeTsconfigFileName: 'tsconfig.app.json',
     });
-    if (options.useReactRouter) {
-        (0, devkit_1.updateJson)(host, (0, node_path_1.join)(options.appProjectRoot, 'tsconfig.spec.json'), (json) => {
-            json.include = json.include ?? [];
-            const reactRouterTestGlob = options.js
-                ? [
-                    'test/**/*.spec.jsx',
-                    'test/**/*.spec.js',
-                    'test/**/*.test.jsx',
-                    'test/**/*.test.js',
-                ]
-                : [
-                    'test/**/*.spec.tsx',
-                    'test/**/*.spec.ts',
-                    'test/**/*.test.tsx',
-                    'test/**/*.test.ts',
-                ];
-            return {
-                ...json,
-                include: Array.from(new Set([...json.include, ...reactRouterTestGlob])),
-            };
-        });
-    }
-    return () => { };
 }

package/src/generators/application/lib/create-application-files.d.ts

@@ -1,64 +1,3 @@
 import { Tree } from '@nx/devkit';
-import { WithNxOptions } from '@nx/webpack';
-import { WithReactOptions } from '../../../../plugins/with-react';
 import { NormalizedSchema } from '../schema';
-export declare function getDefaultTemplateVariables(host: Tree, options: NormalizedSchema): {
-    typesNodeVersion: string;
-    typesReactDomVersion: string;
-    reactRouterVersion: string;
-    typesReactVersion: string;
-    reactDomVersion: string;
-    reactVersion: string;
-    reactRouterIsBotVersion: string;
-    js: boolean;
-    tmpl: string;
-    offsetFromRoot: string;
-    appTests: string;
-    inSourceVitestTests: string;
-    style: "none" | "styled-components" | "@emotion/styled" | "styled-jsx" | "css" | "scss" | "less";
-    hasStyleFile: boolean;
-    isUsingTsSolutionSetup: boolean;
-    projectName: string;
-    appProjectRoot: string;
-    e2eProjectName: string;
-    e2eProjectRoot: string;
-    importPath: string;
-    parsedTags: string[];
-    fileName: string;
-    styledModule: null | import("../../../..").SupportedStyles;
-    hasStyles: boolean;
-    unitTestRunner: "jest" | "vitest" | "none";
-    addPlugin?: boolean;
-    names: ReturnType<typeof import("@nx/devkit").names>;
-    isUsingTsSolutionConfig?: boolean;
-    directory: string;
-    name: string;
-    skipFormat?: boolean;
-    tags?: string;
-    inSourceTests?: boolean;
-    e2eTestRunner: "cypress" | "playwright" | "none";
-    linter: import("@nx/eslint").Linter | import("@nx/eslint").LinterType;
-    classComponent?: boolean;
-    routing?: boolean;
-    useReactRouter?: boolean;
-    skipNxJson?: boolean;
-    globalCss?: boolean;
-    strict?: boolean;
-    setParserOptionsProject?: boolean;
-    compiler?: "babel" | "swc";
-    remotes?: string[];
-    devServerPort?: number;
-    skipPackageJson?: boolean;
-    rootProject?: boolean;
-    bundler?: "webpack" | "vite" | "rspack" | "rsbuild";
-    minimal?: boolean;
-    nxCloudToken?: string;
-    useTsSolution?: boolean;
-    formatter?: "prettier" | "none";
-    useProjectJson?: boolean;
-    className: string;
-    propertyName: string;
-    constantName: string;
-};
-export declare function createNxRspackPluginOptions(options: NormalizedSchema, rootOffset: string, tsx?: boolean): WithNxOptions & WithReactOptions;
 export declare function createApplicationFiles(host: Tree, options: NormalizedSchema): Promise<void>;

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

@@ -1,7 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDefaultTemplateVariables = getDefaultTemplateVariables;
-exports.createNxRspackPluginOptions = createNxRspackPluginOptions;
 exports.createApplicationFiles = createApplicationFiles;
 const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
@@ -15,52 +13,6 @@ const onboarding_1 = require("nx/src/nx-cloud/utilities/onboarding");
 const has_rspack_plugin_1 = require("../../../utils/has-rspack-plugin");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 const versions_1 = require("../../../utils/versions");
-function getDefaultTemplateVariables(host, options) {
-    const hasStyleFile = ['scss', 'css', 'less'].includes(options.style);
-    const appTests = (0, get_app_tests_1.getAppTests)(options);
-    return {
-        ...options.names,
-        ...options,
-        typesNodeVersion: versions_1.typesNodeVersion,
-        typesReactDomVersion: versions_1.typesReactDomVersion,
-        reactRouterVersion: versions_1.reactRouterVersion,
-        typesReactVersion: versions_1.typesReactVersion,
-        reactDomVersion: versions_1.reactDomVersion,
-        reactVersion: versions_1.reactVersion,
-        reactRouterIsBotVersion: versions_1.reactRouterIsBotVersion,
-        js: !!options.js, // Ensure this is defined in template
-        tmpl: '',
-        offsetFromRoot: (0, devkit_1.offsetFromRoot)(options.appProjectRoot),
-        appTests,
-        inSourceVitestTests: (0, get_in_source_vitest_tests_template_1.getInSourceVitestTestsTemplate)(appTests),
-        style: options.style === 'tailwind' ? 'css' : options.style,
-        hasStyleFile,
-        isUsingTsSolutionSetup: (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host),
-    };
-}
-function createNxRspackPluginOptions(options, rootOffset, tsx = true) {
-    return {
-        target: 'web',
-        outputPath: options.isUsingTsSolutionConfig
-            ? 'dist'
-            : (0, devkit_1.joinPathFragments)(rootOffset, '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 ? 'tsx' : 'ts'}`),
-        tsConfig: './tsconfig.app.json',
-        assets: ['./src/favicon.ico', './src/assets'],
-        styles: options.styledModule || !options.hasStyles
-            ? []
-            : [
-                `./src/styles.${options.style !== 'tailwind' ? options.style : 'css'}`,
-            ],
-    };
-}
 async function createApplicationFiles(host, options) {
     let styleSolutionSpecificAppFiles;
     if (options.styledModule && options.style !== 'styled-jsx') {
@@ -81,11 +33,31 @@ async function createApplicationFiles(host, options) {
     else {
         styleSolutionSpecificAppFiles = '../files/style-css-module';
     }
+    const hasStyleFile = ['scss', 'css', 'less'].includes(options.style);
     const onBoardingStatus = await (0, onboarding_1.createNxCloudOnboardingURLForWelcomeApp)(host, options.nxCloudToken);
     const connectCloudUrl = onBoardingStatus === 'unclaimed' &&
         (await (0, onboarding_1.getNxCloudAppOnBoardingUrl)(options.nxCloudToken));
     const relativePathToRootTsConfig = (0, js_1.getRelativePathToRootTsConfig)(host, options.appProjectRoot);
-    const templateVariables = getDefaultTemplateVariables(host, options);
+    const appTests = (0, get_app_tests_1.getAppTests)(options);
+    const templateVariables = {
+        ...options.names,
+        ...options,
+        typesNodeVersion: versions_1.typesNodeVersion,
+        typesReactDomVersion: versions_1.typesReactDomVersion,
+        reactRouterVersion: versions_1.reactRouterVersion,
+        typesReactVersion: versions_1.typesReactVersion,
+        reactDomVersion: versions_1.reactDomVersion,
+        reactVersion: versions_1.reactVersion,
+        reactRouterIsBotVersion: versions_1.reactRouterIsBotVersion,
+        js: !!options.js, // Ensure this is defined in template
+        tmpl: '',
+        offsetFromRoot: (0, devkit_1.offsetFromRoot)(options.appProjectRoot),
+        appTests,
+        inSourceVitestTests: (0, get_in_source_vitest_tests_template_1.getInSourceVitestTestsTemplate)(appTests),
+        style: options.style === 'tailwind' ? 'css' : options.style,
+        hasStyleFile,
+        isUsingTsSolutionSetup: (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host),
+    };
     if (options.bundler === 'vite' && !options.useReactRouter) {
         (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-vite'), options.appProjectRoot, templateVariables);
     }
@@ -213,6 +185,29 @@ function createNxWebpackPluginOptions(options, rootOffset) {
             ],
     };
 }
+function createNxRspackPluginOptions(options, rootOffset) {
+    return {
+        target: 'web',
+        outputPath: options.isUsingTsSolutionConfig
+            ? 'dist'
+            : (0, devkit_1.joinPathFragments)(rootOffset, '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'}`,
+            ],
+    };
+}
 function generateReactRouterFiles(tree, options, templateVariables) {
     (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, '../files/react-router-ssr/common'), options.appProjectRoot, templateVariables);
     if (options.rootProject) {

package/src/generators/application/lib/normalize-options.js

@@ -31,10 +31,7 @@ async function normalizeOptions(host, options) {
         ? null
         : options.style;
     (0, assertion_1.assertValidStyle)(options.style);
-    (0, assertion_1.assertValidReactRouter)(options.useReactRouter, options.bundler);
-    if (options.useReactRouter && !options.bundler) {
-        options.bundler = 'vite';
-    }
+    options.bundler = options.useReactRouter ? 'vite' : options.bundler;
     options.useReactRouter = options.routing ? options.useReactRouter : false;
     const normalized = {
         ...options,

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

@@ -1,40 +1,16 @@
-const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin');
-const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin');
-const { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } = require('@nx/module-federation/rspack');
-const { join } = require('path');
+const { composePlugins, withNx, withReact } = require('@nx/rspack');
+const { withModuleFederation } = require('@nx/module-federation/rspack');
 
-const config = require('./module-federation.config');
+const baseConfig = require('./module-federation.config');
 
-module.exports = {
-  output: {
-    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>'),
-    publicPath: 'auto'
-  },
-  devServer: {
-    port: <%= devServerPort %>,
-    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
-    }),
-    new NxModuleFederationPlugin({ config }, { dts: false }),
-    new NxModuleFederationDevServerPlugin({ 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 for 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/host/files/rspack-module-federation/rspack.config.prod.js__tmpl__

@@ -1,66 +1,38 @@
-const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin');
-const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin');
-const { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } = require('@nx/module-federation/rspack');
-const { join } = require('path');
+const { composePlugins, withNx, withReact } = require('@nx/rspack');
+const { withModuleFederation } = require('@nx/module-federation/rspack');
 
 const baseConfig = require('./module-federation.config');
 
 const prodConfig = {
-	...baseConfig,
-	/*
-		* Remote overrides for production.
-		* Each entry is a pair of a unique name and the URL where it is deployed.
-		*
-		* e.g.
-		* remotes: [
-		*   ['app1', 'http://app1.example.com'],
-		*   ['app2', 'http://app2.example.com'],
-		* ]
-		*
-		* You can also use a full path to the remoteEntry.js file if desired.
-		*
-		* remotes: [
-		*   ['app1', 'http://example.com/path/to/app1/remoteEntry.js'],
-		*   ['app2', 'http://example.com/path/to/app2/remoteEntry.js'],
-		* ]
-		*/
-	remotes: [
-		<%_ remotes.forEach(function(r) { _%>
-		['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],
-		<%_ }); _%>
-	],
+    ...baseConfig,
+    /*
+     * Remote overrides for production.
+     * Each entry is a pair of a unique name and the URL where it is deployed.
+     *
+     * e.g.
+     * remotes: [
+     *   ['app1', 'http://app1.example.com'],
+     *   ['app2', 'http://app2.example.com'],
+     * ]
+     *
+     * You can also use a full path to the remoteEntry.js file if desired.
+     *
+     * remotes: [
+     *   ['app1', 'http://example.com/path/to/app1/remoteEntry.js'],
+     *   ['app2', 'http://example.com/path/to/app2/remoteEntry.js'],
+     * ]
+     */
+    remotes: [
+    <%_ remotes.forEach(function(r) { _%>
+    ['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],
+    <%_ }); _%>
+    ],
 };
 
-module.exports = {
-  output: {
-    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>'),
-    publicPath: 'auto'
-  },
-  devServer: {
-    port: <%= devServerPort %>,
-    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
-    }),
-    new NxModuleFederationPlugin({ config: prodConfig }, { dts: false }),
-    new NxModuleFederationDevServerPlugin({ config: prodConfig }),
-  ],
-};
+// 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 for 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(prodConfig, { dts: false }));

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

@@ -13,12 +13,6 @@ const moduleFederationConfig = {
       }
     _%>
   ],
-    shared: (libraryName, libraryConfig) => {
-        return {
-            ...libraryConfig,
-            eager: true
-        }
-   },
 };
 
 /**

package/src/generators/host/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/module-federation/rspack');
+
+const baseConfig = require('./module-federation.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 for 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/host/files/rspack-module-federation-ssr/server.ts__tmpl__

@@ -7,7 +7,7 @@ import { handleRequest } from './src/main.server';
 const port = process.env['PORT'] || <%= port %>;
 const app = express();
 
-const browserDist = path.join(process.cwd(), '<%= rspackPluginOptions.outputPath %>', 'browser');
+const browserDist = path.join(process.cwd(), '<%= browserBuildOutputPath %>');
 const indexPath = path.join(browserDist, 'index.html');
 
 app.use(cors());

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

@@ -8,12 +8,6 @@ const config: ModuleFederationConfig = {
     "<%= r.fileName %>", 
       <%_ }); } _%>
   ],
-  shared: (libraryName, libraryConfig) => {
-    return {
-      ...libraryConfig,
-      eager: true
-    }
-  },
 };
 
 /**

package/src/generators/host/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/module-federation/rspack';
+
+import baseConfig from './module-federation.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 for 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/host/files/rspack-module-federation-ssr-ts/server.ts__tmpl__

@@ -7,7 +7,7 @@ import { handleRequest } from './src/main.server';
 const port = process.env['PORT'] || <%= port %>;
 const app = express();
 
-const browserDist = path.join(process.cwd(), '<%= rspackPluginOptions.outputPath %>', 'browser');
+const browserDist = path.join(process.cwd(), '<%= browserBuildOutputPath %>');
 const indexPath = path.join(browserDist, 'index.html');
 
 app.use(cors());

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

@@ -1,8 +1,6 @@
-import { NxAppRspackPlugin } from '@nx/rspack/app-plugin';
-import { NxReactRspackPlugin } from '@nx/rspack/react-plugin';
-import { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } from '@nx/module-federation/rspack';
+import { composePlugins, withNx, withReact } from '@nx/rspack';
+import { withModuleFederation } from '@nx/module-federation/rspack';
 import { ModuleFederationConfig } from '@nx/module-federation';
-import { join } from 'path';
 
 import baseConfig from './module-federation.config';
 
@@ -32,36 +30,10 @@ const prodConfig: ModuleFederationConfig = {
 	],
 };
 
-export default {
-  output: {
-    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>'),
-    publicPath: 'auto'
-  },
-  devServer: {
-    port: <%= devServerPort %>,
-    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
-    }),
-    new NxModuleFederationPlugin({ config: prodConfig }, { dts: false }),
-    new NxModuleFederationDevServerPlugin({ config: prodConfig }),
-  ],
-};
+// 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 for 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(prodConfig, { dts: false }));