@nx/react 23.0.0-rc.4 → 23.1.0-beta.0

package/README.md

@@ -7,13 +7,12 @@
 
 <div style="text-align: center;">
 
-[![CircleCI](https://circleci.com/gh/nrwl/nx.svg?style=svg)](https://circleci.com/gh/nrwl/nx)
 [![License](https://img.shields.io/npm/l/@nx/workspace.svg?style=flat-square)]()
 [![NPM Version](https://badge.fury.io/js/nx.svg)](https://www.npmjs.com/package/nx)
 [![Semantic Release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)]()
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
-[![Join the chat at https://gitter.im/nrwl-nx/community](https://badges.gitter.im/nrwl-nx/community.svg)](https://gitter.im/nrwl-nx/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![Join us on the Official Nx Discord Server](https://img.shields.io/discord/1143497901675401286?label=discord)](https://go.nx.dev/community)
+[![Nx Sandboxing](https://staging.nx.app/workspaces/62d013ea0852fe0a2df74438/sandbox-badge.svg)](https://nx.dev/docs/features/ci-features/sandboxing)
 
 </div>
 

package/dist/plugins/storybook/merge-plugins.d.ts

@@ -1,3 +1,3 @@
 import { ResolvePluginInstance, RuleSetRule, WebpackPluginInstance } from 'webpack';
-export declare const mergeRules: (...args: RuleSetRule[]) => (WebpackPluginInstance | RuleSetRule)[];
+export declare const mergeRules: (...args: RuleSetRule[]) => (RuleSetRule | WebpackPluginInstance)[];
 export declare const mergePlugins: (...args: (WebpackPluginInstance | ResolvePluginInstance)[]) => (WebpackPluginInstance | ResolvePluginInstance)[];

package/dist/src/generators/application/lib/create-application-files.d.ts

@@ -3,41 +3,16 @@ import { WithNxOptions } from '@nx/webpack';
 import { WithReactOptions } from '../../../../plugins/with-react';
 import { NormalizedSchema } from '../schema';
 export declare function getDefaultTemplateVariables(host: Tree, options: NormalizedSchema): {
-    typesNodeVersion: string;
-    typesReactDomVersion: string;
-    reactRouterVersion: string;
-    typesReactVersion: string;
-    reactDomVersion: string;
-    reactVersion: string;
-    reactRouterIsBotVersion: string;
-    js: boolean;
-    tmpl: string;
-    offsetFromRoot: string;
-    appTests: string;
-    inSourceVitestTests: string;
-    style: import("../../../..").SupportedStyles;
-    hasStyleFile: boolean;
-    isUsingTsSolutionSetup: boolean;
-    port: number;
-    projectName: string;
-    appProjectRoot: string;
-    e2eProjectName: string;
-    e2eProjectRoot: string;
-    importPath: string;
-    parsedTags: string[];
-    fileName: string;
-    hasStyles: boolean;
-    unitTestRunner: "jest" | "vitest" | "none";
-    addPlugin?: boolean;
-    names: ReturnType<typeof import("@nx/devkit").names>;
-    isUsingTsSolutionConfig?: boolean;
-    directory: string;
     name: string;
+    className: string;
+    propertyName: string;
+    constantName: string;
+    directory: string;
     skipFormat?: boolean;
     tags?: string;
     inSourceTests?: boolean;
-    e2eTestRunner: "cypress" | "playwright" | "none";
-    linter: import("packages/eslint/dist").Linter | import("packages/eslint/dist").LinterType;
+    e2eTestRunner: 'cypress' | 'playwright' | 'none';
+    linter: import("@nx/eslint").Linter | import("@nx/eslint").LinterType;
     classComponent?: boolean;
     routing?: boolean;
     useReactRouter?: boolean;
@@ -45,20 +20,45 @@ export declare function getDefaultTemplateVariables(host: Tree, options: Normali
     globalCss?: boolean;
     strict?: boolean;
     setParserOptionsProject?: boolean;
-    compiler?: "babel" | "swc";
+    compiler?: 'babel' | 'swc';
     remotes?: string[];
     devServerPort?: number;
     skipPackageJson?: boolean;
     rootProject?: boolean;
-    bundler?: "webpack" | "vite" | "rspack" | "rsbuild";
+    bundler?: 'webpack' | 'vite' | 'rspack' | 'rsbuild';
     minimal?: boolean;
     nxCloudToken?: string;
     useTsSolution?: boolean;
-    formatter?: "prettier" | "none";
+    formatter?: 'prettier' | 'none';
     useProjectJson?: boolean;
-    className: string;
-    propertyName: string;
-    constantName: string;
+    projectName: string;
+    appProjectRoot: string;
+    e2eProjectName: string;
+    e2eProjectRoot: string;
+    importPath: string;
+    parsedTags: string[];
+    fileName: string;
+    hasStyles: boolean;
+    unitTestRunner: 'jest' | 'vitest' | 'none';
+    addPlugin?: boolean;
+    names: ReturnType<typeof import("@nx/devkit").names>;
+    isUsingTsSolutionConfig?: boolean;
+    typesNodeVersion: string;
+    typesReactDomVersion: string;
+    reactRouterVersion: string;
+    typesReactVersion: string;
+    reactDomVersion: string;
+    reactVersion: string;
+    reactRouterIsBotVersion: string;
+    js: boolean;
+    tmpl: string;
+    offsetFromRoot: string;
+    appTests: string;
+    inSourceVitestTests: string;
+    style: import("../../../..").SupportedStyles;
+    hasStyleFile: boolean;
+    isUsingTsSolutionSetup: boolean;
+    port: number;
 };
 export declare function createNxRspackPluginOptions(options: NormalizedSchema, rootOffset: string, tsx?: boolean): WithNxOptions & WithReactOptions;
 export declare function createApplicationFiles(host: Tree, options: NormalizedSchema): Promise<void>;

package/dist/src/generators/host/files/rspack-module-federation/rspack.config.js__tmpl__

@@ -6,6 +6,8 @@ const { join } = require('path');
 const config = require('./module-federation.config');
 
 module.exports = {
+  // rspack-cli dev mode defaults this on; it breaks module federation.
+  lazyCompilation: false,
   output: {
     path: join(__dirname, '<%= rspackPluginOptions.outputPath %>'),
     publicPath: 'auto'

package/dist/src/generators/host/files/rspack-module-federation-ssr/rspack.config.js__tmpl__

@@ -8,6 +8,8 @@ const serverMfConfig = require('./module-federation.server.config');
 
 const browserRspackConfig = {
   name: 'browser',
+  // rspack-cli dev mode defaults this on; it breaks module federation.
+  lazyCompilation: false,
   output: {
     path: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'browser'),
     publicPath: 'auto'

package/dist/src/generators/host/files/rspack-module-federation-ssr-ts/rspack.config.ts__tmpl__

@@ -8,6 +8,8 @@ import serverMfConfig from './module-federation.server.config';
 
 const browserRspackConfig = {
   name: 'browser',
+  // rspack-cli dev mode defaults this on; it breaks module federation.
+  lazyCompilation: false,
   output: {
     path: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'browser'),
     publicPath: 'auto'

package/dist/src/generators/host/files/rspack-module-federation-ts/rspack.config.ts__tmpl__

@@ -6,6 +6,8 @@ import { join } from 'path';
 import config from './module-federation.config';
 
 export default {
+  // rspack-cli dev mode defaults this on; it breaks module federation.
+  lazyCompilation: false,
   output: {
     path: join(__dirname, '<%= rspackPluginOptions.outputPath %>'),
     publicPath: 'auto'

package/dist/src/generators/remote/files/rspack-module-federation/rspack.config.js__tmpl__

@@ -6,6 +6,8 @@ const { join } = require('path');
 const config = require('./module-federation.config');
 
 module.exports = {
+  // rspack-cli dev mode defaults this on; it breaks module federation.
+  lazyCompilation: false,
   output: {
     path: join(__dirname, '<%= rspackPluginOptions.outputPath %>'),
     publicPath: 'auto'

package/dist/src/generators/remote/files/rspack-module-federation-ssr/rspack.config.js__tmpl__

@@ -8,6 +8,8 @@ const serverMfConfig = require('./module-federation.server.config');
 
 const browserRspackConfig = {
   name: 'browser',
+  // rspack-cli dev mode defaults this on; it breaks module federation.
+  lazyCompilation: false,
   output: {
     path: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'browser'),
     publicPath: 'auto'

package/dist/src/generators/remote/files/rspack-module-federation-ssr-ts/rspack.config.ts__tmpl__

@@ -8,6 +8,8 @@ import serverMfConfig from './module-federation.server.config';
 
 const browserRspackConfig = {
   name: 'browser',
+  // rspack-cli dev mode defaults this on; it breaks module federation.
+  lazyCompilation: false,
   output: {
     path: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'browser'),
     publicPath: 'auto'

package/dist/src/generators/remote/files/rspack-module-federation-ts/rspack.config.ts__tmpl__

@@ -6,6 +6,8 @@ import { join } from 'path';
 import config from './module-federation.config';
 
 export default {
+  // rspack-cli dev mode defaults this on; it breaks module federation.
+  lazyCompilation: false,
   output: {
     path: join(__dirname, '<%= rspackPluginOptions.outputPath %>'),
     publicPath: 'auto'

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

@@ -0,0 +1,44 @@
+# 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.
+
+## Step 1: Codemods
+
+```bash
+npx codemod@latest react/19/migration-recipe
+npx types-react-codemod@latest preset-19 ./PROJECT_PATH
+```
+
+First handles API changes, second handles `@types/react` 19 types. Review the diffs.
+
+## Step 2: Removed APIs (fix by hand if codemod misses)
+
+- `ReactDOM.render` / `hydrate` -> `createRoot` / `hydrateRoot` from `react-dom/client`. Note `hydrateRoot(container, element)` swaps the arg order vs `hydrate`.
+- `ReactDOM.unmountComponentAtNode` -> keep the root from `createRoot` / `hydrateRoot` and call `root.unmount()`.
+- `ReactDOM.findDOMNode` -> use refs.
+- `propTypes` -> removed for ALL components (class and function); drop it, use TS types.
+- `defaultProps` -> removed for FUNCTION components (use default params); still works on classes.
+- Legacy string refs -> callback refs or `useRef`.
+- Legacy Context: consumer `contextTypes` and provider `childContextTypes` / `getChildContext` -> `createContext`.
+- `react-test-renderer` is deprecated -> migrate tests to `@testing-library/react`.
+
+## Step 3: ref as prop
+
+`forwardRef` is no longer needed; `ref` is a normal prop. Existing `forwardRef` calls still work (deprecated).
+
+## 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.
+
+## Validate
+
+```bash
+nx run PROJECT:build
+nx affected -t build,lint,test
+```
+
+## Notes for LLM
+
+- Codemods first (API + types), then manual.
+- One project at a time, build after each.
+- Confirm third-party libs support React 19 before bumping.

package/dist/src/migrations/update-23-1-0/upgrade-to-react-19.md

@@ -0,0 +1,38 @@
+#### Upgrade React 18 to 19
+
+Bumps `react`, `react-dom`, and the React type packages from 18 to 19. React 19 removes several long-deprecated APIs; the change every project hits is the root API (`ReactDOM.render` -> `createRoot`). Read more in the [React 19 upgrade guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide).
+
+The paired AI instructions migration walks an agent through the full set of changes. The common ones are shown below.
+
+#### Examples
+
+##### Before
+
+```tsx title="src/main.tsx"
+import ReactDOM from 'react-dom';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+```
+
+##### After
+
+```tsx title="src/main.tsx"
+import { createRoot } from 'react-dom/client';
+
+createRoot(document.getElementById('root')!).render(<App />);
+```
+
+`defaultProps` on a function component becomes a default parameter:
+
+##### Before
+
+```tsx
+function Badge({ color }) {}
+Badge.defaultProps = { color: 'gray' };
+```
+
+##### After
+
+```tsx
+function Badge({ color = 'gray' }) {}
+```

package/dist/src/utils/create-ts-config.js

@@ -35,7 +35,7 @@ function createTsConfigForTsSolution(host, projectRoot, type, options, relativeP
     if (options.rootProject) {
         json.compileOnSave = false;
         json.compilerOptions = {
-            ...shared.tsConfigBaseOptions,
+            ...(0, internal_1.getTsConfigBaseOptions)(host),
             ...json.compilerOptions,
         };
         json.exclude = ['node_modules', 'tmp'];
@@ -63,7 +63,6 @@ function createTsConfigForNonTsSolution(host, projectRoot, type, options, relati
         compilerOptions: {
             jsx: 'react-jsx',
             allowJs: false,
-            esModuleInterop: false,
             allowSyntheticDefaultImports: true,
             strict: options.strict,
         },
@@ -85,7 +84,7 @@ function createTsConfigForNonTsSolution(host, projectRoot, type, options, relati
     if (options.rootProject) {
         json.compileOnSave = false;
         json.compilerOptions = {
-            ...shared.tsConfigBaseOptions,
+            ...(0, internal_1.getTsConfigBaseOptions)(host),
             ...json.compilerOptions,
         };
         json.exclude = ['node_modules', 'tmp'];

package/dist/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<"webpack" | "vite">;
+}, found: FoundTarget): Promise<"vite" | "webpack">;
 export declare function isComponent(tree: Tree, filePath: string): boolean;

package/dist/typings/cssmodule.d.ts

@@ -17,3 +17,13 @@ declare module '*.module.less' {
   const classes: { readonly [key: string]: string };
   export default classes;
 }
+
+// TS 6.0 enables `noUncheckedSideEffectImports`, which errors on plain
+// `import './x.css'` unless the module is declared. Empty bodies allow the
+// side-effect import without granting a default-import `any`.
+// Keep these below the '*.module.*' declarations - equally-specific wildcard
+// patterns resolve by registration order and the typed modules must win.
+declare module '*.css' {}
+declare module '*.scss' {}
+declare module '*.sass' {}
+declare module '*.less' {}

package/migrations.json

@@ -30,6 +30,15 @@
       "version": "23.0.0-beta.25",
       "description": "Rewrites `@nx/react/src/*` subpath imports now that the `./src/*` subpath is no longer exposed by `@nx/react`'s exports map. Named imports/exports of public symbols are routed to `@nx/react` and the rest to the new `@nx/react/internal` entry; `require`, dynamic `import` and `jest.mock` calls reference the whole module and are routed to `@nx/react/internal`.",
       "implementation": "./dist/src/migrations/update-23-0-0/rewrite-internal-subpath-imports"
+    },
+    "update-23-1-0-create-ai-instructions-for-react-19": {
+      "version": "23.1.0-beta.0",
+      "requires": {
+        "react": ">=19.0.0"
+      },
+      "description": "Create AI instructions to help migrate workspaces from React 18 to 19.",
+      "prompt": "./dist/src/migrations/update-23-1-0/ai-instructions-for-react-19.md",
+      "documentation": "./dist/src/migrations/update-23-1-0/upgrade-to-react-19.md"
     }
   },
   "packageJsonUpdates": {
@@ -202,6 +211,38 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "23.1.0": {
+      "version": "23.1.0-beta.0",
+      "requires": {
+        "react": ">=18.0.0 <19.0.0"
+      },
+      "packages": {
+        "react": {
+          "version": "^19.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "react-dom": {
+          "version": "^19.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "react-is": {
+          "version": "^19.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@types/react": {
+          "version": "^19.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@types/react-dom": {
+          "version": "^19.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@types/react-is": {
+          "version": "^19.0.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "23.0.0-rc.4",
+  "version": "23.1.0-beta.0",
   "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.0.0-rc.4",
-    "@nx/js": "23.0.0-rc.4",
-    "@nx/eslint": "23.0.0-rc.4",
-    "@nx/web": "23.0.0-rc.4",
-    "@nx/module-federation": "23.0.0-rc.4",
-    "@nx/rollup": "23.0.0-rc.4"
+    "@nx/devkit": "23.1.0-beta.0",
+    "@nx/js": "23.1.0-beta.0",
+    "@nx/eslint": "23.1.0-beta.0",
+    "@nx/web": "23.1.0-beta.0",
+    "@nx/module-federation": "23.1.0-beta.0",
+    "@nx/rollup": "23.1.0-beta.0"
   },
   "devDependencies": {
-    "@nx/cypress": "23.0.0-rc.4",
-    "@nx/playwright": "23.0.0-rc.4",
-    "@nx/rsbuild": "23.0.0-rc.4",
-    "@nx/vite": "23.0.0-rc.4",
-    "@nx/vitest": "23.0.0-rc.4",
-    "@nx/webpack": "23.0.0-rc.4",
-    "@nx/storybook": "23.0.0-rc.4",
-    "nx": "23.0.0-rc.4"
+    "@nx/cypress": "23.1.0-beta.0",
+    "@nx/playwright": "23.1.0-beta.0",
+    "@nx/rsbuild": "23.1.0-beta.0",
+    "@nx/vite": "23.1.0-beta.0",
+    "@nx/vitest": "23.1.0-beta.0",
+    "@nx/webpack": "23.1.0-beta.0",
+    "@nx/storybook": "23.1.0-beta.0",
+    "nx": "23.1.0-beta.0"
   },
   "optionalDependencies": {
-    "@nx/vite": "23.0.0-rc.4"
+    "@nx/vite": "23.1.0-beta.0"
   },
   "publishConfig": {
     "access": "public"

package/typings/cssmodule.d.ts

@@ -17,3 +17,13 @@ declare module '*.module.less' {
   const classes: { readonly [key: string]: string };
   export default classes;
 }
+
+// TS 6.0 enables `noUncheckedSideEffectImports`, which errors on plain
+// `import './x.css'` unless the module is declared. Empty bodies allow the
+// side-effect import without granting a default-import `any`.
+// Keep these below the '*.module.*' declarations - equally-specific wildcard
+// patterns resolve by registration order and the typed modules must win.
+declare module '*.css' {}
+declare module '*.scss' {}
+declare module '*.sass' {}
+declare module '*.less' {}