@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.

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

{% tabs %} {% tab label=“Before” %}

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

{% /tab %} {% tab label=“After” %}

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

{% /tab %} {% /tabs %}

20.4.x

add-mf-env-var-to-target-defaults

Version: 20.4.0-beta.0

Add NX_MF_DEV_REMOTES to inputs for task hashing when ‘@nx/webpack:webpack’ or ‘@nx/rspack:rspack’ is used for Module Federation.

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

{% tabs %} {% tab label=“Before” %}

{
  "targetDefaults": {
    "@nx/webpack:webpack": {
      "inputs": ["^build"]
    }
  }
}

{% /tab %} {% tab label=“After” %}

{
  "targetDefaults": {
    "@nx/webpack:webpack": {
      "cache": true,
      "dependsOn": ["^build"],
      "inputs": [
        "^build",
        {
          "env": "NX_MF_DEV_REMOTES"
        }
      ]
    }
  }
}

{% /tab %} {% /tabs %}

20.3.x

ensure-nx-module-federation-package

Version: 20.3.0-beta.2

If workspace includes Module Federation projects, ensure the new @nx/module-federation package is installed.

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

{% tabs %} {% tab label=“Before” %}

{
  "dependencies": {}
}

{% /tab %} {% tab label=“After” %}

{
  "dependencies": {
    "@nx/module-federation": "20.3.0"
  }
}

{% /tab %} {% /tabs %}

20.3.0-package-updates

Version: 20.3.0-beta.0

Packages

The following packages will be updated:

Name	Version	Always add to package.json
@testing-library/react	16.1.0	Updated only

20.2.x

update-20-2-0-update-module-federation-config-import

Version: 20.2.0-beta.2

Update the ModuleFederationConfig import use @nx/module-federation.

Migrate Module Federation Imports to New Package

Update the ModuleFederationConfig imports to use @nx/module-federation.

Sample Code Changes

Update import paths for ModuleFederationConfig.

{% tabs %} {% tab label=“Before” %}

import { ModuleFederationConfig } from '@nx/webpack';

import { ModuleFederationConfig } from '@nx/rspack/module-federation';

{% /tab %} {% tab label=“After” %}

import { ModuleFederationConfig } from '@nx/module-federation';

import { ModuleFederationConfig } from '@nx/module-federation';

{% /tab %} {% /tabs %}

update-20-2-0-update-with-module-federation-import

Version: 20.2.0-beta.2

Update the withModuleFederation import use @nx/module-federation/webpack.

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.

{% tabs %} {% tab label=“Before” %}

import {
  withModuleFederation,
  withModuleFederationForSSR,
} from '@nx/react/module-federation';

{% /tab %} {% tab label=“After” %}

import {
  withModuleFederation,
  withModuleFederationForSSR,
} from '@nx/module-federation/webpack';

{% /tab %} {% /tabs %}

20.2.0-package-updates

Version: 20.2.0-beta.3

Packages

The following packages will be updated:

Name	Version	Always add to package.json
@module-federation/enhanced	0.7.6	Updated only
@module-federation/runtime	0.7.6	Updated only
@module-federation/sdk	0.7.6	Updated only
@module-federation/node	2.6.11	Updated only

20.1.x

20.1.0-package-updates

Version: 20.1.0-beta.0

Packages

The following packages will be updated:

Name	Version	Always add to package.json
eslint-plugin-react-hooks	5.0.0	Updated only
eslint-plugin-jsx-a11y	6.10.1	Updated only

20.0.x

20.0.0-package-updates

Version: 20.0.0-beta.8

Packages

The following packages will be updated:

Name	Version	Always add to package.json
eslint-plugin-import	2.31.0	Updated only

19.7.x

19.7.0-package-updates

Version: 19.7.0-beta.0

Packages

The following packages will be updated:

Name	Version	Always add to package.json
@module-federation/enhanced	~0.6.0	Updated only
@module-federation/node	~2.5.0	Updated only

19.6.x

update-19-6-0-turn-module-federation-dts-off

Version: 19.6.0-beta.4

Ensure Module Federation DTS is turned off by default.

update-module-federation-ssr-server-file

Version: 19.6.0-beta.4

Update the server file for Module Federation SSR port value to be the same as the ‘serve’ target port value.

update-19-6-1-ensure-module-federation-target-defaults

Version: 19.6.1-beta.0

Ensure Target Defaults are set correctly for Module Federation.

19.5.x

19.5.0-module-federation-package-updates

Version: 19.5.0-beta.0

Packages

The following packages will be updated:

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

19.2.x

19.2.0-package-updates

Version: 19.2.0-beta.8

Packages

The following packages will be updated:

Name	Version	Always add to package.json
postcss	8.4.38	Updated only

19.0.x

19.0.0-package-updates

Version: 19.0.0-beta.12

Packages

The following packages will be updated:

Name	Version	Always add to package.json
react	18.3.1	Updated only
react-dom	18.3.1	Updated only
react-is	18.3.1	Updated only
@types/react	18.3.1	Updated only
@types/react-dom	18.3.0	Updated only
@types/react-is	18.3.0	Updated only
@testing-library/react	15.0.6	Updated only

19.0.3-package-updates

Version: 19.0.3-beta.0

Packages

The following packages will be updated:

Name	Version	Always add to package.json
tailwindcss	3.4.3	Updated only