@nx/react 23.1.0-beta.4 → 23.1.0-beta.6

package/dist/src/generators/application/application.js

@@ -6,8 +6,9 @@ const tslib_1 = require("tslib");
 const internal_1 = require("@nx/devkit/internal");
 const assert_supported_react_version_1 = require("../../utils/assert-supported-react-version");
 const devkit_1 = require("@nx/devkit");
+const internal_2 = require("@nx/devkit/internal");
 const js_1 = require("@nx/js");
-const internal_2 = require("@nx/js/internal");
+const internal_3 = require("@nx/js/internal");
 const create_ts_config_1 = require("../../utils/create-ts-config");
 const init_1 = tslib_1.__importDefault(require("../init/init"));
 const create_application_files_1 = require("./lib/create-application-files");
@@ -34,7 +35,7 @@ async function applicationGenerator(tree, schema) {
 async function applicationGeneratorInternal(tree, schema) {
     (0, assert_supported_react_version_1.assertSupportedReactVersion)(tree);
     const tasks = [];
-    const addTsPlugin = (0, internal_2.shouldConfigureTsSolutionSetup)(tree, schema.addPlugin, schema.useTsSolution);
+    const addTsPlugin = (0, internal_3.shouldConfigureTsSolutionSetup)(tree, schema.addPlugin, schema.useTsSolution);
     const jsInitTask = await (0, js_1.initGenerator)(tree, {
         ...schema,
         tsConfigName: schema.rootProject ? 'tsconfig.json' : 'tsconfig.base.json',
@@ -72,18 +73,23 @@ async function applicationGeneratorInternal(tree, schema) {
     });
     tasks.push(initTask);
     if (!options.addPlugin) {
-        const nxJson = (0, devkit_1.readNxJson)(tree);
-        nxJson.targetDefaults ??= {};
-        if (!Object.keys(nxJson.targetDefaults).includes('build')) {
-            nxJson.targetDefaults.build = {
+        const nxJson = (0, devkit_1.readNxJson)(tree) ?? {};
+        const existing = findBuildDefault(nxJson.targetDefaults);
+        if (!existing) {
+            (0, internal_2.upsertTargetDefault)(tree, nxJson, {
+                target: 'build',
                 cache: true,
                 dependsOn: ['^build'],
-            };
+            });
+            (0, devkit_1.updateNxJson)(tree, nxJson);
         }
-        else if (!nxJson.targetDefaults.build.dependsOn) {
-            nxJson.targetDefaults.build.dependsOn = ['^build'];
+        else if (!existing.dependsOn) {
+            (0, internal_2.upsertTargetDefault)(tree, nxJson, {
+                target: 'build',
+                dependsOn: ['^build'],
+            });
+            (0, devkit_1.updateNxJson)(tree, nxJson);
         }
-        (0, devkit_1.updateNxJson)(tree, nxJson);
     }
     if (options.bundler === 'webpack') {
         await (0, add_webpack_1.initWebpack)(tree, options, tasks);
@@ -102,7 +108,7 @@ async function applicationGeneratorInternal(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) {
-        await (0, internal_2.addProjectToTsSolutionWorkspace)(tree, options.appProjectRoot);
+        await (0, internal_3.addProjectToTsSolutionWorkspace)(tree, options.appProjectRoot);
     }
     const lintTask = await (0, add_linting_1.addLinting)(tree, options);
     tasks.push(lintTask);
@@ -151,14 +157,14 @@ async function applicationGeneratorInternal(tree, schema) {
         });
     }
     // Only for the new TS solution
-    (0, internal_2.updateTsconfigFiles)(tree, options.appProjectRoot, 'tsconfig.app.json', {
+    (0, internal_3.updateTsconfigFiles)(tree, options.appProjectRoot, 'tsconfig.app.json', {
         jsx: 'react-jsx',
         module: 'esnext',
         moduleResolution: 'bundler',
     }, options.linter === 'eslint'
         ? ['eslint.config.js', 'eslint.config.cjs', 'eslint.config.mjs']
         : undefined, options.useReactRouter ? 'app' : 'src');
-    (0, internal_2.sortPackageJsonFields)(tree, options.appProjectRoot);
+    (0, internal_3.sortPackageJsonFields)(tree, options.appProjectRoot);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }
@@ -167,4 +173,19 @@ async function applicationGeneratorInternal(tree, schema) {
     });
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
+function findBuildDefault(td) {
+    if (!td)
+        return undefined;
+    const value = td['build'];
+    if (value === undefined)
+        return undefined;
+    if (Array.isArray(value)) {
+        const found = value.find((e) => e.filter === undefined);
+        if (!found)
+            return undefined;
+        const { filter: _f, ...rest } = found;
+        return rest;
+    }
+    return value;
+}
 exports.default = applicationGenerator;

package/dist/src/generators/setup-ssr/setup-ssr.js

@@ -2,15 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupSsrGenerator = setupSsrGenerator;
 const devkit_1 = require("@nx/devkit");
+const internal_1 = require("@nx/devkit/internal");
 const assert_supported_react_version_1 = require("../../utils/assert-supported-react-version");
-const internal_1 = require("@nx/js/internal");
+const internal_2 = require("@nx/js/internal");
 const path_1 = require("path");
 const ast_utils_1 = require("../../utils/ast-utils");
 const versions_1 = require("../../utils/versions");
 let tsModule;
 function readEntryFile(host, path) {
     if (!tsModule) {
-        tsModule = (0, internal_1.ensureTypescript)();
+        tsModule = (0, internal_2.ensureTypescript)();
     }
     const content = host.read(path, 'utf-8');
     return {
@@ -45,7 +46,7 @@ async function setupSsrGenerator(tree, options) {
     ].map((importPath) => {
         return {
             importPath,
-            filePath: (0, devkit_1.joinPathFragments)((0, internal_1.getProjectSourceRoot)(projectConfig, tree), `${importPath}.tsx`),
+            filePath: (0, devkit_1.joinPathFragments)((0, internal_2.getProjectSourceRoot)(projectConfig, tree), `${importPath}.tsx`),
         };
     });
     const appComponentInfo = appImportCandidates.find((candidate) => tree.exists(candidate.filePath));
@@ -161,9 +162,6 @@ async function setupSsrGenerator(tree, options) {
             'server',
         ];
     }
-    nxJson.targetDefaults ??= {};
-    nxJson.targetDefaults['server'] ??= {};
-    nxJson.targetDefaults.server.cache = true;
     (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, 'files'), projectRoot, {
         tmpl: '',
         port: Number(options?.serverPort) || 4200,
@@ -184,6 +182,7 @@ async function setupSsrGenerator(tree, options) {
         const changes = (0, devkit_1.applyChangesToString)(content, (0, ast_utils_1.addStaticRouter)(serverEntry, source));
         tree.write(serverEntry, changes);
     }
+    (0, internal_1.upsertTargetDefault)(tree, nxJson, { target: 'server', cache: true });
     (0, devkit_1.updateNxJson)(tree, nxJson);
     const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {
         express: versions_1.expressVersion,

package/dist/src/migrations/update-23-1-0/ai-instructions-for-react-19.md

@@ -1,6 +1,6 @@
 # React 18 -> 19 Migration Instructions for LLM
 
-Migrate the Nx workspace's React projects from 18 to 19. Run the codemods first, fix the rest by hand, build after each project.
+Migrate the Nx workspace's React projects from 18 to 19. Run the codemods first, fix the rest by hand, typecheck and build after each project.
 
 ## Step 1: Codemods
 
@@ -35,17 +35,55 @@ npx types-react-codemod@latest refobject-defaults ./PROJECT_PATH       # RefObje
 
 ## Step 4: Types
 
-`@types/react@19`: `useRef` needs an initial arg, implicit `children` removed (declare it on props), `JSX` global moved. The types codemod handles most.
+`@types/react@19` moves the `JSX` namespace out of global scope into the `react` module (`React.JSX`); `useRef` needs an initial arg; implicit `children` is removed (declare it on props). The `scoped-jsx` codemod (part of `preset-19`) rewrites JSX type _usages_: it points `JSX.Element`, `JSX.IntrinsicElements`, and the like at the `react`-scoped namespace.
+
+It does NOT rewrite global `JSX` _augmentations_. A custom element or web component typed with a global augmentation:
+
+```ts
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'my-element': ...;
+    }
+  }
+}
+```
+
+no longer merges into the JSX that React resolves under the automatic runtime (`jsx: "react-jsx"`), so the element becomes a `TS2339` unknown-property error in every consuming `.tsx`. Re-target the augmentation at the `react` module:
+
+```ts
+import type {} from 'react';
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'my-element': ...;
+    }
+  }
+}
+```
+
+The `import type {} from 'react'` is required when the file (or its tsconfig `types`) does not otherwise pull in `react`; without `react` in the program the augmentation fails with `TS2664: Invalid module name in augmentation`. Keep any `eslint-disable` comment already on the `namespace` line.
 
 ## Validate
 
+Run build and typecheck across the affected projects, then lint and test:
+
 ```bash
 nx run PROJECT:build
-nx affected -t build,lint,test
+nx affected -t build,typecheck,lint,test
 ```
 
+Most React 19 breakages are type-level (the `JSX` namespace move, implicit `children`, ref types) and surface only at `typecheck`, not at `build` or `test`. A type change in a shared library often errors only in its consumers, so re-run until every project that depends on what you changed is green, not just the project you edited.
+
 ## Notes for LLM
 
 - Codemods first (API + types), then manual.
-- One project at a time, build after each.
+- One project at a time; typecheck and build after each.
+- A custom element or JSX augmentation may live in a non-React library that React code pulls in through a bare side-effect import (`import '@scope/ui';`). Fix it there; `typecheck` on the consumers points you to it.
 - Confirm third-party libs support React 19 before bumping.
+
+## References
+
+- React 19 upgrade guide (the TypeScript section covers the `JSX`, `useRef`, and `ref` changes): https://react.dev/blog/2024/04/25/react-19-upgrade-guide
+- `types-react-codemod` (what each codemod does, including `scoped-jsx`): https://github.com/eps1lon/types-react-codemod

package/dist/src/utils/add-mf-env-to-inputs.js

@@ -2,24 +2,28 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addMfEnvToTargetDefaultInputs = addMfEnvToTargetDefaultInputs;
 const devkit_1 = require("@nx/devkit");
+const internal_1 = require("@nx/devkit/internal");
 function addMfEnvToTargetDefaultInputs(tree, bundler) {
-    const nxJson = (0, devkit_1.readNxJson)(tree);
+    const nxJson = (0, devkit_1.readNxJson)(tree) ?? {};
     const executor = bundler === 'rspack' ? '@nx/rspack:rspack' : '@nx/webpack:webpack';
     const mfEnvVar = 'NX_MF_DEV_REMOTES';
-    nxJson.targetDefaults ??= {};
-    nxJson.targetDefaults[executor] ??= {};
-    nxJson.targetDefaults[executor].inputs ??= ['production', '^production'];
-    nxJson.targetDefaults[executor].dependsOn ??= ['^build'];
+    const existing = (0, internal_1.findTargetDefault)(nxJson.targetDefaults, { executor });
+    const inputs = [...(existing?.inputs ?? ['production', '^production'])];
     let mfEnvVarExists = false;
-    for (const input of nxJson.targetDefaults[executor].inputs) {
+    for (const input of inputs) {
         if (typeof input === 'object' && input['env'] === mfEnvVar) {
             mfEnvVarExists = true;
             break;
         }
     }
     if (!mfEnvVarExists) {
-        nxJson.targetDefaults[executor].inputs.push({ env: mfEnvVar });
+        inputs.push({ env: mfEnvVar });
     }
-    nxJson.targetDefaults[executor].cache = true;
+    (0, internal_1.upsertTargetDefault)(tree, nxJson, {
+        executor,
+        cache: true,
+        inputs,
+        dependsOn: existing?.dependsOn ?? ['^build'],
+    });
     (0, devkit_1.updateNxJson)(tree, nxJson);
 }

package/dist/src/utils/ct-utils.js

@@ -32,7 +32,7 @@ async function configureCypressCT(tree, options) {
             throw new Error(`Cypress Component Testing is not currently supported for this project. Either 'executer' is not defined in '${target} target' of '${project} project.json' or executer present is not valid one. Valid ones are ${JSON.stringify([...options.validExecutorNames])}. Please check https://github.com/nrwl/nx/issues/21546 for more information.`);
         }
     }
-    const { addDefaultCTConfig, getProjectCypressConfigPath, } = require('@nx/cypress/internal');
+    const { addDefaultCTConfig, getProjectCypressConfigPath, getInstalledCypressMajorVersion, } = require('@nx/cypress/internal');
     const ctConfigOptions = {
         bundler: options.bundler ?? (await getActualBundler(tree, options, found)),
     };
@@ -49,7 +49,7 @@ async function configureCypressCT(tree, options) {
         ctConfigOptions.buildTarget = found.target;
     }
     const cypressConfigFilePath = getProjectCypressConfigPath(tree, projectConfig.root);
-    const updatedCyConfig = await addDefaultCTConfig(tree.read(cypressConfigFilePath, 'utf-8'), ctConfigOptions, '@nx/react/plugins/component-testing');
+    const updatedCyConfig = await addDefaultCTConfig(tree.read(cypressConfigFilePath, 'utf-8'), ctConfigOptions, '@nx/react/plugins/component-testing', getInstalledCypressMajorVersion(tree));
     tree.write(cypressConfigFilePath, updatedCyConfig);
     return found;
 }

package/dist/src/utils/versions.d.ts

@@ -26,7 +26,7 @@ export declare const reduxjsToolkitVersion = "^2.5.0";
 export declare const reactReduxVersion = "^9.2.0";
 export declare const eslintPluginImportVersion = "2.31.0";
 export declare const eslintPluginJsxA11yVersion = "6.10.1";
-export declare const eslintPluginReactVersion = "7.35.0";
+export declare const eslintPluginReactVersion = "^7.35.0";
 export declare const eslintPluginReactHooksVersion = "5.0.0";
 export declare const tsLibVersion = "^2.3.0";
 export declare const postcssVersion = "8.4.38";

package/dist/src/utils/versions.js

@@ -33,7 +33,7 @@ exports.reduxjsToolkitVersion = '^2.5.0';
 exports.reactReduxVersion = '^9.2.0';
 exports.eslintPluginImportVersion = '2.31.0';
 exports.eslintPluginJsxA11yVersion = '6.10.1';
-exports.eslintPluginReactVersion = '7.35.0';
+exports.eslintPluginReactVersion = '^7.35.0';
 exports.eslintPluginReactHooksVersion = '5.0.0';
 exports.tsLibVersion = '^2.3.0';
 exports.postcssVersion = '8.4.38';

package/migrations.json

@@ -246,6 +246,18 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "23.1.0-eslint-plugin-react": {
+      "version": "23.1.0-beta.5",
+      "requires": {
+        "eslint-plugin-react": "<7.35.0"
+      },
+      "packages": {
+        "eslint-plugin-react": {
+          "version": "^7.35.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "23.1.0-beta.4",
+  "version": "23.1.0-beta.6",
   "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": {
@@ -108,25 +108,25 @@
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.5",
     "semver": "^7.6.3",
-    "@nx/devkit": "23.1.0-beta.4",
-    "@nx/js": "23.1.0-beta.4",
-    "@nx/eslint": "23.1.0-beta.4",
-    "@nx/web": "23.1.0-beta.4",
-    "@nx/module-federation": "23.1.0-beta.4",
-    "@nx/rollup": "23.1.0-beta.4"
+    "@nx/devkit": "23.1.0-beta.6",
+    "@nx/js": "23.1.0-beta.6",
+    "@nx/eslint": "23.1.0-beta.6",
+    "@nx/web": "23.1.0-beta.6",
+    "@nx/module-federation": "23.1.0-beta.6",
+    "@nx/rollup": "23.1.0-beta.6"
   },
   "devDependencies": {
-    "@nx/cypress": "23.1.0-beta.4",
-    "@nx/playwright": "23.1.0-beta.4",
-    "@nx/rsbuild": "23.1.0-beta.4",
-    "@nx/vite": "23.1.0-beta.4",
-    "@nx/vitest": "23.1.0-beta.4",
-    "@nx/webpack": "23.1.0-beta.4",
-    "@nx/storybook": "23.1.0-beta.4",
-    "nx": "23.1.0-beta.4"
+    "@nx/cypress": "23.1.0-beta.6",
+    "@nx/playwright": "23.1.0-beta.6",
+    "@nx/rsbuild": "23.1.0-beta.6",
+    "@nx/vite": "23.1.0-beta.6",
+    "@nx/vitest": "23.1.0-beta.6",
+    "@nx/webpack": "23.1.0-beta.6",
+    "@nx/storybook": "23.1.0-beta.6",
+    "nx": "23.1.0-beta.6"
   },
   "optionalDependencies": {
-    "@nx/vite": "23.1.0-beta.4"
+    "@nx/vite": "23.1.0-beta.6"
   },
   "publishConfig": {
     "access": "public"