@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

• 22.0.x

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

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

Version: 22.0.0-beta.0

• 21.4.x

21.4.0-package-updates

Version: 21.4.0-beta.8

Packages

Name	Version	Always Add to package.json
http-proxy-middleware	^3.0.5	Update only

• 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