@nx/react 21.0.0-beta.1 → 21.0.0-beta.3

package/src/generators/application/lib/get-app-tests.js

@@ -11,9 +11,9 @@ function getAppTests(options) {
 
   it('should have a greeting as the title', () => {
     ${options.routing
-        ? 'const { getByText } = render(<BrowserRouter><App /></BrowserRouter>);'
-        : 'const { getByText } = render(<App />);'}
-    expect(getByText(new RegExp('Welcome ${options.projectName}', 'gi'))).toBeTruthy();
+        ? 'const { getAllByText } = render(<BrowserRouter><App /></BrowserRouter>);'
+        : 'const { getAllByText } = render(<App />);'}
+    expect(getAllByText(new RegExp('Welcome ${options.projectName}', 'gi')).length > 0).toBeTruthy();
   });
 `;
 }

package/src/generators/application/lib/install-common-dependencies.js

@@ -11,13 +11,24 @@ async function installCommonDependencies(host, options) {
     const reactDeps = await (0, version_utils_1.getReactDependenciesVersionsToInstall)(host);
     const dependencies = {};
     const devDependencies = {
-        '@types/node': versions_1.typesNodeVersion,
         '@types/react': reactDeps['@types/react'],
         '@types/react-dom': reactDeps['@types/react-dom'],
+        '@types/node': versions_1.typesNodeVersion,
+        ...(options.useReactRouter
+            ? {
+                '@react-router/dev': versions_1.reactRouterVersion,
+            }
+            : {}),
     };
     if (options.bundler !== 'vite') {
         dependencies['tslib'] = versions_1.tsLibVersion;
     }
+    if (options.useReactRouter) {
+        dependencies['react-router'] = versions_1.reactRouterVersion;
+        dependencies['@react-router/node'] = versions_1.reactRouterVersion;
+        dependencies['@react-router/serve'] = versions_1.reactRouterVersion;
+        dependencies['isbot'] = versions_1.reactRouterIsBotVersion;
+    }
     // Vite requires style preprocessors to be installed manually.
     // `@nx/webpack` installs them automatically for now.
     if (options.bundler === 'vite' || options.unitTestRunner === 'vitest') {
@@ -45,5 +56,5 @@ async function installCommonDependencies(host, options) {
         devDependencies['@testing-library/react'] = versions_1.testingLibraryReactVersion;
         devDependencies['@testing-library/dom'] = versions_1.testingLibraryDomVersion;
     }
-    return (0, devkit_1.addDependenciesToPackageJson)(host, {}, devDependencies);
+    return (0, devkit_1.addDependenciesToPackageJson)(host, dependencies, devDependencies);
 }

package/src/generators/application/lib/normalize-options.d.ts

@@ -1,5 +1,3 @@
 import { Tree } from '@nx/devkit';
 import { NormalizedSchema, Schema } from '../schema';
-export declare function normalizeDirectory(options: Schema): string;
-export declare function normalizeProjectName(options: Schema): string;
 export declare function normalizeOptions<T extends Schema = Schema>(host: Tree, options: Schema): Promise<NormalizedSchema<T>>;

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

@@ -1,27 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.normalizeDirectory = normalizeDirectory;
-exports.normalizeProjectName = normalizeProjectName;
 exports.normalizeOptions = normalizeOptions;
 const devkit_1 = require("@nx/devkit");
 const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
 const assertion_1 = require("../../../utils/assertion");
 const find_free_port_1 = require("./find-free-port");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
-const get_import_path_1 = require("@nx/js/src/utils/get-import-path");
-function normalizeDirectory(options) {
-    options.directory = options.directory?.replace(/\\{1,2}/g, '/');
-    const { projectDirectory } = (0, devkit_1.extractLayoutDirectory)(options.directory);
-    return projectDirectory
-        ? `${(0, devkit_1.names)(projectDirectory).fileName}/${(0, devkit_1.names)(options.name).fileName}`
-        : (0, devkit_1.names)(options.name).fileName;
-}
-function normalizeProjectName(options) {
-    return normalizeDirectory(options).replace(new RegExp('/', 'g'), '-');
-}
 async function normalizeOptions(host, options) {
-    await (0, project_name_and_root_utils_1.ensureProjectName)(host, options, 'application');
-    const { projectName: appProjectName, projectRoot: appProjectRoot } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
+    await (0, project_name_and_root_utils_1.ensureRootProjectName)(options, 'application');
+    const { projectName, names: projectNames, projectRoot: appProjectRoot, importPath, } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
         name: options.name,
         projectType: 'application',
         directory: options.directory,
@@ -32,6 +19,8 @@ async function normalizeOptions(host, options) {
         nxJson.useInferencePlugins !== false;
     options.addPlugin ??= addPlugin;
     options.rootProject = appProjectRoot === '.';
+    const isUsingTsSolutionConfig = (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host);
+    const appProjectName = !isUsingTsSolutionConfig || options.name ? projectName : importPath;
     const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
     const e2eProjectRoot = options.rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
     const parsedTags = options.tags
@@ -42,23 +31,28 @@ async function normalizeOptions(host, options) {
         ? null
         : options.style;
     (0, assertion_1.assertValidStyle)(options.style);
-    const isUsingTsSolutionConfig = (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host);
+    (0, assertion_1.assertValidReactRouter)(options.useReactRouter, options.bundler);
+    if (options.useReactRouter && !options.bundler) {
+        options.bundler = 'vite';
+    }
+    options.useReactRouter = options.routing ? options.useReactRouter : false;
     const normalized = {
         ...options,
-        name: appProjectName,
-        projectName: isUsingTsSolutionConfig
-            ? (0, get_import_path_1.getImportPath)(host, appProjectName)
-            : appProjectName,
+        projectName: appProjectName,
         appProjectRoot,
+        importPath,
         e2eProjectName,
         e2eProjectRoot,
         parsedTags,
         fileName,
         styledModule,
         hasStyles: options.style !== 'none',
+        names: (0, devkit_1.names)(projectNames.projectSimpleName),
         isUsingTsSolutionConfig,
+        useProjectJson: options.useProjectJson ?? !isUsingTsSolutionConfig,
     };
     normalized.routing = normalized.routing ?? false;
+    normalized.useReactRouter = normalized.useReactRouter ?? false;
     normalized.strict = normalized.strict ?? true;
     normalized.classComponent = normalized.classComponent ?? false;
     normalized.compiler = normalized.compiler ?? 'babel';

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

@@ -1,3 +1,4 @@
+import type { names } from '@nx/devkit';
 import type { Linter, LinterType } from '@nx/eslint';
 import type { SupportedStyles } from '../../../typings/style';
 
@@ -13,6 +14,7 @@ export interface Schema {
   linter: Linter | LinterType;
   classComponent?: boolean;
   routing?: boolean;
+  useReactRouter?: boolean;
   skipNxJson?: boolean;
   js?: boolean;
   globalCss?: boolean;
@@ -30,7 +32,7 @@ export interface Schema {
   nxCloudToken?: string;
   useTsSolution?: boolean;
   formatter?: 'prettier' | 'none';
-  alwaysGenerateProjectJson?: boolean; // this is needed for MF currently
+  useProjectJson?: boolean;
 }
 
 export interface NormalizedSchema<T extends Schema = Schema> extends T {
@@ -38,11 +40,13 @@ export interface NormalizedSchema<T extends Schema = Schema> extends T {
   appProjectRoot: string;
   e2eProjectName: string;
   e2eProjectRoot: string;
+  importPath: string;
   parsedTags: string[];
   fileName: string;
   styledModule: null | SupportedStyles;
   hasStyles: boolean;
   unitTestRunner: 'jest' | 'vitest' | 'none';
   addPlugin?: boolean;
+  names: ReturnType<typeof names>;
   isUsingTsSolutionConfig?: boolean;
 }

package/src/generators/application/schema.json

@@ -83,7 +83,12 @@
     "routing": {
       "type": "boolean",
       "description": "Generate application with routes.",
-      "x-prompt": "Would you like to add React Router to this application?",
+      "x-prompt": "Would you like to add routing to this application?",
+      "default": false
+    },
+    "useReactRouter": {
+      "description": "Use React Router for routing.",
+      "type": "boolean",
       "default": false
     },
     "skipFormat": {
@@ -187,6 +192,10 @@
       "description": "Generate a React app with a minimal setup, no separate test files.",
       "type": "boolean",
       "default": false
+    },
+    "useProjectJson": {
+      "type": "boolean",
+      "description": "Use a `project.json` configuration file instead of inlining the Nx configuration in the `package.json` file."
     }
   },
   "required": ["directory"],

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