@nx/react 23.0.0-beta.21 → 23.0.0-beta.22

package/migrations.json

@@ -4,31 +4,36 @@
       "cli": "nx",
       "version": "20.2.0-beta.2",
       "description": "Update the ModuleFederationConfig import use @nx/module-federation.",
-      "factory": "./src/migrations/update-20-2-0/migrate-mf-imports-to-new-package"
+      "factory": "./src/migrations/update-20-2-0/migrate-mf-imports-to-new-package",
+      "documentation": "./src/migrations/update-20-2-0/migrate-mf-imports-to-new-package.md"
     },
     "update-20-2-0-update-with-module-federation-import": {
       "cli": "nx",
       "version": "20.2.0-beta.2",
       "description": "Update the withModuleFederation import use @nx/module-federation/webpack.",
-      "factory": "./src/migrations/update-20-2-0/migrate-with-mf-import-to-new-package"
+      "factory": "./src/migrations/update-20-2-0/migrate-with-mf-import-to-new-package",
+      "documentation": "./src/migrations/update-20-2-0/migrate-with-mf-import-to-new-package.md"
     },
     "ensure-nx-module-federation-package": {
       "cli": "nx",
       "version": "20.3.0-beta.2",
       "description": "If workspace includes Module Federation projects, ensure the new @nx/module-federation package is installed.",
-      "factory": "./src/migrations/update-20-3-0/ensure-nx-module-federation-package"
+      "factory": "./src/migrations/update-20-3-0/ensure-nx-module-federation-package",
+      "documentation": "./src/migrations/update-20-3-0/ensure-nx-module-federation-package.md"
     },
     "add-mf-env-var-to-target-defaults": {
       "cli": "nx",
       "version": "20.4.0-beta.0",
       "description": "Add NX_MF_DEV_REMOTES to inputs for task hashing when '@nx/webpack:webpack' or '@nx/rspack:rspack' is used for Module Federation.",
-      "factory": "./src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults"
+      "factory": "./src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults",
+      "documentation": "./src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults.md"
     },
     "update-21-0-0-update-babel-loose": {
       "cli": "nx",
       "version": "21.0.0-beta.11",
       "description": "Replaces `classProperties.loose` option with `loose`.",
-      "factory": "./src/migrations/update-21-0-0/update-babel-loose"
+      "factory": "./src/migrations/update-21-0-0/update-babel-loose",
+      "documentation": "./src/migrations/update-21-0-0/update-babel-loose.md"
     },
     "update-22-0-0-add-svgr-to-webpack-config": {
       "cli": "nx",
@@ -40,7 +45,8 @@
       "cli": "nx",
       "version": "23.0.0-beta.10",
       "description": "Rewrites imports of NxReactWebpackPlugin from '@nx/react' to the sub-path '@nx/react/webpack-plugin'.",
-      "factory": "./src/migrations/update-23-0-0/remove-nx-react-webpack-plugin-import"
+      "factory": "./src/migrations/update-23-0-0/remove-nx-react-webpack-plugin-import",
+      "documentation": "./src/migrations/update-23-0-0/remove-nx-react-webpack-plugin-import.md"
     }
   },
   "packageJsonUpdates": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "23.0.0-beta.21",
+  "version": "23.0.0-beta.22",
   "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": {
@@ -37,28 +37,28 @@
     "@svgr/webpack": "^8.0.1",
     "minimatch": "10.2.5",
     "tslib": "^2.3.0",
-    "@nx/devkit": "23.0.0-beta.21",
-    "@nx/js": "23.0.0-beta.21",
-    "@nx/eslint": "23.0.0-beta.21",
-    "@nx/web": "23.0.0-beta.21",
-    "@nx/module-federation": "23.0.0-beta.21",
-    "@nx/rollup": "23.0.0-beta.21",
+    "@nx/devkit": "23.0.0-beta.22",
+    "@nx/js": "23.0.0-beta.22",
+    "@nx/eslint": "23.0.0-beta.22",
+    "@nx/web": "23.0.0-beta.22",
+    "@nx/module-federation": "23.0.0-beta.22",
+    "@nx/rollup": "23.0.0-beta.22",
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.5",
     "semver": "^7.6.3"
   },
   "devDependencies": {
-    "@nx/cypress": "23.0.0-beta.21",
-    "@nx/playwright": "23.0.0-beta.21",
-    "@nx/rsbuild": "23.0.0-beta.21",
-    "@nx/vite": "23.0.0-beta.21",
-    "@nx/vitest": "23.0.0-beta.21",
-    "@nx/webpack": "23.0.0-beta.21",
-    "@nx/storybook": "23.0.0-beta.21",
-    "nx": "23.0.0-beta.21"
+    "@nx/cypress": "23.0.0-beta.22",
+    "@nx/playwright": "23.0.0-beta.22",
+    "@nx/rsbuild": "23.0.0-beta.22",
+    "@nx/vite": "23.0.0-beta.22",
+    "@nx/vitest": "23.0.0-beta.22",
+    "@nx/webpack": "23.0.0-beta.22",
+    "@nx/storybook": "23.0.0-beta.22",
+    "nx": "23.0.0-beta.22"
   },
   "optionalDependencies": {
-    "@nx/vite": "23.0.0-beta.21"
+    "@nx/vite": "23.0.0-beta.22"
   },
   "publishConfig": {
     "access": "public"

package/src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults.md

@@ -0,0 +1,36 @@
+#### Add Module Federation Env Var to Target Defaults
+
+Add NX_MF_DEV_REMOTES to inputs for task hashing when `@nx/webpack:webpack` or `@nx/rspack:rspack` is used for Module Federation.
+
+#### Sample Code Changes
+
+##### Before
+
+```json title="nx.json"
+{
+  "targetDefaults": {
+    "@nx/webpack:webpack": {
+      "inputs": ["^build"]
+    }
+  }
+}
+```
+
+##### After
+
+```json title="nx.json" {4-6}
+{
+  "targetDefaults": {
+    "@nx/webpack:webpack": {
+      "cache": true,
+      "dependsOn": ["^build"],
+      "inputs": [
+        "^build",
+        {
+          "env": "NX_MF_DEV_REMOTES"
+        }
+      ]
+    }
+  }
+}
+```

package/src/migrations/update-20-2-0/migrate-mf-imports-to-new-package.md

@@ -0,0 +1,27 @@
+#### Migrate Module Federation Imports to New Package
+
+Update the ModuleFederationConfig imports to use @nx/module-federation.
+
+#### Sample Code Changes
+
+Update import paths for ModuleFederationConfig.
+
+##### Before
+
+```js title="apps/shell/webpack.config.js"
+import { ModuleFederationConfig } from '@nx/webpack';
+```
+
+```js title="apps/shell/rspack.config.js"
+import { ModuleFederationConfig } from '@nx/rspack/module-federation';
+```
+
+##### After
+
+```js title="apps/shell/webpack.config.js"
+import { ModuleFederationConfig } from '@nx/module-federation';
+```
+
+```js title="apps/shell/rspack.config.js"
+import { ModuleFederationConfig } from '@nx/module-federation';
+```

package/src/migrations/update-20-2-0/migrate-with-mf-import-to-new-package.md

@@ -0,0 +1,25 @@
+#### Migrate withModuleFederation Import to New Package
+
+Update the withModuleFederation import to use @nx/module-federation/webpack.
+
+#### Sample Code Changes
+
+Update import paths for `withModuleFederation` and `withModuleFederationForSSR`.
+
+##### Before
+
+```ts title="apps/shell/webpack.config.ts"
+import {
+  withModuleFederation,
+  withModuleFederationForSSR,
+} from '@nx/react/module-federation';
+```
+
+##### After
+
+```ts title="apps/shell/webpack.config.ts"
+import {
+  withModuleFederation,
+  withModuleFederationForSSR,
+} from '@nx/module-federation/webpack';
+```

package/src/migrations/update-20-3-0/ensure-nx-module-federation-package.md

@@ -0,0 +1,23 @@
+#### Ensure the @nx/module-federation Package is Installed
+
+If workspace includes Module Federation projects, ensure the new `@nx/module-federation` package is installed.
+
+#### Sample Code Changes
+
+##### Before
+
+```json title="package.json"
+{
+  "dependencies": {}
+}
+```
+
+##### After
+
+```json title="package.json"
+{
+  "dependencies": {
+    "@nx/module-federation": "20.3.0"
+  }
+}
+```

package/src/migrations/update-21-0-0/update-babel-loose.md

@@ -0,0 +1,43 @@
+#### Replace `classProperties.loose` option in `.babelrc`
+
+The `classProperties.loose` option is replaced by `loose` in `.babelrc` files.
+
+#### Sample Code Changes
+
+##### Before
+
+```json title=".babelrc"
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "classProperties": {
+          "loose": true
+        },
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
+```
+
+##### After
+
+```json title=".babelrc" {7}
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "loose": true,
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
+```

package/src/migrations/update-23-0-0/remove-nx-react-webpack-plugin-import.md

@@ -0,0 +1,52 @@
+#### Rewrite `NxReactWebpackPlugin` Imports to the `@nx/react/webpack-plugin` Sub-path
+
+The deprecated re-export of `NxReactWebpackPlugin` from `@nx/react` is removed in v23. The migration rewrites both ES module imports and CJS `require()` calls to use the `@nx/react/webpack-plugin` sub-path. Imports that combine the deprecated symbol with other named imports are split into two declarations so the rest of the original import still resolves from `@nx/react`. Aliases (`as Plugin`, `: Plugin`) are preserved.
+
+#### Sample Code Changes
+
+ES module import.
+
+##### Before
+
+```ts title="apps/my-app/webpack.config.ts" {1}
+import { NxReactWebpackPlugin } from '@nx/react';
+
+export default { plugins: [new NxReactWebpackPlugin()] };
+```
+
+##### After
+
+```ts title="apps/my-app/webpack.config.ts"
+import { NxReactWebpackPlugin } from '@nx/react/webpack-plugin';
+
+export default { plugins: [new NxReactWebpackPlugin()] };
+```
+
+ES module import combined with other named imports.
+
+##### Before
+
+```ts title="apps/my-app/webpack.config.ts" {1}
+import { NxReactWebpackPlugin, withReact } from '@nx/react';
+```
+
+##### After
+
+```ts title="apps/my-app/webpack.config.ts"
+import { NxReactWebpackPlugin } from '@nx/react/webpack-plugin';
+import { withReact } from '@nx/react';
+```
+
+CJS `require()`.
+
+##### Before
+
+```js title="apps/my-app/webpack.config.js" {1}
+const { NxReactWebpackPlugin } = require('@nx/react');
+```
+
+##### After
+
+```js title="apps/my-app/webpack.config.js"
+const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
+```