@nx/react - Migrations

The @nx/react plugin provides various migrations to help you migrate to newer versions of react projects within your Nx workspace. Below is a complete reference for all available migrations.

23.0.x

update-23-0-0-remove-nx-react-webpack-plugin-import

Version: 23.0.0-beta.10

Rewrites imports of NxReactWebpackPlugin from ‘@nx/react’ to the sub-path ‘@nx/react/webpack-plugin’.

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

apps/my-app/webpack.config.ts

import { NxReactWebpackPlugin } from '@nx/react';

export default { plugins: [new NxReactWebpackPlugin()] };

After

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

apps/my-app/webpack.config.ts

import { NxReactWebpackPlugin, withReact } from '@nx/react';

After

apps/my-app/webpack.config.ts

import { NxReactWebpackPlugin } from '@nx/react/webpack-plugin';
import { withReact } from '@nx/react';

CJS require().

Before

apps/my-app/webpack.config.js

const { NxReactWebpackPlugin } = require('@nx/react');

After

apps/my-app/webpack.config.js

const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');

update-23-0-0-migrate-create-nodes-v2-import

Version: 23.0.0-beta.24

Rename imports of createNodesV2 from @nx/react/router-plugin to the canonical createNodes export.

Rename createNodesV2 imports to createNodes

@nx/react renamed its primary inferred-plugin export from createNodesV2 to createNodes. The createNodesV2 name is preserved as a deprecated alias for now, but new code should use createNodes.

This migration scans every .ts, .tsx, .cts, and .mts file in your workspace and rewrites named imports and re-exports of createNodesV2 from @nx/react/router-plugin to createNodes.

Sample Code Changes

Before

import { createNodesV2 } from '@nx/react/router-plugin';

After

import { createNodes } from '@nx/react/router-plugin';

Aliases are preserved (createNodesV2 as cn becomes createNodes as cn), and if a file already imports both names ({ createNodes, createNodesV2 }) the redundant binding is dropped.

What is not rewritten

Only static import/export named bindings from @nx/react/router-plugin are rewritten. Namespace imports, dynamic import(...), require(...) destructuring, and property access such as plugin.createNodesV2 are left untouched — they keep working through the createNodesV2 runtime alias. Update those by hand if you want to drop the deprecated name everywhere.

rewrite-react-internal-subpath-imports

Version: 23.0.0-beta.25

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.

22.7.x

22.7.0-package-updates

Version: 22.7.0-beta.18

Packages

The following packages will be updated:

Name	Version	Always add to package.json
react-router	7.14.2	Updated only
@react-router/dev	7.14.2	Updated only
@react-router/node	7.14.2	Updated only
@react-router/serve	7.14.2	Updated only
@react-router/express	7.14.2	Updated only
@react-router/fs-routes	7.14.2	Updated only
@react-router/cloudflare	7.14.2	Updated only
@react-router/architect	7.14.2	Updated only
@react-router/remix-routes-option-adapter	7.14.2	Updated only

22.6.x

22.6.0-package-updates

Version: 22.6.0-beta.10

Packages

The following packages will be updated:

Name	Version	Always add to package.json
@module-federation/enhanced	^2.1.0	Updated only
@module-federation/node	^2.7.21	Updated only

22.3.x

22.3.4-package-updates

Version: 22.3.4-beta.0

Packages

The following packages will be updated:

Name	Version	Always add to package.json
react-router-dom	6.30.3	Updated only

22.3.4-react-router-package-updates

Version: 22.3.4-beta.0

Packages

The following packages will be updated:

Name	Version	Always add to package.json
react-router	7.12.0	Updated only
@react-router/dev	7.12.0	Updated only
@react-router/node	7.12.0	Updated only
@react-router/serve	7.12.0	Updated only
@react-router/express	7.12.0	Updated only
@react-router/fs-routes	7.12.0	Updated only
@react-router/cloudflare	7.12.0	Updated only
@react-router/architect	7.12.0	Updated only
@react-router/remix-routes-option-adapter	7.12.0	Updated only

22.2.x

22.2.0-package-updates

Version: 22.2.0-beta.0

Packages

The following packages will be updated:

Name	Version	Always add to package.json
@module-federation/enhanced	^0.21.2	Updated only
@module-federation/runtime	^0.21.2	Updated only
@module-federation/sdk	^0.21.2	Updated only
@module-federation/node	^2.7.21	Updated only

22.2.0-emotion-package-updates

Version: 22.2.0-beta.3

Packages

The following packages will be updated:

Name	Version	Always add to package.json
@emotion/react	11.14.0	Updated only
@emotion/styled	11.14.1	Updated only
@emotion/babel-plugin	11.13.5	Updated only

22.0.x

update-22-0-0-add-svgr-to-webpack-config

Version: 22.0.0-beta.0

Updates webpack configs using React to use the new withSvgr composable function instead of the svgr option in withReact or NxReactWebpackPlugin.

21.4.x

21.4.0-package-updates

Version: 21.4.0-beta.8

Packages

The following packages will be updated:

Name	Version	Always add to package.json
http-proxy-middleware	^3.0.5	Updated only

21.0.x

update-21-0-0-update-babel-loose

Version: 21.0.0-beta.11

Replaces classProperties.loose option with loose.

Replace classProperties.loose option in .babelrc

The classProperties.loose option is replaced by loose in .babelrc files.

Sample Code Changes

Before

.babelrc

{
  "presets": [
    [
      "@nx/react/babel",
      {
        "runtime": "automatic",
        "classProperties": {
          "loose": true
        },
        "useBuiltIns": "usage"
      }
    ]
  ],
  "plugins": []
}

After

.babelrc

{
  "presets": [
    [
      "@nx/react/babel",
      {
        "runtime": "automatic",
        "loose": true,
        "useBuiltIns": "usage"
      }
    ]
  ],
  "plugins": []
}