@nx/react

Package reference

Here is a list of all the executors, generators and migrations available from this package.

Executors

• module-federation-dev-server

  Serve a host or remote application.

• module-federation-ssr-dev-server

  Serve a host application along with it's known remotes.

• module-federation-static-server

  Serve a host and its remotes statically.

Generators

• initInternal

  Initialize the @nx/react plugin.

• application

  Create a React application.

• library

  Create a React library.

• component

  Create a React component.

• redux

  Create a Redux slice for a project.

• storybook-configuration

  Set up storybook for a React app or library.

• component-story

  Generate storybook story for a React component

• stories

  Create stories/specs for all components declared in an app or library.

• hook

  Create a hook.

• host

  Generate a host react application

• remote

  Generate a remote react application

• cypress-component-configuration

  Setup Cypress component testing for a React project

• component-test

  Generate a Cypress component test for a React component

• setup-tailwind

  Set up Tailwind configuration for a project.

• setup-ssr

  Set up SSR configuration for a project.

• federate-module

  Federate a module.

Migrations

• 21.0.x

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

Replaces `classProperties.loose` option with `loose`.

Version: 21.0.0-beta.11

Replace classProperties.loose option in .babelrc

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

Sample Code Changes

.babelrc

1{ 2 "presets": [ 3 [ 4 "@nx/react/babel", 5 { 6 "runtime": "automatic", 7 "classProperties": { 8 "loose": true 9 }, 10 "useBuiltIns": "usage" 11 } 12 ] 13 ], 14 "plugins": [] 15} 16

• 20.4.x

add-mf-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.

Version: 20.4.0-beta.0

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

nx.json

1{ 2 "targetDefaults": { 3 "@nx/webpack:webpack": { 4 "inputs": ["^build"] 5 } 6 } 7} 8

• 20.3.x

ensure-nx-module-federation-package

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

Version: 20.3.0-beta.2

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

package.json

1{ 2 "dependencies": {} 3} 4

20.3.0-package-updates

Version: 20.3.0-beta.0

Packages

Name	Version	Always Add to package.json
@testing-library/react	16.1.0	Update only

• 20.2.x

20.2.0-package-updates

Version: 20.2.0-beta.3

Packages

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

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

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

Version: 20.2.0-beta.2

Migrate Module Federation Imports to New Package

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

Sample Code Changes

Update import paths for ModuleFederationConfig.

apps/shell/webpack.config.js

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

apps/shell/rspack.config.js

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

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

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

Version: 20.2.0-beta.2

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.

apps/shell/webpack.config.ts

1import { 2 withModuleFederation, 3 withModuleFederationForSSR, 4} from '@nx/react/module-federation'; 5

• 20.1.x

20.1.0-package-updates

Version: 20.1.0-beta.0

Packages

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

• 20.0.x

20.0.0-package-updates

Version: 20.0.0-beta.8

Packages

Name	Version	Always Add to package.json
eslint-plugin-import	2.31.0	Update only

• 19.7.x

19.7.0-package-updates

Version: 19.7.0-beta.0

Packages

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

• 19.6.x

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

Ensure Target Defaults are set correctly for Module Federation.

Version: 19.6.1-beta.0

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

Ensure Module Federation DTS is turned off by default.

Version: 19.6.0-beta.4

update-module-federation-ssr-server-file

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

Version: 19.6.0-beta.4

• 19.5.x

19.5.0-module-federation-package-updates

Version: 19.5.0-beta.0

Packages

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

• 19.2.x

19.2.0-package-updates

Version: 19.2.0-beta.8

Packages

Name	Version	Always Add to package.json
postcss	8.4.38	Update only

• 19.0.x

19.0.3-package-updates

Version: 19.0.3-beta.0

Packages

Name	Version	Always Add to package.json
tailwindcss	3.4.3	Update only

19.0.0-package-updates

Version: 19.0.0-beta.12

Packages

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