@nx/react 20.7.1 → 20.8.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "20.7.1",
+  "version": "20.8.0-beta.0",
   "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": "20.7.1",
-    "@nx/js": "20.7.1",
-    "@nx/eslint": "20.7.1",
-    "@nx/web": "20.7.1",
-    "@nx/module-federation": "20.7.1",
+    "@nx/devkit": "20.8.0-beta.0",
+    "@nx/js": "20.8.0-beta.0",
+    "@nx/eslint": "20.8.0-beta.0",
+    "@nx/web": "20.8.0-beta.0",
+    "@nx/module-federation": "20.8.0-beta.0",
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.3",
     "semver": "^7.6.3"

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

@@ -27,6 +27,10 @@ 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/create-application-files.d.ts

@@ -1,3 +1,64 @@
 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,5 +1,7 @@
 "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");
@@ -13,6 +15,52 @@ 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') {
@@ -33,31 +81,11 @@ 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 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),
-    };
+    const templateVariables = getDefaultTemplateVariables(host, options);
     if (options.bundler === 'vite' && !options.useReactRouter) {
         (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-vite'), options.appProjectRoot, templateVariables);
     }
@@ -185,29 +213,6 @@ 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/component-test/component-test.js

@@ -10,7 +10,7 @@ const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescri
 let tsModule;
 async function componentTestGenerator(tree, options) {
     (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
-    const { assertMinimumCypressVersion } = await Promise.resolve().then(() => require('@nx/cypress/src/utils/cypress-version'));
+    const { assertMinimumCypressVersion } = await Promise.resolve().then(() => require('@nx/cypress/src/utils/versions'));
     assertMinimumCypressVersion(10);
     // normalize any windows paths
     options.componentPath = options.componentPath.replace(/\\/g, '/');

package/src/generators/cypress-component-configuration/lib/add-files.d.ts

@@ -1,4 +1,4 @@
+import type { FoundTarget } from '@nx/cypress/src/utils/find-target-options';
 import { ProjectConfiguration, Tree } from '@nx/devkit';
 import type { CypressComponentConfigurationSchema } from '../schema';
-import { FoundTarget } from '@nx/cypress/src/utils/find-target-options';
 export declare function addFiles(tree: Tree, projectConfig: ProjectConfiguration, options: CypressComponentConfigurationSchema, found: FoundTarget): Promise<void>;

package/src/generators/cypress-component-configuration/lib/add-files.js

@@ -3,12 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addFiles = addFiles;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("nx/src/utils/versions");
-const component_test_1 = require("../../component-test/component-test");
 const ct_utils_1 = require("../../../utils/ct-utils");
+const component_test_1 = require("../../component-test/component-test");
 async function addFiles(tree, projectConfig, options, found) {
-    // must dyanmicaly import to prevent packages not using cypress from erroring out
+    // must dynamicaly import to prevent packages not using cypress from erroring out
     // when importing react
-    const { addMountDefinition, addDefaultCTConfig } = await Promise.resolve().then(() => require('@nx/cypress/src/utils/config'));
+    const { addMountDefinition } = await Promise.resolve().then(() => require('@nx/cypress/src/utils/config'));
+    const { getInstalledCypressMajorVersion } = await Promise.resolve().then(() => require('@nx/cypress/src/utils/versions'));
+    const installedCypressMajorVersion = getInstalledCypressMajorVersion(tree);
     // Specifically undefined to allow Remix workaround of passing an empty string
     const actualBundler = await (0, ct_utils_1.getActualBundler)(tree, options, found);
     if (options.bundler && options.bundler !== actualBundler) {
@@ -18,7 +20,8 @@ async function addFiles(tree, projectConfig, options, found) {
     const bundlerToUse = options.bundler ?? actualBundler;
     const commandFile = (0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress', 'support', 'component.ts');
     const updatedCommandFile = await addMountDefinition(tree.read(commandFile, 'utf-8'));
-    tree.write(commandFile, `import { mount } from 'cypress/react18';\n${updatedCommandFile}`);
+    const moduleSpecifier = installedCypressMajorVersion >= 14 ? 'cypress/react' : 'cypress/react18';
+    tree.write(commandFile, `import { mount } from '${moduleSpecifier}';\n${updatedCommandFile}`);
     if (options.bundler === 'webpack' ||
         (!options.bundler && actualBundler === 'webpack')) {
         (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@nx/webpack': versions_1.nxVersion });

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

@@ -1,16 +1,40 @@
-const { composePlugins, withNx, withReact } = require('@nx/rspack');
-const { withModuleFederation } = require('@nx/module-federation/rspack');
+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 baseConfig = require('./module-federation.config');
+const config = require('./module-federation.config');
 
-const config = {
-  ...baseConfig,
+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 }),
+  ],
 };
-
-// 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,38 +1,66 @@
-const { composePlugins, withNx, withReact } = require('@nx/rspack');
-const { withModuleFederation } = require('@nx/module-federation/rspack');
+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 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 %>/'],
+		<%_ }); _%>
+	],
 };
 
-// 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 }));
+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 }),
+  ],
+};

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

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

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

@@ -0,0 +1,66 @@
+const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin');
+const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin');
+const { NxModuleFederationPlugin, NxModuleFederationSSRDevServerPlugin } = require('@nx/module-federation/rspack');
+const { join } = require('path');
+
+const browserMfConfig = require('./module-federation.config');
+const serverMfConfig = require('./module-federation.server.config');
+
+const browserRspackConfig = {
+  name: 'browser',
+  output: {
+    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'browser'),
+    publicPath: 'auto'
+  },
+  devServer: {
+    port: <%= devServerPort %>,
+    historyApiFallback: {
+      index: '/index.html',
+      disableDotRule: true,
+      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
+    },
+    devMiddleware: {
+      writeToDisk: (file: string) => !file.includes('.hot-update.'),
+    },
+  },
+  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: browserMfConfig }, { dts: false }),
+  ],
+};
+
+const serverRspackConfig = {
+  name: 'server',
+  target: 'async-node',
+  output: {
+    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'server'),
+    filename: 'server.js'
+  },
+  plugins: [
+    new NxAppRspackPlugin({
+      outputPath: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'server'),
+      outputFileName: 'server.js',
+      tsConfig: '<%= rspackPluginOptions.tsConfig %>',
+      main: '<%= rspackPluginOptions.mainServer %>',
+      baseHref: '<%= rspackPluginOptions.baseHref %>',
+    }),
+    new NxModuleFederationPlugin({ config: serverMfConfig, isServer: true }, { dts: false }),
+    new NxModuleFederationSSRDevServerPlugin({ config: serverMfConfig }),
+  ],
+};
+
+module.exports = [browserRspackConfig, serverRspackConfig];

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(), '<%= browserBuildOutputPath %>');
+const browserDist = path.join(process.cwd(), '<%= rspackPluginOptions.outputPath %>', 'browser');
 const indexPath = path.join(browserDist, 'index.html');
 
 app.use(cors());

package/src/generators/host/files/rspack-module-federation-ssr/src/main.server.tsx__tmpl__

@@ -0,0 +1,49 @@
+import type { Request, Response } from 'express';
+import * as fs from 'fs';
+import * as ReactDOMServer from 'react-dom/server';
+import isbot from 'isbot'
+
+import App from './app/app';
+
+import { StaticRouter } from 'react-router-dom/server';
+
+
+let indexHtml: null | string = null;
+
+export function handleRequest(indexPath: string) {
+  return function render(req: Request, res: Response) {
+    let didError = false;
+
+    if (!indexHtml) {
+      indexHtml = fs.readFileSync(indexPath).toString();
+    }
+
+    const [htmlStart, htmlEnd] = indexHtml.split(`<div id="root"></div>`);
+
+    // For bots (e.g. search engines), the content will not be streamed but render all at once.
+    // For users, content should be streamed to the user as they are ready.
+    const callbackName = isbot(req.headers['user-agent']) ? 'onAllReady' : 'onShellReady';
+
+    const stream = ReactDOMServer.renderToPipeableStream(
+      <StaticRouter location={req.originalUrl}><App /></StaticRouter>,
+      {
+        [callbackName]() {
+          res.statusCode = didError ? 500 : 200;
+          res.setHeader('Content-type', 'text/html; charset=utf-8');
+          res.write(`${htmlStart}<div id="root">`);
+          stream.pipe(res);
+          res.write(`</div>${htmlEnd}`);
+        },
+        onShellError(error) {
+          console.error(error);
+          res.statusCode = 500;
+          res.send('<!doctype html><h1>Server Error</h1>');
+        },
+        onError(error) {
+          didError = true;
+          console.error(error);
+        }
+      }
+    );
+  }
+}

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

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

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

@@ -0,0 +1,66 @@
+import { NxAppRspackPlugin } from '@nx/rspack/app-plugin';
+import { NxReactRspackPlugin } from '@nx/rspack/react-plugin';
+import { NxModuleFederationPlugin, NxModuleFederationSSRDevServerPlugin } from '@nx/module-federation/rspack';
+import { join } from 'path';
+
+import browserMfConfig from './module-federation.config';
+import serverMfConfig from './module-federation.server.config';
+
+const browserRspackConfig = {
+  name: 'browser',
+  output: {
+    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'browser'),
+    publicPath: 'auto'
+  },
+  devServer: {
+    port: <%= devServerPort %>,
+    historyApiFallback: {
+      index: '/index.html',
+      disableDotRule: true,
+      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
+    },
+    devMiddleware: {
+      writeToDisk: (file: string) => !file.includes('.hot-update.'),
+    },
+  },
+  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: browserMfConfig }, { dts: false }),
+  ],
+};
+
+const serverRspackConfig = {
+  name: 'server',
+    target: 'async-node',
+    output: {
+      path: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'server'),
+      filename: 'server.js'
+    },
+    plugins: [
+      new NxAppRspackPlugin({
+        outputPath: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'server'),
+        outputFileName: 'server.js',
+        tsConfig: '<%= rspackPluginOptions.tsConfig %>',
+        main: '<%= rspackPluginOptions.mainServer %>',
+        baseHref: '<%= rspackPluginOptions.baseHref %>',
+      }),
+      new NxModuleFederationPlugin({ config: serverMfConfig, isServer: true }, { dts: false }),
+      new NxModuleFederationSSRDevServerPlugin({ config: serverMfConfig }),
+    ],
+};
+
+export default [browserRspackConfig, serverRspackConfig];

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(), '<%= browserBuildOutputPath %>');
+const browserDist = path.join(process.cwd(), '<%= rspackPluginOptions.outputPath %>', 'browser');
 const indexPath = path.join(browserDist, 'index.html');
 
 app.use(cors());