@nx/react 20.4.0-beta.0 → 20.4.0-beta.2

package/migrations.json

@@ -197,6 +197,15 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "20.3.0": {
+      "version": "20.3.0-beta.0",
+      "packages": {
+        "@testing-library/react": {
+          "version": "16.1.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "20.4.0-beta.0",
+  "version": "20.4.0-beta.2",
   "private": false,
   "description": "The React plugin for Nx contains executors and generators for managing React applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Vitest, Playwright, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -38,13 +38,14 @@
     "minimatch": "9.0.3",
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
-    "@nx/devkit": "20.4.0-beta.0",
-    "@nx/js": "20.4.0-beta.0",
-    "@nx/eslint": "20.4.0-beta.0",
-    "@nx/web": "20.4.0-beta.0",
-    "@nx/module-federation": "20.4.0-beta.0",
+    "@nx/devkit": "20.4.0-beta.2",
+    "@nx/js": "20.4.0-beta.2",
+    "@nx/eslint": "20.4.0-beta.2",
+    "@nx/web": "20.4.0-beta.2",
+    "@nx/module-federation": "20.4.0-beta.2",
     "express": "^4.19.2",
-    "http-proxy-middleware": "^3.0.3"
+    "http-proxy-middleware": "^3.0.3",
+    "semver": "^7.6.3"
   },
   "publishConfig": {
     "access": "public"

package/src/generators/application/application.js

@@ -25,6 +25,7 @@ const add_webpack_1 = require("./lib/bundlers/add-webpack");
 const add_rspack_1 = require("./lib/bundlers/add-rspack");
 const add_rsbuild_1 = require("./lib/bundlers/add-rsbuild");
 const add_vite_1 = require("./lib/bundlers/add-vite");
+const sort_fields_1 = require("@nx/js/src/utils/package-json/sort-fields");
 async function applicationGenerator(tree, schema) {
     return await applicationGeneratorInternal(tree, {
         addPlugin: false,
@@ -39,9 +40,15 @@ async function applicationGeneratorInternal(tree, schema) {
         skipFormat: true,
         addTsPlugin: schema.useTsSolution,
         formatter: schema.formatter,
+        platform: 'web',
     });
     tasks.push(jsInitTask);
     const options = await (0, normalize_options_1.normalizeOptions)(tree, schema);
+    // If we are using the new TS solution
+    // We need to update the workspace file (package.json or pnpm-workspaces.yaml) to include the new project
+    if (options.isUsingTsSolutionConfig) {
+        (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(tree, options.appProjectRoot);
+    }
     (0, show_possible_warnings_1.showPossibleWarnings)(tree, options);
     const initTask = await (0, init_1.default)(tree, {
         ...options,
@@ -108,7 +115,7 @@ async function applicationGeneratorInternal(tree, schema) {
     }
     // Handle tsconfig.spec.json for jest or vitest
     (0, update_jest_config_1.updateSpecConfig)(tree, options);
-    const stylePreprocessorTask = (0, install_common_dependencies_1.installCommonDependencies)(tree, options);
+    const stylePreprocessorTask = await (0, install_common_dependencies_1.installCommonDependencies)(tree, options);
     tasks.push(stylePreprocessorTask);
     const styledTask = (0, add_styled_dependencies_1.addStyledModuleDependencies)(tree, options);
     tasks.push(styledTask);
@@ -125,11 +132,7 @@ async function applicationGeneratorInternal(tree, schema) {
     }, options.linter === 'eslint'
         ? ['eslint.config.js', 'eslint.config.cjs', 'eslint.config.mjs']
         : undefined);
-    // If we are using the new TS solution
-    // We need to update the workspace file (package.json or pnpm-workspaces.yaml) to include the new project
-    if (options.isUsingTsSolutionConfig) {
-        (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(tree, options.appProjectRoot);
-    }
+    (0, sort_fields_1.sortPackageJsonFields)(tree, options.appProjectRoot);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }

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

@@ -5,7 +5,6 @@ const devkit_1 = require("@nx/devkit");
 const has_webpack_plugin_1 = require("../../../utils/has-webpack-plugin");
 const maybe_js_1 = require("../../../utils/maybe-js");
 const has_rspack_plugin_1 = require("../../../utils/has-rspack-plugin");
-const get_import_path_1 = require("@nx/js/src/utils/get-import-path");
 function addProject(host, options) {
     const project = {
         root: options.appProjectRoot,
@@ -31,15 +30,14 @@ function addProject(host, options) {
     }
     if (options.isUsingTsSolutionConfig) {
         (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json'), {
-            name: (0, get_import_path_1.getImportPath)(host, options.name),
+            name: options.projectName,
             version: '0.0.1',
             private: true,
-            nx: {
-                name: options.name,
-                projectType: 'application',
-                sourceRoot: `${options.appProjectRoot}/src`,
-                tags: options.parsedTags?.length ? options.parsedTags : undefined,
-            },
+            nx: options.parsedTags?.length
+                ? {
+                    tags: options.parsedTags,
+                }
+                : undefined,
         });
     }
     if (!options.isUsingTsSolutionConfig || options.alwaysGenerateProjectJson) {

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

@@ -13,7 +13,7 @@ function getAppTests(options) {
     ${options.routing
         ? 'const { getByText } = render(<BrowserRouter><App /></BrowserRouter>);'
         : 'const { getByText } = render(<App />);'}
-    expect(getByText(/Welcome ${options.projectName}/gi)).toBeTruthy();
+    expect(getByText(new RegExp('Welcome ${options.projectName}', 'gi'))).toBeTruthy();
   });
 `;
 }

package/src/generators/application/lib/install-common-dependencies.d.ts

@@ -1,3 +1,3 @@
 import { Tree } from '@nx/devkit';
 import { NormalizedSchema } from '../schema';
-export declare function installCommonDependencies(host: Tree, options: NormalizedSchema): import("@nx/devkit").GeneratorCallback;
+export declare function installCommonDependencies(host: Tree, options: NormalizedSchema): Promise<import("@nx/devkit").GeneratorCallback>;

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

@@ -3,15 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.installCommonDependencies = installCommonDependencies;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../../utils/versions");
-function installCommonDependencies(host, options) {
+const version_utils_1 = require("../../../utils/version-utils");
+async function installCommonDependencies(host, options) {
     if (options.skipPackageJson) {
         return () => { };
     }
+    const reactDeps = await (0, version_utils_1.getReactDependenciesVersionsToInstall)(host);
     const dependencies = {};
     const devDependencies = {
         '@types/node': versions_1.typesNodeVersion,
-        '@types/react': versions_1.typesReactVersion,
-        '@types/react-dom': versions_1.typesReactDomVersion,
+        '@types/react': reactDeps['@types/react'],
+        '@types/react-dom': reactDeps['@types/react-dom'],
     };
     if (options.bundler !== 'vite') {
         dependencies['tslib'] = versions_1.tsLibVersion;
@@ -41,6 +43,7 @@ function installCommonDependencies(host, options) {
     }
     if (options.unitTestRunner && options.unitTestRunner !== 'none') {
         devDependencies['@testing-library/react'] = versions_1.testingLibraryReactVersion;
+        devDependencies['@testing-library/dom'] = versions_1.testingLibraryDomVersion;
     }
     return (0, devkit_1.addDependenciesToPackageJson)(host, {}, devDependencies);
 }

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

@@ -8,6 +8,7 @@ const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project
 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);
@@ -41,10 +42,13 @@ async function normalizeOptions(host, options) {
         ? null
         : options.style;
     (0, assertion_1.assertValidStyle)(options.style);
+    const isUsingTsSolutionConfig = (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host);
     const normalized = {
         ...options,
-        name: (0, devkit_1.names)(options.name).fileName,
-        projectName: appProjectName,
+        name: appProjectName,
+        projectName: isUsingTsSolutionConfig
+            ? (0, get_import_path_1.getImportPath)(host, appProjectName)
+            : appProjectName,
         appProjectRoot,
         e2eProjectName,
         e2eProjectRoot,
@@ -52,7 +56,7 @@ async function normalizeOptions(host, options) {
         fileName,
         styledModule,
         hasStyles: options.style !== 'none',
-        isUsingTsSolutionConfig: (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host),
+        isUsingTsSolutionConfig,
     };
     normalized.routing = normalized.routing ?? false;
     normalized.strict = normalized.strict ?? true;

package/src/generators/application/schema.json

@@ -101,7 +101,7 @@
     "bundler": {
       "description": "The bundler to use.",
       "type": "string",
-      "enum": ["vite", "webpack", "rspack", "rsbuild"],
+      "enum": ["vite", "rsbuild", "rspack", "webpack"],
       "x-prompt": "Which bundler do you want to use to build the application?",
       "default": "vite",
       "x-priority": "important"

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

@@ -4,6 +4,7 @@ exports.normalizeOptions = normalizeOptions;
 const devkit_1 = require("@nx/devkit");
 const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
 const assertion_1 = require("../../../utils/assertion");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 async function normalizeOptions(tree, options) {
     (0, assertion_1.assertValidStyle)(options.style);
     const { artifactName: name, directory, fileName, filePath, fileExtension, fileExtensionType, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(tree, {
@@ -19,7 +20,8 @@ async function normalizeOptions(tree, options) {
     const styledModule = /^(css|scss|less|none)$/.test(options.style)
         ? null
         : options.style;
-    if (options.export && projectType === 'application') {
+    if (options.export &&
+        (0, ts_solution_setup_1.getProjectType)(tree, projectRoot, projectType) === 'application') {
         devkit_1.logger.warn(`The "--export" option should not be used with applications and will do nothing.`);
     }
     options.classComponent = options.classComponent ?? false;

package/src/generators/hook/hook.js

@@ -7,6 +7,7 @@ const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/a
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
 const path_1 = require("path");
 const ast_utils_1 = require("../../utils/ast-utils");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 async function hookGenerator(host, schema) {
     const options = await normalizeOptions(host, schema);
     createFiles(host, options);
@@ -61,8 +62,9 @@ async function normalizeOptions(host, options) {
             : `use${className}`;
     const hookTypeName = (0, devkit_1.names)(hookName).className;
     const project = (0, devkit_1.getProjects)(host).get(projectName);
-    const { sourceRoot: projectSourceRoot, projectType } = project;
-    if (options.export && projectType === 'application') {
+    const { root, sourceRoot: projectSourceRoot, projectType } = project;
+    if (options.export &&
+        (0, ts_solution_setup_1.getProjectType)(host, root, projectType) === 'application') {
         devkit_1.logger.warn(`The "--export" option should not be used with applications and will do nothing.`);
     }
     return {

package/src/generators/host/host.js

@@ -43,7 +43,7 @@ async function hostGenerator(host, schema) {
     const initTask = await (0, application_1.default)(host, {
         ...options,
         directory: options.appProjectRoot,
-        name: options.projectName,
+        name: options.name,
         // The target use-case is loading remotes as child routes, thus always enable routing.
         routing: true,
         skipFormat: true,

package/src/generators/init/init.d.ts

@@ -1,4 +1,4 @@
 import { type GeneratorCallback, type Tree } from '@nx/devkit';
 import { InitSchema } from './schema';
-export declare function reactInitGenerator(host: Tree, schema: InitSchema): Promise<GeneratorCallback>;
+export declare function reactInitGenerator(tree: Tree, schema: InitSchema): Promise<GeneratorCallback>;
 export default reactInitGenerator;

package/src/generators/init/init.js

@@ -3,19 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.reactInitGenerator = reactInitGenerator;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../utils/versions");
-async function reactInitGenerator(host, schema) {
+const version_utils_1 = require("../../utils/version-utils");
+async function reactInitGenerator(tree, schema) {
     const tasks = [];
     if (!schema.skipPackageJson) {
-        tasks.push((0, devkit_1.removeDependenciesFromPackageJson)(host, ['@nx/react'], []));
-        tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, {
-            react: versions_1.reactVersion,
-            'react-dom': versions_1.reactDomVersion,
+        tasks.push((0, devkit_1.removeDependenciesFromPackageJson)(tree, ['@nx/react'], []));
+        const reactDeps = await (0, version_utils_1.getReactDependenciesVersionsToInstall)(tree);
+        tasks.push((0, devkit_1.addDependenciesToPackageJson)(tree, {
+            react: reactDeps.react,
+            'react-dom': reactDeps['react-dom'],
         }, {
             '@nx/react': versions_1.nxVersion,
         }, undefined, schema.keepExistingVersions));
     }
     if (!schema.skipFormat) {
-        await (0, devkit_1.formatFiles)(host);
+        await (0, devkit_1.formatFiles)(tree);
     }
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }

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

@@ -41,7 +41,7 @@ async function normalizeOptions(host, options) {
         bundler,
         fileName,
         routePath: `/${projectNames.projectSimpleName}`,
-        name: projectName,
+        name: isUsingTsSolutionConfig ? importPath : projectName,
         projectRoot,
         parsedTags,
         importPath,

package/src/generators/library/library.js

@@ -22,6 +22,7 @@ const install_common_dependencies_1 = require("./lib/install-common-dependencies
 const set_defaults_1 = require("./lib/set-defaults");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 const determine_entry_fields_1 = require("./lib/determine-entry-fields");
+const sort_fields_1 = require("@nx/js/src/utils/package-json/sort-fields");
 async function libraryGenerator(host, schema) {
     return await libraryGeneratorInternal(host, {
         addPlugin: false,
@@ -36,6 +37,9 @@ 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,12 +56,11 @@ async function libraryGeneratorInternal(host, schema) {
             name: options.importPath,
             version: '0.0.1',
             ...(0, determine_entry_fields_1.determineEntryFields)(options),
-            nx: {
-                name: options.importPath === options.name ? undefined : options.name,
-                projectType: 'library',
-                sourceRoot: `${options.projectRoot}/src`,
-                tags: options.parsedTags?.length ? options.parsedTags : undefined,
-            },
+            nx: options.parsedTags?.length
+                ? {
+                    tags: options.parsedTags,
+                }
+                : undefined,
             files: options.publishable ? ['dist', '!**/*.tsbuildinfo'] : undefined,
         });
     }
@@ -206,9 +209,7 @@ async function libraryGeneratorInternal(host, schema) {
     }, options.linter === 'eslint'
         ? ['eslint.config.js', 'eslint.config.cjs', 'eslint.config.mjs']
         : undefined);
-    if (options.isUsingTsSolutionConfig) {
-        (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(host, options.projectRoot);
-    }
+    (0, sort_fields_1.sortPackageJsonFields)(host, options.projectRoot);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }

package/src/generators/redux/redux.js

@@ -8,6 +8,7 @@ const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
 const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 let tsModule;
 async function reduxGenerator(host, schema) {
     const options = await normalizeOptions(host, schema);
@@ -88,12 +89,12 @@ async function normalizeOptions(host, options) {
     const extraNames = (0, devkit_1.names)(name);
     const projects = (0, devkit_1.getProjects)(host);
     const project = projects.get(projectName);
-    const { sourceRoot, projectType } = project;
+    const { root, sourceRoot, projectType } = project;
     const tsConfigJson = (0, devkit_1.readJson)(host, (0, js_1.getRootTsConfigPathInTree)(host));
     const tsPaths = tsConfigJson.compilerOptions
         ? tsConfigJson.compilerOptions.paths || {}
         : {};
-    const modulePath = projectType === 'application'
+    const modulePath = (0, ts_solution_setup_1.getProjectType)(host, root, projectType) === 'application'
         ? options.path
             ? `./app/${options.path}/${extraNames.fileName}.slice`
             : `./app/${extraNames.fileName}.slice`

package/src/generators/remote/remote.js

@@ -62,29 +62,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.projectName);
+        const isValidRemote = (0, js_1.isValidVariable)(options.name);
         if (!isValidRemote.isValid) {
-            throw new Error(`Invalid remote name provided: ${options.projectName}. ${isValidRemote.message}`);
+            throw new Error(`Invalid remote name provided: ${options.name}. ${isValidRemote.message}`);
         }
     }
     await (0, project_name_and_root_utils_1.ensureProjectName)(host, 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.projectName)) {
-        throw new Error((0, devkit_1.stripIndents) `Invalid remote name: ${options.projectName}. Remote project names must:
+    if (!remoteNameRegex.test(options.name)) {
+        throw new Error((0, devkit_1.stripIndents) `Invalid remote name: ${options.name}. 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.projectName,
+        name: options.name,
         skipFormat: true,
         alwaysGenerateProjectJson: true,
     });
     tasks.push(initAppTask);
-    if (schema.host) {
-        (0, update_host_with_remote_1.updateHostWithRemote)(host, schema.host, options.projectName);
+    if (options.host) {
+        (0, update_host_with_remote_1.updateHostWithRemote)(host, options.host, options.name);
     }
     // Module federation requires bootstrap code to be dynamically imported.
     // Renaming original entry file so we can use `import(./bootstrap)` in

package/src/generators/stories/stories.js

@@ -11,10 +11,11 @@ const path_1 = require("path");
 const minimatch_1 = require("minimatch");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
 const versions_1 = require("../../utils/versions");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 let tsModule;
 async function projectRootPath(tree, config) {
     let projectDir;
-    if (config.projectType === 'application') {
+    if ((0, ts_solution_setup_1.getProjectType)(tree, config.root, config.projectType) === 'application') {
         const isNextJs = await isNextJsProject(tree, config);
         if (isNextJs) {
             // Next.js apps

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

@@ -0,0 +1,14 @@
+import { type Tree } from '@nx/devkit';
+type ReactDependenciesVersions = {
+    react: string;
+    'react-dom': string;
+    'react-is': string;
+    '@types/react': string;
+    '@types/react-dom': string;
+    '@types/react-is': string;
+};
+export declare function getReactDependenciesVersionsToInstall(tree: Tree): Promise<ReactDependenciesVersions>;
+export declare function isReact18(tree: Tree): Promise<boolean>;
+export declare function getInstalledReactVersion(tree: Tree): string;
+export declare function getInstalledReactVersionFromGraph(): Promise<string>;
+export {};

package/src/utils/version-utils.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getReactDependenciesVersionsToInstall = getReactDependenciesVersionsToInstall;
+exports.isReact18 = isReact18;
+exports.getInstalledReactVersion = getInstalledReactVersion;
+exports.getInstalledReactVersionFromGraph = getInstalledReactVersionFromGraph;
+const devkit_1 = require("@nx/devkit");
+const semver_1 = require("semver");
+const versions_1 = require("./versions");
+async function getReactDependenciesVersionsToInstall(tree) {
+    if (await isReact18(tree)) {
+        return {
+            react: versions_1.reactV18Version,
+            'react-dom': versions_1.reactDomV18Version,
+            'react-is': versions_1.reactIsV18Version,
+            '@types/react': versions_1.typesReactV18Version,
+            '@types/react-dom': versions_1.typesReactDomV18Version,
+            '@types/react-is': versions_1.typesReactIsV18Version,
+        };
+    }
+    else {
+        return {
+            react: versions_1.reactVersion,
+            'react-dom': versions_1.reactDomVersion,
+            'react-is': versions_1.reactIsVersion,
+            '@types/react': versions_1.typesReactVersion,
+            '@types/react-dom': versions_1.typesReactDomVersion,
+            '@types/react-is': versions_1.typesReactIsVersion,
+        };
+    }
+}
+async function isReact18(tree) {
+    let installedReactVersion = await getInstalledReactVersionFromGraph();
+    if (!installedReactVersion) {
+        installedReactVersion = getInstalledReactVersion(tree);
+    }
+    return (0, semver_1.major)(installedReactVersion) === 18;
+}
+function getInstalledReactVersion(tree) {
+    const pkgJson = (0, devkit_1.readJson)(tree, 'package.json');
+    const installedReactVersion = pkgJson.dependencies && pkgJson.dependencies['react'];
+    if (!installedReactVersion ||
+        installedReactVersion === 'latest' ||
+        installedReactVersion === 'next') {
+        return (0, semver_1.clean)(versions_1.reactVersion) ?? (0, semver_1.coerce)(versions_1.reactVersion).version;
+    }
+    return (0, semver_1.clean)(installedReactVersion) ?? (0, semver_1.coerce)(installedReactVersion).version;
+}
+async function getInstalledReactVersionFromGraph() {
+    const graph = await (0, devkit_1.createProjectGraphAsync)();
+    const reactDep = graph.externalNodes?.['npm:react'];
+    if (!reactDep) {
+        return undefined;
+    }
+    return (0, semver_1.clean)(reactDep.data.version) ?? (0, semver_1.coerce)(reactDep.data.version).version;
+}

package/src/utils/versions.d.ts

@@ -1,12 +1,18 @@
 export declare const nxVersion: any;
-export declare const reactVersion = "18.3.1";
-export declare const reactDomVersion = "18.3.1";
-export declare const reactIsVersion = "18.3.1";
+export declare const reactVersion = "19.0.0";
+export declare const reactV18Version = "18.3.1";
+export declare const reactDomVersion = "19.0.0";
+export declare const reactDomV18Version = "18.3.1";
+export declare const reactIsVersion = "19.0.0";
+export declare const reactIsV18Version = "18.3.1";
 export declare const swcLoaderVersion = "0.1.15";
 export declare const babelLoaderVersion = "^9.1.2";
-export declare const typesReactVersion = "18.3.1";
-export declare const typesReactDomVersion = "18.3.0";
-export declare const typesReactIsVersion = "18.3.0";
+export declare const typesReactV18Version = "18.3.1";
+export declare const typesReactVersion = "19.0.0";
+export declare const typesReactDomV18Version = "18.3.0";
+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 babelPresetReactVersion = "^7.14.5";
@@ -18,7 +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.11.2";
-export declare const testingLibraryReactVersion = "15.0.6";
+export declare const testingLibraryReactVersion = "16.1.0";
+export declare const testingLibraryDomVersion = "10.4.0";
 export declare const reduxjsToolkitVersion = "1.9.3";
 export declare const reactReduxVersion = "8.0.5";
 export declare const eslintPluginImportVersion = "2.31.0";

package/src/utils/versions.js

@@ -1,15 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.swcPluginStyledComponentsVersion = exports.swcPluginEmotionVersion = exports.swcPluginStyledJsxVersion = 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.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.typesReactDomVersion = exports.typesReactVersion = exports.babelLoaderVersion = exports.swcLoaderVersion = exports.reactIsVersion = exports.reactDomVersion = exports.reactVersion = exports.nxVersion = void 0;
+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.nxVersion = require('../../package.json').version;
-exports.reactVersion = '18.3.1';
-exports.reactDomVersion = '18.3.1';
-exports.reactIsVersion = '18.3.1';
+exports.reactVersion = '19.0.0';
+exports.reactV18Version = '18.3.1';
+exports.reactDomVersion = '19.0.0';
+exports.reactDomV18Version = '18.3.1';
+exports.reactIsVersion = '19.0.0';
+exports.reactIsV18Version = '18.3.1';
 exports.swcLoaderVersion = '0.1.15';
 exports.babelLoaderVersion = '^9.1.2';
-exports.typesReactVersion = '18.3.1';
-exports.typesReactDomVersion = '18.3.0';
-exports.typesReactIsVersion = '18.3.0';
+exports.typesReactV18Version = '18.3.1';
+exports.typesReactVersion = '19.0.0';
+exports.typesReactDomV18Version = '18.3.0';
+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';
 exports.babelPresetReactVersion = '^7.14.5';
@@ -22,7 +29,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.11.2';
-exports.testingLibraryReactVersion = '15.0.6';
+exports.testingLibraryReactVersion = '16.1.0';
+exports.testingLibraryDomVersion = '10.4.0';
 exports.reduxjsToolkitVersion = '1.9.3';
 exports.reactReduxVersion = '8.0.5';
 exports.eslintPluginImportVersion = '2.31.0';