@nx/react 0.0.0-pr-29720-06f67e5 → 0.0.0-pr-3-4fa8cf8

package/src/generators/library/lib/add-rollup-build-target.d.ts

@@ -1,4 +1,6 @@
 import { Tree } from 'nx/src/generators/tree';
 import { GeneratorCallback } from '@nx/devkit';
 import { NormalizedSchema } from '../schema';
-export declare function addRollupBuildTarget(host: Tree, options: NormalizedSchema): Promise<GeneratorCallback>;
+export declare function addRollupBuildTarget(host: Tree, options: NormalizedSchema & {
+    format?: Array<'esm' | 'cjs'>;
+}, external?: Set<String>): Promise<GeneratorCallback>;

package/src/generators/library/lib/add-rollup-build-target.js

@@ -4,7 +4,7 @@ exports.addRollupBuildTarget = addRollupBuildTarget;
 const devkit_1 = require("@nx/devkit");
 const maybe_js_1 = require("../../../utils/maybe-js");
 const versions_1 = require("../../../utils/versions");
-async function addRollupBuildTarget(host, options) {
+async function addRollupBuildTarget(host, options, external = new Set(['react', 'react-dom'])) {
     const tasks = [];
     const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/rollup', versions_1.nxVersion);
     tasks.push(await configurationGenerator(host, {
@@ -19,12 +19,11 @@ async function addRollupBuildTarget(host, options) {
             '@svgr/rollup': versions_1.svgrRollupVersion,
         }));
     }
-    const external = ['react', 'react-dom'];
     if (options.style === '@emotion/styled') {
-        external.push('@emotion/react/jsx-runtime');
+        external.add('@emotion/react/jsx-runtime');
     }
     else {
-        external.push('react/jsx-runtime');
+        external.add('react/jsx-runtime');
     }
     const nxJson = (0, devkit_1.readNxJson)(host);
     const hasRollupPlugin = !!nxJson.plugins?.some((p) => typeof p === 'string'
@@ -44,8 +43,8 @@ module.exports = withNx(
             : (0, devkit_1.joinPathFragments)((0, devkit_1.offsetFromRoot)(options.projectRoot), 'dist', options.projectRoot)}',
     tsConfig: './tsconfig.lib.json',
     compiler: '${options.compiler ?? 'babel'}',
-    external: ${JSON.stringify(external)},
-    format: ['esm'],
+    external: ${JSON.stringify(Array.from(external))},
+    format: ${JSON.stringify(options.format ?? ['esm'])},
     assets:[{ input: '.', output: '.', glob: 'README.md'}],
   }, {
     // Provide additional rollup configuration here. See: https://rollupjs.org/configuration-options
@@ -74,7 +73,7 @@ module.exports = withNx(
                 tsConfig: `${options.projectRoot}/tsconfig.lib.json`,
                 project: `${options.projectRoot}/package.json`,
                 entryFile: (0, maybe_js_1.maybeJs)(options, `${options.projectRoot}/src/index.ts`),
-                external,
+                external: Array.from(external),
                 rollupConfig: `@nx/react/plugins/bundle-rollup`,
                 compiler: options.compiler ?? 'babel',
                 assets: [

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

@@ -43,7 +43,8 @@ function createFiles(host, options) {
         });
     }
     if ((options.publishable || options.buildable) &&
-        !options.isUsingTsSolutionConfig) {
+        !options.isUsingTsSolutionConfig &&
+        options.useProjectJson) {
         if (options.bundler === 'vite') {
             (0, devkit_1.writeJson)(host, `${options.projectRoot}/package.json`, {
                 name: options.importPath,

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

@@ -7,7 +7,7 @@ const assertion_1 = require("../../../utils/assertion");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 async function normalizeOptions(host, options) {
     const isUsingTsSolutionConfig = (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host);
-    await (0, project_name_and_root_utils_1.ensureProjectName)(host, options, 'library');
+    await (0, project_name_and_root_utils_1.ensureRootProjectName)(options, 'library');
     const { projectName, names: projectNames, projectRoot, importPath, } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
         name: options.name,
         projectType: 'library',
@@ -41,23 +41,26 @@ async function normalizeOptions(host, options) {
         bundler,
         fileName,
         routePath: `/${projectNames.projectSimpleName}`,
-        name: isUsingTsSolutionConfig ? importPath : projectName,
+        name: isUsingTsSolutionConfig && !options.name ? importPath : projectName,
         projectRoot,
         parsedTags,
         importPath,
+        useProjectJson: options.useProjectJson ?? !isUsingTsSolutionConfig,
     };
     // Libraries with a bundler or is publishable must also be buildable.
     normalized.buildable = Boolean(normalized.bundler !== 'none' || options.buildable || options.publishable);
     normalized.inSourceTests === normalized.minimal || normalized.inSourceTests;
     if (options.appProject) {
         const appProjectConfig = (0, devkit_1.getProjects)(host).get(options.appProject);
-        if (appProjectConfig.projectType !== 'application') {
-            throw new Error(`appProject expected type of "application" but got "${appProjectConfig.projectType}"`);
+        const appProjectType = (0, ts_solution_setup_1.getProjectType)(host, appProjectConfig.root, appProjectConfig.projectType);
+        if (appProjectType !== 'application') {
+            throw new Error(`appProject expected type of "application" but got "${appProjectType}"`);
         }
+        const appSourceRoot = (0, ts_solution_setup_1.getProjectSourceRoot)(host, appProjectConfig.sourceRoot, appProjectConfig.root);
         normalized.appMain =
             appProjectConfig.targets.build?.options?.main ??
                 findMainEntry(host, appProjectConfig.root);
-        normalized.appSourceRoot = (0, devkit_1.normalizePath)(appProjectConfig.sourceRoot);
+        normalized.appSourceRoot = (0, devkit_1.normalizePath)(appSourceRoot);
         // TODO(jack): We should use appEntryFile instead of appProject so users can directly set it rather than us inferring it.
         if (!normalized.appMain) {
             throw new Error(`Could not locate project main for ${options.appProject}`);

package/src/generators/library/library.js

@@ -27,6 +27,7 @@ const add_release_config_1 = require("@nx/js/src/generators/library/utils/add-re
 async function libraryGenerator(host, schema) {
     return await libraryGeneratorInternal(host, {
         addPlugin: false,
+        useProjectJson: true,
         ...schema,
     });
 }
@@ -38,9 +39,6 @@ async function libraryGeneratorInternal(host, schema) {
     });
     tasks.push(jsInitTask);
     const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
-    if (options.isUsingTsSolutionConfig) {
-        (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(host, options.projectRoot);
-    }
     if (options.publishable === true && !schema.importPath) {
         throw new Error(`For publishable libs you have to provide a proper "--importPath" which needs to be a valid npm package name (e.g. my-awesome-lib or @myorg/my-lib)`);
     }
@@ -52,18 +50,20 @@ async function libraryGeneratorInternal(host, schema) {
         skipFormat: true,
     });
     tasks.push(initTask);
-    if (options.isUsingTsSolutionConfig) {
-        (0, devkit_1.writeJson)(host, `${options.projectRoot}/package.json`, {
-            name: options.importPath ?? options.name,
-            version: '0.0.1',
-            ...(0, determine_entry_fields_1.determineEntryFields)(options),
-            nx: options.parsedTags?.length
-                ? {
-                    tags: options.parsedTags,
-                }
-                : undefined,
-            files: options.publishable ? ['dist', '!**/*.tsbuildinfo'] : undefined,
-        });
+    const packageJson = {
+        name: options.importPath,
+        version: '0.0.1',
+        ...(0, determine_entry_fields_1.determineEntryFields)(options),
+        files: options.publishable ? ['dist', '!**/*.tsbuildinfo'] : undefined,
+    };
+    if (!options.useProjectJson) {
+        if (options.name !== options.importPath) {
+            packageJson.nx = { name: options.name };
+        }
+        if (options.parsedTags?.length) {
+            packageJson.nx ??= {};
+            packageJson.nx.tags = options.parsedTags;
+        }
     }
     else {
         (0, devkit_1.addProjectConfiguration)(host, options.name, {
@@ -74,7 +74,13 @@ async function libraryGeneratorInternal(host, schema) {
             targets: {},
         });
     }
+    if (!options.useProjectJson || options.isUsingTsSolutionConfig) {
+        (0, devkit_1.writeJson)(host, `${options.projectRoot}/package.json`, packageJson);
+    }
     (0, create_files_1.createFiles)(host, options);
+    if (options.isUsingTsSolutionConfig) {
+        await (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(host, options.projectRoot);
+    }
     const lintTask = await (0, add_linting_1.addLinting)(host, options);
     tasks.push(lintTask);
     // Set up build target

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

@@ -27,6 +27,7 @@ export interface Schema {
   minimal?: boolean;
   simpleName?: boolean;
   addPlugin?: boolean;
+  useProjectJson?: boolean;
 }
 
 export interface NormalizedSchema extends Schema {
@@ -36,6 +37,7 @@ export interface NormalizedSchema extends Schema {
   projectRoot: string;
   routePath: string;
   parsedTags: string[];
+  importPath: string;
   appMain?: string;
   appSourceRoot?: string;
   unitTestRunner: 'jest' | 'vitest' | 'none';

package/src/generators/library/schema.json

@@ -190,6 +190,10 @@
       "description": "Don't include the directory in the name of the module of the library.",
       "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/remote/remote.js

@@ -48,7 +48,10 @@ 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
@@ -62,29 +65,29 @@ async function remoteGenerator(host, schema) {
     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

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,219 @@
+"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 = {
+        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 = {
+        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/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/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";
@@ -24,6 +24,8 @@ 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.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";

package/src/utils/versions.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.svgrRollupVersion = exports.rollupPluginUrlVersion = exports.sassVersion = exports.lessVersion = exports.moduleFederationEnhancedVersion = exports.moduleFederationNodeVersion = exports.typesCorsVersion = exports.corsVersion = exports.isbotVersion = exports.typesExpressVersion = exports.expressVersion = exports.autoprefixerVersion = exports.tailwindcssVersion = exports.postcssVersion = exports.tsLibVersion = exports.babelPluginStyledComponentsVersion = exports.eslintPluginReactHooksVersion = exports.eslintPluginReactVersion = exports.eslintPluginJsxA11yVersion = exports.eslintPluginImportVersion = exports.reactReduxVersion = exports.reduxjsToolkitVersion = exports.testingLibraryDomVersion = exports.testingLibraryReactVersion = exports.reactRouterDomVersion = exports.styledJsxVersion = exports.emotionBabelPlugin = exports.emotionReactVersion = exports.emotionStyledVersion = exports.typesStyledComponentsVersion = exports.styledComponentsVersion = exports.babelCoreVersion = exports.babelPresetReactVersion = exports.typesNodeVersion = exports.reactViteVersion = exports.typesReactIsVersion = exports.typesReactIsV18Version = exports.typesReactDomVersion = exports.typesReactDomV18Version = exports.typesReactVersion = exports.typesReactV18Version = exports.babelLoaderVersion = exports.swcLoaderVersion = exports.reactIsV18Version = exports.reactIsVersion = exports.reactDomV18Version = exports.reactDomVersion = exports.reactV18Version = exports.reactVersion = exports.nxVersion = void 0;
-exports.swcPluginStyledComponentsVersion = exports.swcPluginEmotionVersion = exports.swcPluginStyledJsxVersion = void 0;
+exports.sassVersion = exports.lessVersion = exports.moduleFederationEnhancedVersion = exports.moduleFederationNodeVersion = exports.typesCorsVersion = exports.corsVersion = exports.isbotVersion = exports.typesExpressVersion = exports.expressVersion = exports.autoprefixerVersion = exports.tailwindcssVersion = exports.postcssVersion = exports.tsLibVersion = exports.babelPluginStyledComponentsVersion = exports.eslintPluginReactHooksVersion = exports.eslintPluginReactVersion = exports.eslintPluginJsxA11yVersion = exports.eslintPluginImportVersion = exports.reactReduxVersion = exports.reduxjsToolkitVersion = exports.testingLibraryDomVersion = exports.testingLibraryReactVersion = exports.reactRouterIsBotVersion = exports.reactRouterVersion = exports.reactRouterDomVersion = exports.styledJsxVersion = exports.emotionBabelPlugin = exports.emotionReactVersion = exports.emotionStyledVersion = exports.typesStyledComponentsVersion = exports.styledComponentsVersion = exports.babelCoreVersion = exports.babelPresetReactVersion = exports.typesNodeVersion = exports.reactViteVersion = exports.typesReactIsVersion = exports.typesReactIsV18Version = exports.typesReactDomVersion = exports.typesReactDomV18Version = exports.typesReactVersion = exports.typesReactV18Version = exports.babelLoaderVersion = exports.swcLoaderVersion = exports.reactIsV18Version = exports.reactIsVersion = exports.reactDomV18Version = exports.reactDomVersion = exports.reactV18Version = exports.reactVersion = exports.nxVersion = void 0;
+exports.swcPluginStyledComponentsVersion = exports.swcPluginEmotionVersion = exports.swcPluginStyledJsxVersion = exports.svgrRollupVersion = exports.rollupPluginUrlVersion = void 0;
 exports.nxVersion = require('../../package.json').version;
 exports.reactVersion = '19.0.0';
 exports.reactV18Version = '18.3.1';
@@ -18,7 +18,8 @@ exports.typesReactDomVersion = '19.0.0';
 exports.typesReactIsV18Version = '18.3.0';
 exports.typesReactIsVersion = '19.0.0';
 exports.reactViteVersion = '^4.2.0';
-exports.typesNodeVersion = '18.16.9';
+// Needed for React-Router
+exports.typesNodeVersion = '^20.0.0';
 exports.babelPresetReactVersion = '^7.14.5';
 exports.babelCoreVersion = '^7.14.5';
 exports.styledComponentsVersion = '5.3.6';
@@ -29,6 +30,8 @@ exports.emotionBabelPlugin = '11.11.0';
 // WARNING: This needs to be in sync with Next.js' dependency or else there might be issues.
 exports.styledJsxVersion = '5.1.2';
 exports.reactRouterDomVersion = '6.29.0';
+exports.reactRouterVersion = '^7.2.0';
+exports.reactRouterIsBotVersion = '^4.4.0';
 exports.testingLibraryReactVersion = '16.1.0';
 exports.testingLibraryDomVersion = '10.4.0';
 exports.reduxjsToolkitVersion = '1.9.3';