@nx/react 21.0.0-beta.0 → 21.0.0-beta.10

package/src/generators/remote/lib/setup-ssr-for-remote.js

@@ -2,39 +2,61 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupSsrForRemote = setupSsrForRemote;
 const devkit_1 = require("@nx/devkit");
+const devkit_2 = require("@nx/devkit");
 const versions_1 = require("../../../utils/versions");
+const create_application_files_1 = require("../../application/lib/create-application-files");
 async function setupSsrForRemote(tree, options, appName) {
     const tasks = [];
-    const project = (0, devkit_1.readProjectConfiguration)(tree, appName);
+    const project = (0, devkit_2.readProjectConfiguration)(tree, appName);
     const pathToModuleFederationSsrFiles = options.typescriptConfiguration
         ? `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation-ssr-ts`
         : `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation-ssr`;
-    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, `../files/${pathToModuleFederationSsrFiles}`), project.root, {
-        ...options,
-        port: Number(options?.devServerPort) || 4200,
-        appName,
-        tmpl: '',
-        browserBuildOutputPath: project.targets.build.options.outputPath,
-        serverBuildOutputPath: project.targets.server.options.outputPath,
-    });
+    const templateVariables = options.bundler === 'rspack'
+        ? {
+            ...(0, create_application_files_1.getDefaultTemplateVariables)(tree, options),
+            rspackPluginOptions: {
+                ...(0, create_application_files_1.createNxRspackPluginOptions)(options, (0, devkit_1.offsetFromRoot)(options.appProjectRoot), false),
+                mainServer: `./server.ts`,
+            },
+            port: Number(options?.devServerPort) || 4200,
+            appName,
+        }
+        : {
+            ...options,
+            port: Number(options?.devServerPort) || 4200,
+            appName,
+            tmpl: '',
+            browserBuildOutputPath: project.targets.build?.options?.outputPath,
+            serverBuildOutputPath: project.targets.server?.options?.outputPath,
+        };
+    (0, devkit_2.generateFiles)(tree, (0, devkit_2.joinPathFragments)(__dirname, `../files/${pathToModuleFederationSsrFiles}`), project.root, templateVariables);
     // For hosts to use when running remotes in static mode.
-    const originalOutputPath = project.targets.build?.options?.outputPath;
+    const originalOutputPath = project.targets.build?.options?.outputPath ??
+        options.isUsingTsSolutionConfig
+        ? 'dist'
+        : (0, devkit_2.joinPathFragments)((0, devkit_1.offsetFromRoot)(options.appProjectRoot), 'dist', options.appProjectRoot != '.'
+            ? options.appProjectRoot
+            : options.projectName);
     const serverOptions = project.targets.server?.options;
     const serverOutputPath = serverOptions?.outputPath ??
-        (0, devkit_1.joinPathFragments)(originalOutputPath, 'server');
+        (0, devkit_2.joinPathFragments)(originalOutputPath, 'server');
     const serverOutputName = serverOptions?.outputFileName ?? 'main.js';
     project.targets['serve-static'] = {
         dependsOn: ['build', 'server'],
         executor: 'nx:run-commands',
         defaultConfiguration: 'development',
         options: {
-            command: `PORT=${options.devServerPort ?? 4200} node ${(0, devkit_1.joinPathFragments)(serverOutputPath, serverOutputName)}`,
+            command: `PORT=${options.devServerPort ?? 4200} node ${(0, devkit_2.joinPathFragments)(serverOutputPath, serverOutputName)}`,
         },
     };
-    (0, devkit_1.updateProjectConfiguration)(tree, appName, project);
-    const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {
+    (0, devkit_2.updateProjectConfiguration)(tree, appName, project);
+    const installTask = (0, devkit_2.addDependenciesToPackageJson)(tree, {
         '@module-federation/node': versions_1.moduleFederationNodeVersion,
+        cors: versions_1.corsVersion,
+        isbot: versions_1.isbotVersion,
+        express: versions_1.expressVersion,
+        '@types/express': versions_1.typesExpressVersion,
     }, {});
     tasks.push(installTask);
-    return (0, devkit_1.runTasksInSerial)(...tasks);
+    return (0, devkit_2.runTasksInSerial)(...tasks);
 }

package/src/generators/remote/remote.js

@@ -17,12 +17,21 @@ const maybe_js_1 = require("../../utils/maybe-js");
 const js_1 = require("@nx/js");
 const versions_1 = require("../../utils/versions");
 const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
+const create_application_files_1 = require("../application/lib/create-application-files");
 function addModuleFederationFiles(host, options) {
-    const templateVariables = {
-        ...(0, devkit_1.names)(options.projectName),
-        ...options,
-        tmpl: '',
-    };
+    const templateVariables = options.bundler === 'rspack'
+        ? {
+            ...(0, create_application_files_1.getDefaultTemplateVariables)(host, options),
+            rspackPluginOptions: {
+                ...(0, create_application_files_1.createNxRspackPluginOptions)(options, (0, devkit_1.offsetFromRoot)(options.appProjectRoot), false),
+                mainServer: `./server.ts`,
+            },
+        }
+        : {
+            ...(0, devkit_1.names)(options.projectName),
+            ...options,
+            tmpl: '',
+        };
     (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, `./files/${options.js
         ? options.bundler === 'rspack'
             ? 'rspack-common'
@@ -48,43 +57,46 @@ function addModuleFederationFiles(host, options) {
 async function remoteGenerator(host, schema) {
     const tasks = [];
     const options = {
-        ...(await (0, normalize_options_1.normalizeOptions)(host, schema)),
+        ...(await (0, normalize_options_1.normalizeOptions)(host, {
+            ...schema,
+            useProjectJson: true,
+        })),
         // when js is set to true, we want to use the js configuration
         js: schema.js ?? false,
         typescriptConfiguration: schema.js
             ? false
             : schema.typescriptConfiguration ?? true,
         dynamic: schema.dynamic ?? false,
-        // TODO(colum): remove when MF works with Crystal
-        addPlugin: false,
+        // TODO(colum): remove when Webpack MF works with Crystal
+        addPlugin: !schema.bundler || schema.bundler === 'rspack' ? true : false,
         bundler: schema.bundler ?? 'rspack',
     };
     if (options.dynamic) {
         // Dynamic remotes generate with library { type: 'var' } by default.
         // We need to ensure that the remote name is a valid variable name.
-        const isValidRemote = (0, js_1.isValidVariable)(options.name);
+        const isValidRemote = (0, js_1.isValidVariable)(options.projectName);
         if (!isValidRemote.isValid) {
-            throw new Error(`Invalid remote name provided: ${options.name}. ${isValidRemote.message}`);
+            throw new Error(`Invalid remote name provided: ${options.projectName}. ${isValidRemote.message}`);
         }
     }
-    await (0, project_name_and_root_utils_1.ensureProjectName)(host, options, 'application');
+    await (0, project_name_and_root_utils_1.ensureRootProjectName)(options, 'application');
     const REMOTE_NAME_REGEX = '^[a-zA-Z_$][a-zA-Z_$0-9]*$';
     const remoteNameRegex = new RegExp(REMOTE_NAME_REGEX);
-    if (!remoteNameRegex.test(options.name)) {
-        throw new Error((0, devkit_1.stripIndents) `Invalid remote name: ${options.name}. Remote project names must:
+    if (!remoteNameRegex.test(options.projectName)) {
+        throw new Error((0, devkit_1.stripIndents) `Invalid remote name: ${options.projectName}. Remote project names must:
       - Start with a letter, dollar sign ($) or underscore (_)
       - Followed by any valid character (letters, digits, underscores, or dollar signs)
       The regular expression used is ${REMOTE_NAME_REGEX}.`);
     }
     const initAppTask = await (0, application_1.default)(host, {
         ...options,
-        name: options.name,
+        name: options.projectName,
         skipFormat: true,
-        alwaysGenerateProjectJson: true,
+        useProjectJson: true,
     });
     tasks.push(initAppTask);
     if (options.host) {
-        (0, update_host_with_remote_1.updateHostWithRemote)(host, options.host, options.name);
+        (0, update_host_with_remote_1.updateHostWithRemote)(host, options.host, options.projectName);
     }
     // Module federation requires bootstrap code to be dynamically imported.
     // Renaming original entry file so we can use `import(./bootstrap)` in
@@ -94,29 +106,33 @@ async function remoteGenerator(host, schema) {
     (0, update_module_federation_project_1.updateModuleFederationProject)(host, options);
     (0, setup_tspath_for_remote_1.setupTspathForRemote)(host, options);
     if (options.ssr) {
-        const setupSsrTask = await (0, setup_ssr_1.default)(host, {
-            project: options.projectName,
-            serverPort: options.devServerPort,
-            skipFormat: true,
-            bundler: options.bundler,
-        });
-        tasks.push(setupSsrTask);
+        if (options.bundler !== 'rspack') {
+            const setupSsrTask = await (0, setup_ssr_1.default)(host, {
+                project: options.projectName,
+                serverPort: options.devServerPort,
+                skipFormat: true,
+                bundler: options.bundler,
+            });
+            tasks.push(setupSsrTask);
+        }
         const setupSsrForRemoteTask = await (0, setup_ssr_for_remote_1.setupSsrForRemote)(host, options, options.projectName);
         tasks.push(setupSsrForRemoteTask);
         const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.projectName);
-        if (options.bundler === 'rspack') {
-            projectConfig.targets.server.executor = '@nx/rspack:rspack';
-            projectConfig.targets.server.options.rspackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `rspack.server.config.${options.typescriptConfiguration ? 'ts' : 'js'}`);
-            delete projectConfig.targets.server.options.webpackConfig;
-        }
-        else {
+        if (options.bundler !== 'rspack') {
             projectConfig.targets.server.options.webpackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `webpack.server.config.${options.typescriptConfiguration ? 'ts' : 'js'}`);
+            (0, devkit_1.updateProjectConfiguration)(host, options.projectName, projectConfig);
         }
-        (0, devkit_1.updateProjectConfiguration)(host, options.projectName, projectConfig);
     }
     if (!options.setParserOptionsProject) {
         host.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.lint.json'));
     }
+    if (options.host && options.bundler === 'rspack') {
+        const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.projectName);
+        projectConfig.targets.serve ??= {};
+        projectConfig.targets.serve.dependsOn ??= [];
+        projectConfig.targets.serve.dependsOn.push(`${options.host}:serve`);
+        (0, devkit_1.updateProjectConfiguration)(host, options.projectName, projectConfig);
+    }
     if (options.host && options.dynamic) {
         const hostConfig = (0, devkit_1.readProjectConfiguration)(host, schema.host);
         const pathToMFManifest = (0, devkit_1.joinPathFragments)(hostConfig.sourceRoot, 'assets/module-federation.manifest.json');

package/src/plugins/router-plugin.d.ts

@@ -0,0 +1,10 @@
+import { type CreateNodesV2 } from '@nx/devkit';
+export interface ReactRouterPluginOptions {
+    buildTargetName?: string;
+    devTargetName?: string;
+    startTargetName?: string;
+    typecheckTargetName?: string;
+    buildDepsTargetName?: string;
+    watchDepsTargetName?: string;
+}
+export declare const createNodesV2: CreateNodesV2<ReactRouterPluginOptions>;

package/src/plugins/router-plugin.js

@@ -0,0 +1,221 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNodesV2 = void 0;
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
+const fs_1 = require("fs");
+const get_named_inputs_1 = require("@nx/devkit/src/utils/get-named-inputs");
+const cache_directory_1 = require("nx/src/utils/cache-directory");
+const calculate_hash_for_create_nodes_1 = require("@nx/devkit/src/utils/calculate-hash-for-create-nodes");
+const js_1 = require("@nx/js");
+const devkit_internals_1 = require("nx/src/devkit-internals");
+const util_1 = require("@nx/js/src/plugins/typescript/util");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
+const config_utils_1 = require("@nx/devkit/src/utils/config-utils");
+const pmCommand = (0, devkit_1.getPackageManagerCommand)();
+const reactRouterConfigBlob = '**/react-router.config.{ts,js,cjs,cts,mjs,mts}';
+function readTargetsCache(cachePath) {
+    return process.env.NX_CACHE_PROJECT_GRAPH !== 'false' && (0, fs_1.existsSync)(cachePath)
+        ? (0, devkit_1.readJsonFile)(cachePath)
+        : {};
+}
+function writeTargetsToCache(cachePath, results) {
+    (0, devkit_1.writeJsonFile)(cachePath, results);
+}
+exports.createNodesV2 = [
+    reactRouterConfigBlob,
+    async (configFiles, options, context) => {
+        const optionsHash = (0, devkit_internals_1.hashObject)(options);
+        const normalizedOptions = normalizeOptions(options);
+        const cachePath = (0, path_1.join)(cache_directory_1.workspaceDataDirectory, `react-router-${optionsHash}.hash`);
+        const targetsCache = readTargetsCache(cachePath);
+        const isUsingTsSolutionSetup = (0, ts_solution_setup_1.isUsingTsSolutionSetup)();
+        const { roots: projectRoots, configFiles: validConfigFiles } = configFiles.reduce((acc, configFile) => {
+            const potentialRoot = (0, path_1.dirname)(configFile);
+            if (checkIfConfigFileShouldBeProject(potentialRoot, context)) {
+                acc.roots.push(potentialRoot);
+                acc.configFiles.push(configFile);
+            }
+            return acc;
+        }, {
+            roots: [],
+            configFiles: [],
+        });
+        const lockfile = (0, js_1.getLockFileName)((0, devkit_1.detectPackageManager)(context.workspaceRoot));
+        const hashes = await (0, calculate_hash_for_create_nodes_1.calculateHashesForCreateNodes)(projectRoots, { ...normalizedOptions, isUsingTsSolutionSetup }, context, projectRoots.map((_) => [lockfile]));
+        try {
+            return await (0, devkit_1.createNodesFromFiles)(async (configFile, _, context, idx) => {
+                const projectRoot = (0, path_1.dirname)(configFile);
+                const siblingFiles = (0, fs_1.readdirSync)((0, devkit_1.joinPathFragments)(context.workspaceRoot, projectRoot));
+                const hash = hashes[idx] + configFile;
+                const { projectType, metadata, targets } = (targetsCache[hash] ??=
+                    await buildReactRouterTargets(configFile, projectRoot, normalizedOptions, context, siblingFiles, isUsingTsSolutionSetup));
+                const project = {
+                    root: projectRoot,
+                    targets,
+                    metadata,
+                };
+                if (project.targets[normalizedOptions.buildTargetName]) {
+                    project.projectType = projectType;
+                }
+                return {
+                    projects: {
+                        [projectRoot]: project,
+                    },
+                };
+            }, validConfigFiles, options, context);
+        }
+        finally {
+            writeTargetsToCache(cachePath, targetsCache);
+        }
+    },
+];
+async function buildReactRouterTargets(configFilePath, projectRoot, options, context, siblingFiles, isUsingTsSolutionSetup) {
+    const namedInputs = (0, get_named_inputs_1.getNamedInputs)(projectRoot, context);
+    const configPath = (0, path_1.join)(context.workspaceRoot, configFilePath);
+    if (require.cache[configPath])
+        (0, config_utils_1.clearRequireCache)();
+    const reactRouterConfig = await (0, config_utils_1.loadConfigFile)(configPath);
+    const isLibMode = reactRouterConfig?.ssr !== undefined && reactRouterConfig.ssr === false;
+    const { buildDirectory, serverBuildPath } = await getBuildPaths(reactRouterConfig, isLibMode);
+    const targets = {};
+    targets[options.buildTargetName] = await getBuildTargetConfig(options.buildTargetName, projectRoot, buildDirectory, serverBuildPath, namedInputs, isUsingTsSolutionSetup);
+    targets[options.devTargetName] = await devTarget(projectRoot, isUsingTsSolutionSetup);
+    if (serverBuildPath) {
+        targets[options.startTargetName] = await startTarget(projectRoot, serverBuildPath, options.buildTargetName, isUsingTsSolutionSetup);
+    }
+    targets[options.typecheckTargetName] = await typecheckTarget(projectRoot, options.typecheckTargetName, namedInputs, siblingFiles, isUsingTsSolutionSetup);
+    (0, util_1.addBuildAndWatchDepsTargets)(context.workspaceRoot, projectRoot, targets, options, pmCommand);
+    const metadata = {};
+    return {
+        targets,
+        metadata,
+        projectType: isLibMode ? 'library' : 'application',
+    };
+}
+async function getBuildTargetConfig(buildTargetName, projectRoot, buildDirectory, serverBuildDirectory, namedInputs, isUsingTsSolutionSetup) {
+    const basePath = projectRoot === '.'
+        ? `{workspaceRoot}`
+        : (0, devkit_1.joinPathFragments)(`{workspaceRoot}`, projectRoot);
+    const outputs = [
+        (0, devkit_1.joinPathFragments)(basePath, buildDirectory),
+        ...(serverBuildDirectory
+            ? [(0, devkit_1.joinPathFragments)(basePath, serverBuildDirectory)]
+            : []),
+    ];
+    const buildTarget = {
+        cache: true,
+        dependsOn: [`^${buildTargetName}`],
+        inputs: [
+            ...('production' in namedInputs
+                ? ['production', '^production']
+                : ['default', '^default']),
+            { externalDependencies: ['@react-router/dev'] },
+        ],
+        outputs,
+        command: 'react-router build',
+        options: { cwd: projectRoot },
+    };
+    if (isUsingTsSolutionSetup) {
+        buildTarget.syncGenerators = ['@nx/js:typescript-sync'];
+    }
+    return buildTarget;
+}
+async function getBuildPaths(reactRouterConfig, isLibMode) {
+    return {
+        buildDirectory: reactRouterConfig?.buildDirectory ?? 'build/client',
+        ...(isLibMode
+            ? undefined
+            : {
+                serverBuildPath: reactRouterConfig?.buildDirectory
+                    ? (0, path_1.join)((0, path_1.dirname)(reactRouterConfig.buildDirectory), `server`)
+                    : 'build/server',
+            }),
+    };
+}
+async function devTarget(projectRoot, isUsingTsSolutionSetup) {
+    const devTarget = {
+        continuous: true,
+        command: 'react-router dev',
+        options: { cwd: projectRoot },
+    };
+    if (isUsingTsSolutionSetup) {
+        devTarget.syncGenerators = ['@nx/js:typescript-sync'];
+    }
+    return devTarget;
+}
+async function startTarget(projectRoot, serverBuildPath, buildTargetName, isUsingTsSolutionSetup) {
+    const serverPath = serverBuildPath === 'build/server'
+        ? `${serverBuildPath}/index.js`
+        : serverBuildPath;
+    const startTarget = {
+        continuous: true,
+        dependsOn: [buildTargetName],
+        command: `react-router-serve ${serverPath}`,
+        options: { cwd: projectRoot },
+    };
+    if (isUsingTsSolutionSetup) {
+        startTarget.syncGenerators = ['@nx/js:typescript-sync'];
+    }
+    return startTarget;
+}
+async function typecheckTarget(projectRoot, typecheckTargetName, namedInputs, siblingFiles, isUsingTsSolutionSetup) {
+    const hasTsConfigAppJson = siblingFiles.includes('tsconfig.app.json');
+    const typecheckTarget = {
+        cache: true,
+        inputs: [
+            ...('production' in namedInputs
+                ? ['production', '^production']
+                : ['default', '^default']),
+            { externalDependencies: ['typescript'] },
+        ],
+        command: isUsingTsSolutionSetup
+            ? `tsc --build --emitDeclarationOnly`
+            : `tsc${hasTsConfigAppJson ? ` -p tsconfig.app.json` : ``} --noEmit`,
+        options: {
+            cwd: projectRoot,
+        },
+        metadata: {
+            description: `Runs type-checking for the project.`,
+            technologies: ['typescript'],
+            help: {
+                command: isUsingTsSolutionSetup
+                    ? `${pmCommand.exec} tsc --build --help`
+                    : `${pmCommand.exec} tsc${hasTsConfigAppJson ? ` -p tsconfig.app.json` : ``} --help`,
+                example: isUsingTsSolutionSetup
+                    ? { args: ['--force'] }
+                    : { options: { noEmit: true } },
+            },
+        },
+    };
+    if (isUsingTsSolutionSetup) {
+        typecheckTarget.dependsOn = [`^${typecheckTargetName}`];
+        typecheckTarget.syncGenerators = ['@nx/js:typescript-sync'];
+    }
+    return typecheckTarget;
+}
+function normalizeOptions(options) {
+    options ??= {};
+    options.buildTargetName ??= 'build';
+    options.devTargetName ??= 'dev';
+    options.startTargetName ??= 'start';
+    options.typecheckTargetName ??= 'typecheck';
+    return options;
+}
+function checkIfConfigFileShouldBeProject(projectRoot, context) {
+    // Do not create a project if package.json and project.json isn't there.
+    const siblingFiles = (0, fs_1.readdirSync)((0, path_1.join)(context.workspaceRoot, projectRoot));
+    return hasRequiredConfigs(siblingFiles);
+}
+function hasRequiredConfigs(files) {
+    const lowerFiles = files.map((file) => file.toLowerCase());
+    // Check if vite.config.{ext} is present
+    const hasViteConfig = lowerFiles.some((file) => {
+        const parts = file.split('.');
+        return parts[0] === 'vite' && parts[1] === 'config' && parts.length > 2;
+    });
+    if (!hasViteConfig)
+        return false;
+    const hasProjectOrPackageJson = lowerFiles.includes('project.json') || lowerFiles.includes('package.json');
+    return hasProjectOrPackageJson;
+}

package/src/rules/update-module-federation-project.d.ts

@@ -7,4 +7,5 @@ export declare function updateModuleFederationProject(host: Tree, options: {
     typescriptConfiguration?: boolean;
     dynamic?: boolean;
     bundler?: 'rspack' | 'webpack';
-}): void;
+    ssr?: boolean;
+}, isHost?: boolean): void;

package/src/rules/update-module-federation-project.js

@@ -4,23 +4,9 @@ exports.updateModuleFederationProject = updateModuleFederationProject;
 const devkit_1 = require("@nx/devkit");
 const maybe_js_1 = require("../utils/maybe-js");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
-function updateModuleFederationProject(host, options) {
+function updateModuleFederationProject(host, options, isHost = false) {
     const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.projectName);
-    if (options.bundler === 'rspack') {
-        projectConfig.targets.build.executor = '@nx/rspack:rspack';
-        projectConfig.targets.build.options = {
-            ...(projectConfig.targets.build.options ?? {}),
-            main: (0, maybe_js_1.maybeJs)({ js: options.js, useJsx: true }, `${options.appProjectRoot}/src/main.ts`),
-            rspackConfig: `${options.appProjectRoot}/rspack.config.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`,
-            target: 'web',
-        };
-        projectConfig.targets.build.configurations ??= {};
-        projectConfig.targets.build.configurations.production = {
-            ...(projectConfig.targets.build.configurations?.production ?? {}),
-            rspackConfig: `${options.appProjectRoot}/rspack.config.prod.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`,
-        };
-    }
-    else {
+    if (options.bundler !== 'rspack') {
         projectConfig.targets.build.options = {
             ...(projectConfig.targets.build.options ?? {}),
             main: (0, maybe_js_1.maybeJs)(options, `${options.appProjectRoot}/src/main.ts`),
@@ -34,15 +20,7 @@ function updateModuleFederationProject(host, options) {
     }
     // If host should be configured to use dynamic federation
     if (options.dynamic) {
-        if (options.bundler === 'rspack') {
-            const pathToProdRspackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `rspack.prod.config.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`);
-            if (host.exists(pathToProdRspackConfig)) {
-                host.delete(pathToProdRspackConfig);
-            }
-            delete projectConfig.targets.build.configurations.production
-                ?.rspackConfig;
-        }
-        else {
+        if (options.bundler !== 'rspack') {
             const pathToProdWebpackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `webpack.prod.config.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`);
             if (host.exists(pathToProdWebpackConfig)) {
                 host.delete(pathToProdWebpackConfig);
@@ -51,36 +29,39 @@ function updateModuleFederationProject(host, options) {
                 ?.webpackConfig;
         }
     }
-    if (options.bundler === 'rspack') {
-        projectConfig.targets.serve.executor =
-            '@nx/rspack:module-federation-dev-server';
-    }
-    else {
+    if (options.bundler !== 'rspack') {
         projectConfig.targets.serve.executor =
             '@nx/react:module-federation-dev-server';
     }
-    projectConfig.targets.serve.options.port = options.devServerPort;
+    projectConfig.targets.serve ??= {};
+    projectConfig.targets.serve.options ??= {};
+    projectConfig.targets.serve.options.port =
+        options.bundler === 'rspack' && options.ssr && isHost
+            ? 4000
+            : options.devServerPort;
     // `serve-static` for remotes that don't need to be in development mode
-    const serveStaticExecutor = options.bundler === 'rspack'
-        ? '@nx/rspack:module-federation-static-server'
-        : '@nx/react:module-federation-static-server';
-    projectConfig.targets['serve-static'] = {
-        executor: serveStaticExecutor,
-        defaultConfiguration: 'production',
-        options: {
-            serveTarget: `${options.projectName}:serve`,
-        },
-        configurations: {
-            development: {
-                serveTarget: `${options.projectName}:serve:development`,
+    if (options.bundler !== 'rspack') {
+        const serveStaticExecutor = '@nx/react:module-federation-static-server';
+        projectConfig.targets['serve-static'] = {
+            executor: serveStaticExecutor,
+            defaultConfiguration: 'production',
+            options: {
+                serveTarget: `${options.projectName}:serve`,
             },
-            production: {
-                serveTarget: `${options.projectName}:serve:production`,
+            configurations: {
+                development: {
+                    serveTarget: `${options.projectName}:serve:development`,
+                },
+                production: {
+                    serveTarget: `${options.projectName}:serve:production`,
+                },
             },
-        },
-    };
+        };
+    }
     // Typechecks must be performed first before build and serve to generate remote d.ts files.
     if ((0, ts_solution_setup_1.isUsingTsSolutionSetup)(host)) {
+        projectConfig.targets.build ??= {};
+        projectConfig.targets.serve ??= {};
         projectConfig.targets.build.dependsOn = ['^build', 'typecheck'];
         projectConfig.targets.serve.dependsOn = ['typecheck'];
     }

package/src/utils/assertion.d.ts

@@ -1 +1,3 @@
+import { type Schema } from '../generators/application/schema';
 export declare function assertValidStyle(style: string): void;
+export declare function assertValidReactRouter(reactRouter: boolean, bundler: Schema['bundler']): void;

package/src/utils/assertion.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.assertValidStyle = assertValidStyle;
+exports.assertValidReactRouter = assertValidReactRouter;
 const VALID_STYLES = [
     'css',
     'scss',
@@ -16,3 +17,8 @@ function assertValidStyle(style) {
         throw new Error(`Unsupported style option found: ${style}. Valid values are: "${VALID_STYLES.join('", "')}"`);
     }
 }
+function assertValidReactRouter(reactRouter, bundler) {
+    if (reactRouter && bundler !== 'vite') {
+        throw new Error(`Unsupported bundler found: ${bundler}. React Router is only supported with 'vite'.`);
+    }
+}

package/src/utils/ast-utils.d.ts

@@ -11,7 +11,7 @@ export declare function findComponentImportPath(componentName: string, source: t
 export declare function findElements(source: ts.SourceFile, tagName: string): ts.Node[];
 export declare function findClosestOpening(tagName: string, node: ts.Node): ts.Node;
 export declare function isTag(tagName: string, node: ts.Node): boolean;
-export declare function addInitialRoutes(sourcePath: string, source: ts.SourceFile): StringChange[];
+export declare function addInitialRoutes(sourcePath: string, source: ts.SourceFile, addBrowserRouter?: boolean): StringChange[];
 export declare function addRoute(sourcePath: string, source: ts.SourceFile, options: {
     routePath: string;
     componentName: string;

package/src/utils/ast-utils.js

@@ -234,7 +234,7 @@ function isTag(tagName, node) {
     }
     return false;
 }
-function addInitialRoutes(sourcePath, source) {
+function addInitialRoutes(sourcePath, source, addBrowserRouter) {
     if (!tsModule) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
     }
@@ -281,7 +281,7 @@ function addInitialRoutes(sourcePath, source) {
     `,
     };
     return [
-        ...addImport(source, `import { Route, Routes, Link } from 'react-router-dom';`),
+        ...addImport(source, `import { Route, Routes, Link ${addBrowserRouter ? ', BrowserRouter ' : ''}} from 'react-router-dom';`),
         insertRoutes,
     ];
 }

package/src/utils/ct-utils.d.ts

@@ -10,5 +10,5 @@ export declare function getBundlerFromTarget(found: FoundTarget, tree: Tree): Pr
 export declare function getActualBundler(tree: Tree, options: {
     buildTarget?: string;
     bundler?: 'vite' | 'webpack';
-}, found: FoundTarget): Promise<"vite" | "webpack">;
+}, found: FoundTarget): Promise<"webpack" | "vite">;
 export declare function isComponent(tree: Tree, filePath: string): boolean;

package/src/utils/versions.d.ts

@@ -14,7 +14,7 @@ export declare const typesReactDomVersion = "19.0.0";
 export declare const typesReactIsV18Version = "18.3.0";
 export declare const typesReactIsVersion = "19.0.0";
 export declare const reactViteVersion = "^4.2.0";
-export declare const typesNodeVersion = "18.16.9";
+export declare const typesNodeVersion = "^20.0.0";
 export declare const babelPresetReactVersion = "^7.14.5";
 export declare const babelCoreVersion = "^7.14.5";
 export declare const styledComponentsVersion = "5.3.6";
@@ -23,7 +23,9 @@ export declare const emotionStyledVersion = "11.11.0";
 export declare const emotionReactVersion = "11.11.1";
 export declare const emotionBabelPlugin = "11.11.0";
 export declare const styledJsxVersion = "5.1.2";
-export declare const reactRouterDomVersion = "6.11.2";
+export declare const reactRouterDomVersion = "6.29.0";
+export declare const reactRouterVersion = "^7.2.0";
+export declare const reactRouterIsBotVersion = "^4.4.0";
 export declare const testingLibraryReactVersion = "16.1.0";
 export declare const testingLibraryDomVersion = "10.4.0";
 export declare const reduxjsToolkitVersion = "1.9.3";
@@ -42,8 +44,8 @@ export declare const typesExpressVersion = "^4.17.21";
 export declare const isbotVersion = "^3.6.5";
 export declare const corsVersion = "~2.8.5";
 export declare const typesCorsVersion = "~2.8.12";
-export declare const moduleFederationNodeVersion = "^2.6.21";
-export declare const moduleFederationEnhancedVersion = "^0.8.8";
+export declare const moduleFederationNodeVersion = "^2.6.26";
+export declare const moduleFederationEnhancedVersion = "^0.9.0";
 export declare const lessVersion = "3.12.2";
 export declare const sassVersion = "^1.55.0";
 export declare const rollupPluginUrlVersion = "^8.0.2";