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

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");
@@ -12,6 +14,53 @@ 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");
 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') {
@@ -32,27 +81,17 @@ 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 = {
-        ...(0, devkit_1.names)(options.name),
-        ...options,
-        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') {
+    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);
     }
+    else if (options.bundler === 'vite' && options.useReactRouter) {
+        generateReactRouterFiles(host, options, templateVariables);
+    }
     else if (options.bundler === 'webpack') {
         (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-webpack'), options.appProjectRoot, {
             ...templateVariables,
@@ -137,9 +176,12 @@ async function createApplicationFiles(host, options) {
         const tutorialUrl = options.rootProject
             ? 'https://nx.dev/getting-started/tutorials/react-standalone-tutorial'
             : 'https://nx.dev/react-tutorial/1-code-generation?utm_source=nx-project';
-        (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/nx-welcome', onBoardingStatus), options.appProjectRoot, { ...templateVariables, connectCloudUrl, tutorialUrl });
+        const path = options.useReactRouter
+            ? '../files/react-router-ssr/nx-welcome'
+            : '../files/nx-welcome';
+        (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, path, onBoardingStatus), options.appProjectRoot, { ...templateVariables, connectCloudUrl, tutorialUrl });
     }
-    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, styleSolutionSpecificAppFiles), options.appProjectRoot, templateVariables);
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, styleSolutionSpecificAppFiles, options.useReactRouter ? 'src' : ''), options.appProjectRoot, templateVariables);
     if (options.js) {
         (0, devkit_1.toJS)(host, {
             useJsx: options.bundler === 'vite' || options.bundler === 'rspack',
@@ -171,26 +213,26 @@ 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) {
+        const gitignore = tree.read('.gitignore', 'utf-8');
+        tree.write('.gitignore', `${gitignore}\n.cache\nbuild\npublic/build\n.env\n\.react-router\n`);
+    }
+    else {
+        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/react-router-ssr/non-root'), options.appProjectRoot, templateVariables);
+    }
+    if (options.isUsingTsSolutionConfig) {
+        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/react-router-ssr/ts-solution'), options.appProjectRoot, templateVariables);
+        (0, devkit_1.updateJson)(tree, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json'), (json) => {
+            if (options.projectName !== options.importPath) {
+                json.nx = { name: options.projectName };
+            }
+            if (options.parsedTags?.length) {
+                json.nx ??= {};
+                json.nx.tags = options.parsedTags;
+            }
+            return json;
+        });
+    }
 }

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