@nx/react 23.2.0-canary.20260729-e3e16e9 → 23.2.0-canary.20260731-0634da3

package/dist/internal.d.ts

@@ -1,5 +1,6 @@
 export { addE2e } from './src/generators/application/lib/add-e2e';
 export { addRollupBuildTarget } from './src/generators/library/lib/add-rollup-build-target';
+export { assertPackageIsInstalled } from './src/utils/assert-package';
 export { isComponent } from './src/utils/ct-utils';
 export { suppressReactComposeHelperWarnings } from './src/utils/deprecation';
 export { hasWebpackPlugin } from './src/utils/has-webpack-plugin';

package/dist/internal.js

@@ -5,11 +5,13 @@
 // internal consumers and may change without semver protection. Mirrors
 // `@nx/devkit/internal`.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.babelPresetReactVersion = exports.babelCoreVersion = exports.testingLibraryReactVersion = exports.testingLibraryDomVersion = exports.isReact18 = exports.getReactDependenciesVersionsToInstall = exports.hasWebpackPlugin = exports.suppressReactComposeHelperWarnings = exports.isComponent = exports.addRollupBuildTarget = exports.addE2e = void 0;
+exports.babelPresetReactVersion = exports.babelCoreVersion = exports.testingLibraryReactVersion = exports.testingLibraryDomVersion = exports.isReact18 = exports.getReactDependenciesVersionsToInstall = exports.hasWebpackPlugin = exports.suppressReactComposeHelperWarnings = exports.isComponent = exports.assertPackageIsInstalled = exports.addRollupBuildTarget = exports.addE2e = void 0;
 var add_e2e_1 = require("./src/generators/application/lib/add-e2e");
 Object.defineProperty(exports, "addE2e", { enumerable: true, get: function () { return add_e2e_1.addE2e; } });
 var add_rollup_build_target_1 = require("./src/generators/library/lib/add-rollup-build-target");
 Object.defineProperty(exports, "addRollupBuildTarget", { enumerable: true, get: function () { return add_rollup_build_target_1.addRollupBuildTarget; } });
+var assert_package_1 = require("./src/utils/assert-package");
+Object.defineProperty(exports, "assertPackageIsInstalled", { enumerable: true, get: function () { return assert_package_1.assertPackageIsInstalled; } });
 var ct_utils_1 = require("./src/utils/ct-utils");
 Object.defineProperty(exports, "isComponent", { enumerable: true, get: function () { return ct_utils_1.isComponent; } });
 var deprecation_1 = require("./src/utils/deprecation");

package/dist/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js

@@ -4,18 +4,22 @@ exports.default = moduleFederationDevServer;
 const devkit_1 = require("@nx/devkit");
 const internal_1 = require("@nx/devkit/internal");
 const internal_2 = require("@nx/js/internal");
-const internal_3 = require("@nx/module-federation/internal");
-const internal_4 = require("@nx/web/internal");
-const webpack_1 = require("@nx/webpack");
+const internal_3 = require("@nx/web/internal");
 const fs_1 = require("fs");
 const path_1 = require("path");
 const lib_1 = require("./lib");
+const assert_package_1 = require("../../utils/assert-package");
 const module_federation_deprecation_1 = require("../../utils/module-federation-deprecation");
+const executorName = '@nx/react:module-federation-dev-server';
 async function* moduleFederationDevServer(schema, context) {
+    (0, assert_package_1.assertPackageIsInstalled)('@nx/module-federation', executorName);
+    (0, assert_package_1.assertPackageIsInstalled)('@nx/webpack', executorName);
+    const { startRemoteIterators } = await import('@nx/module-federation/internal');
+    const { devServerExecutor } = await import('@nx/webpack');
     (0, module_federation_deprecation_1.warnReactMfDevServerExecutorDeprecation)();
     const options = (0, lib_1.normalizeOptions)(schema);
     const currIter = options.static
-        ? (0, internal_4.fileServerExecutor)({
+        ? (0, internal_3.fileServerExecutor)({
             ...options,
             parallel: false,
             withDeps: false,
@@ -24,7 +28,7 @@ async function* moduleFederationDevServer(schema, context) {
             cacheSeconds: -1,
         }, context)
         : // TODO(JamesHenry): remove type assertion once the nx repo is updated to use https://github.com/nrwl/nx/pull/33095
-            (0, webpack_1.devServerExecutor)(options, context);
+            devServerExecutor(options, context);
     const p = context.projectsConfigurations.projects[context.projectName];
     let pathToManifestFile = (0, path_1.join)(context.root, (0, internal_2.getProjectSourceRoot)(p), 'assets/module-federation.manifest.json');
     if (options.pathToManifestFile) {
@@ -40,7 +44,7 @@ async function* moduleFederationDevServer(schema, context) {
     if (!options.isInitialHost) {
         return yield* currIter;
     }
-    const { staticRemotesIter, devRemoteIters, remotes } = await (0, internal_3.startRemoteIterators)(options, context, lib_1.startRemotes, pathToManifestFile, 'react');
+    const { staticRemotesIter, devRemoteIters, remotes } = await startRemoteIterators(options, context, lib_1.startRemotes, pathToManifestFile, 'react');
     return yield* (0, internal_1.combineAsyncIterables)(currIter, ...devRemoteIters, ...(staticRemotesIter ? [staticRemotesIter] : []), (0, internal_1.createAsyncIterable)(async ({ next, done }) => {
         if (!options.isInitialHost) {
             done();
@@ -56,7 +60,7 @@ async function* moduleFederationDevServer(schema, context) {
             const portsToWaitFor = staticRemotesIter && options.staticRemotesPort
                 ? [options.staticRemotesPort, ...remotes.remotePorts]
                 : [...remotes.remotePorts];
-            await Promise.all(portsToWaitFor.map((port) => (0, internal_4.waitForPortOpen)(port, {
+            await Promise.all(portsToWaitFor.map((port) => (0, internal_3.waitForPortOpen)(port, {
                 retries: 480,
                 retryDelay: 2500,
                 host: host,

package/dist/src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl.js

@@ -4,18 +4,22 @@ exports.default = moduleFederationSsrDevServer;
 const devkit_1 = require("@nx/devkit");
 const internal_1 = require("@nx/devkit/internal");
 const internal_2 = require("@nx/js/internal");
-const internal_3 = require("@nx/module-federation/internal");
-const internal_4 = require("@nx/web/internal");
-const internal_5 = require("@nx/webpack/internal");
+const internal_3 = require("@nx/web/internal");
 const fs_1 = require("fs");
 const path_1 = require("path");
 const lib_1 = require("./lib");
+const assert_package_1 = require("../../utils/assert-package");
 const module_federation_deprecation_1 = require("../../utils/module-federation-deprecation");
+const executorName = '@nx/react:module-federation-ssr-dev-server';
 async function* moduleFederationSsrDevServer(ssrDevServerOptions, context) {
+    (0, assert_package_1.assertPackageIsInstalled)('@nx/module-federation', executorName);
+    (0, assert_package_1.assertPackageIsInstalled)('@nx/webpack', executorName);
+    const { startRemoteIterators } = await import('@nx/module-federation/internal');
+    const { ssrDevServerExecutor } = await import('@nx/webpack/internal');
     (0, module_federation_deprecation_1.warnReactMfSsrDevServerExecutorDeprecation)();
     const options = (0, lib_1.normalizeOptions)(ssrDevServerOptions);
     // TODO(JamesHenry): remove type assertion once the nx repo is updated to use https://github.com/nrwl/nx/pull/33095
-    let iter = (0, internal_5.ssrDevServerExecutor)(options, context);
+    let iter = ssrDevServerExecutor(options, context);
     const projectConfig = context.projectsConfigurations.projects[context.projectName];
     let pathToManifestFile = (0, path_1.join)(context.root, (0, internal_2.getProjectSourceRoot)(projectConfig), 'assets/module-federation.manifest.json');
     if (options.pathToManifestFile) {
@@ -31,7 +35,7 @@ async function* moduleFederationSsrDevServer(ssrDevServerOptions, context) {
     if (!options.isInitialHost) {
         return yield* iter;
     }
-    const { staticRemotesIter, devRemoteIters, remotes } = await (0, internal_3.startRemoteIterators)(options, context, lib_1.startRemotes, pathToManifestFile, 'react', true);
+    const { staticRemotesIter, devRemoteIters, remotes } = await startRemoteIterators(options, context, lib_1.startRemotes, pathToManifestFile, 'react', true);
     const combined = (0, internal_1.combineAsyncIterables)(staticRemotesIter, ...devRemoteIters);
     let refs = 1 + (devRemoteIters?.length ?? 0);
     for await (const result of combined) {
@@ -59,7 +63,7 @@ async function* moduleFederationSsrDevServer(ssrDevServerOptions, context) {
             const portsToWaitFor = staticRemotesIter && options.staticRemotesPort
                 ? [options.staticRemotesPort, ...remotes.remotePorts]
                 : [...remotes.remotePorts];
-            await Promise.all(portsToWaitFor.map((port) => (0, internal_4.waitForPortOpen)(port, {
+            await Promise.all(portsToWaitFor.map((port) => (0, internal_3.waitForPortOpen)(port, {
                 retries: 480,
                 retryDelay: 2500,
                 host,

package/dist/src/executors/module-federation-static-server/module-federation-static-server.impl.d.ts

@@ -1,4 +1,4 @@
-import { StaticRemotesConfig } from '@nx/module-federation/internal';
+import type { StaticRemotesConfig } from '@nx/module-federation/internal';
 import { ExecutorContext } from 'nx/src/config/misc-interfaces';
 import { ModuleFederationDevServerOptions } from '../module-federation-dev-server/schema';
 import { ModuleFederationStaticServerSchema } from './schema';

package/dist/src/executors/module-federation-static-server/module-federation-static-server.impl.js

@@ -5,8 +5,8 @@ exports.default = moduleFederationStaticServer;
 const internal_1 = require("@nx/devkit/internal");
 const devkit_1 = require("@nx/devkit");
 const internal_2 = require("@nx/js/internal");
-const internal_3 = require("@nx/module-federation/internal");
-const internal_4 = require("@nx/web/internal");
+const internal_3 = require("@nx/web/internal");
+const assert_package_1 = require("../../utils/assert-package");
 const module_federation_deprecation_1 = require("../../utils/module-federation-deprecation");
 const child_process_1 = require("child_process");
 const fs_1 = require("fs");
@@ -157,21 +157,26 @@ function startProxies(staticRemotesConfig, hostServeOptions, mappedLocationOfHos
     devkit_1.logger.info('NX Static Consumer (host) proxy started successfully');
 }
 async function* moduleFederationStaticServer(schema, context) {
+    const executorName = '@nx/react:module-federation-static-server';
+    (0, assert_package_1.assertPackageIsInstalled)('@nx/module-federation', executorName);
+    (0, assert_package_1.assertPackageIsInstalled)('express', executorName);
+    (0, assert_package_1.assertPackageIsInstalled)('http-proxy-middleware', executorName);
+    const { buildStaticRemotes, getModuleFederationConfig, getRemotes, parseStaticRemotesConfig, } = await import('@nx/module-federation/internal');
     (0, module_federation_deprecation_1.warnReactMfStaticServerExecutorDeprecation)();
     // Force Node to resolve to look for the nx binary that is inside node_modules
     const nxBin = require.resolve('nx/bin/nx');
     // Get the remotes from the module federation config
     const p = context.projectsConfigurations.projects[context.projectName];
     const options = getBuildAndServeOptionsFromServeTarget(schema.serveTarget, context);
-    const moduleFederationConfig = (0, internal_3.getModuleFederationConfig)(options.buildOptions.tsConfig, context.root, p.root, 'react');
-    const remotes = (0, internal_3.getRemotes)([], options.serveOptions.skipRemotes, moduleFederationConfig, {
+    const moduleFederationConfig = getModuleFederationConfig(options.buildOptions.tsConfig, context.root, p.root, 'react');
+    const remotes = getRemotes([], options.serveOptions.skipRemotes, moduleFederationConfig, {
         projectName: context.projectName,
         projectGraph: context.projectGraph,
         root: context.root,
     }, options.pathToManifestFile);
-    const staticRemotesConfig = (0, internal_3.parseStaticRemotesConfig)([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
+    const staticRemotesConfig = parseStaticRemotesConfig([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
     options.serveOptions.staticRemotesPort ??= remotes.staticRemotePort;
-    const mappedLocationsOfStaticRemotes = await (0, internal_3.buildStaticRemotes)(staticRemotesConfig, nxBin, context, options.serveOptions);
+    const mappedLocationsOfStaticRemotes = await buildStaticRemotes(staticRemotesConfig, nxBin, context, options.serveOptions);
     // Build the host
     const hostUrlSegment = (0, path_1.basename)(options.buildOptions.outputPath);
     const mappedLocationOfHost = `http${options.serveOptions.ssl ? 's' : ''}://${options.serveOptions.host}:${options.serveOptions.staticRemotesPort}/${hostUrlSegment}`;
@@ -179,7 +184,7 @@ async function* moduleFederationStaticServer(schema, context) {
     // Move to a temporary directory
     const commonOutputDirectory = moveToTmpDirectory(staticRemotesConfig, options.buildOptions.outputPath, hostUrlSegment);
     // File Serve the temporary directory
-    const staticFileServerIter = (0, internal_4.fileServerExecutor)({
+    const staticFileServerIter = (0, internal_3.fileServerExecutor)({
         cors: true,
         watch: false,
         staticFilePath: commonOutputDirectory,
@@ -205,7 +210,7 @@ async function* moduleFederationStaticServer(schema, context) {
         const baseUrl = `http${options.serveOptions.ssl ? 's' : ''}://${host}:${options.serveOptions.port}`;
         if (remotes.remotePorts.length === 0) {
             const portsToWaitFor = [options.serveOptions.staticRemotesPort];
-            await Promise.all(portsToWaitFor.map((port) => (0, internal_4.waitForPortOpen)(port, {
+            await Promise.all(portsToWaitFor.map((port) => (0, internal_3.waitForPortOpen)(port, {
                 retries: 480,
                 retryDelay: 2500,
                 host: host,
@@ -219,7 +224,7 @@ async function* moduleFederationStaticServer(schema, context) {
             const portsToWaitFor = staticFileServerIter && options.serveOptions.staticRemotesPort
                 ? [options.serveOptions.staticRemotesPort, ...remotes.remotePorts]
                 : [...remotes.remotePorts];
-            await Promise.all(portsToWaitFor.map((port) => (0, internal_4.waitForPortOpen)(port, {
+            await Promise.all(portsToWaitFor.map((port) => (0, internal_3.waitForPortOpen)(port, {
                 retries: 480,
                 retryDelay: 2500,
                 host: host,

package/dist/src/generators/host/host.js

@@ -130,6 +130,14 @@ async function hostGenerator(host, schema) {
     const installTask = (0, devkit_1.addDependenciesToPackageJson)(host, { '@module-federation/enhanced': versions_1.moduleFederationEnhancedVersion }, {
         '@nx/web': versions_1.nxVersion,
         '@nx/module-federation': versions_1.nxVersion,
+        // The webpack path also generates a `serve-static` target running the
+        // `module-federation-static-server` executor, which proxies via express.
+        ...(options.bundler !== 'rspack'
+            ? {
+                express: versions_1.expressVersion,
+                'http-proxy-middleware': versions_1.httpProxyMiddlewareVersion,
+            }
+            : {}),
     }, undefined, true);
     tasks.push(installTask);
     if (!options.skipFormat) {

package/dist/src/generators/remote/lib/setup-tspath-for-remote.js

@@ -4,10 +4,11 @@ exports.setupTspathForRemote = setupTspathForRemote;
 const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
 const maybe_js_1 = require("../../../utils/maybe-js");
-const module_federation_1 = require("@nx/module-federation");
+const versions_1 = require("../../../utils/versions");
 function setupTspathForRemote(tree, options) {
+    const { normalizeProjectName } = (0, devkit_1.ensurePackage)('@nx/module-federation', versions_1.nxVersion);
     const project = (0, devkit_1.readProjectConfiguration)(tree, options.projectName);
     const exportPath = (0, maybe_js_1.maybeJs)(options, './src/remote-entry.ts');
     const exportName = 'Module';
-    (0, js_1.addTsConfigPath)(tree, `${(0, module_federation_1.normalizeProjectName)(options.projectName)}/${exportName}`, [(0, devkit_1.joinPathFragments)(project.root, exportPath)]);
+    (0, js_1.addTsConfigPath)(tree, `${normalizeProjectName(options.projectName)}/${exportName}`, [(0, devkit_1.joinPathFragments)(project.root, exportPath)]);
 }

package/dist/src/generators/remote/remote.js

@@ -173,6 +173,14 @@ async function remoteGenerator(host, schema) {
         '@module-federation/enhanced': versions_1.moduleFederationEnhancedVersion,
         '@nx/web': versions_1.nxVersion,
         '@nx/module-federation': versions_1.nxVersion,
+        // The webpack path also generates a `serve-static` target running the
+        // `module-federation-static-server` executor, which proxies via express.
+        ...(options.bundler !== 'rspack'
+            ? {
+                express: versions_1.expressVersion,
+                'http-proxy-middleware': versions_1.httpProxyMiddlewareVersion,
+            }
+            : {}),
     }, undefined, true);
     tasks.push(installTask);
     if (!options.skipFormat) {

package/dist/src/migrations/update-23-2-0/add-optional-module-federation-packages.d.ts

@@ -0,0 +1,2 @@
+import { type Tree } from '@nx/devkit';
+export default function addOptionalModuleFederationPackages(tree: Tree): Promise<import("@nx/devkit").GeneratorCallback>;

package/dist/src/migrations/update-23-2-0/add-optional-module-federation-packages.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = addOptionalModuleFederationPackages;
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("../../utils/versions");
+const moduleFederationExecutors = new Set([
+    '@nx/react:module-federation-dev-server',
+    '@nx/react:module-federation-ssr-dev-server',
+    '@nx/react:module-federation-static-server',
+]);
+const staticServerExecutor = '@nx/react:module-federation-static-server';
+function collectExecutors(targetDefaults) {
+    // targetDefaults are keyed by target name or executor, and a default can set
+    // an executor that an empty project target inherits, so scan the keys and any
+    // executor on the default (both the object and array forms).
+    const executors = [];
+    for (const [targetOrExecutor, config] of Object.entries(targetDefaults ?? {})) {
+        executors.push(targetOrExecutor);
+        for (const entry of Array.isArray(config) ? config : [config]) {
+            if (entry.executor != null) {
+                executors.push(entry.executor);
+            }
+        }
+    }
+    return executors;
+}
+async function addOptionalModuleFederationPackages(tree) {
+    const projects = (0, devkit_1.getProjects)(tree);
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    let needsModuleFederation = false;
+    let needsStaticServer = false;
+    for (const [, project] of projects) {
+        for (const target of Object.values(project.targets ?? {})) {
+            needsModuleFederation ||= moduleFederationExecutors.has(target.executor);
+            needsStaticServer ||= target.executor === staticServerExecutor;
+        }
+        // Remotes get a plain dev-server (no Module Federation executor) but still
+        // generate a module-federation.config that requires @nx/module-federation
+        // at build time, so detect them by that config file too. This covers
+        // remotes whose host lives in a different workspace.
+        needsModuleFederation ||=
+            tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.ts')) ||
+                tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.js'));
+    }
+    for (const executor of collectExecutors(nxJson?.targetDefaults)) {
+        needsModuleFederation ||= moduleFederationExecutors.has(executor);
+        needsStaticServer ||= executor === staticServerExecutor;
+    }
+    if (!needsModuleFederation && !needsStaticServer) {
+        return;
+    }
+    return (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
+        ...(needsModuleFederation ? { '@nx/module-federation': versions_1.nxVersion } : {}),
+        ...(needsStaticServer
+            ? {
+                express: versions_1.expressVersion,
+                'http-proxy-middleware': versions_1.httpProxyMiddlewareVersion,
+            }
+            : {}),
+    }, undefined, true);
+}

package/dist/src/migrations/update-23-2-0/add-optional-module-federation-packages.md

@@ -0,0 +1,37 @@
+#### Add Optional Module Federation Packages
+
+Adds `@nx/module-federation`, `express`, and `http-proxy-middleware` to the workspace when existing targets require them.
+
+These packages are no longer direct dependencies of `@nx/react`; they are now optional peer dependencies, so installing `@nx/react` no longer pulls the Module Federation toolchain into workspaces that never use it. This migration backfills them for workspaces that already use Module Federation so those builds keep working after upgrading. Packages that are already present are left untouched.
+
+A package is added only when a matching target exists:
+
+- `@nx/module-federation`: an `@nx/react:module-federation-dev-server`, `@nx/react:module-federation-ssr-dev-server`, or `@nx/react:module-federation-static-server` target, or a project with a `module-federation.config.{js,ts}` file (covers remotes whose host lives in another workspace).
+- `express` and `http-proxy-middleware`: an `@nx/react:module-federation-static-server` target, which proxies the static remotes.
+
+Targets that inherit their executor from an `nx.json` `targetDefaults` entry are detected too.
+
+#### Examples
+
+For a workspace with an `@nx/react:module-federation-dev-server` serve target, the migration adds the Module Federation packages to `devDependencies`.
+
+##### Before
+
+```jsonc title="package.json"
+{
+  "devDependencies": {
+    "@nx/react": "23.1.0",
+  },
+}
+```
+
+##### After
+
+```jsonc title="package.json"
+{
+  "devDependencies": {
+    "@nx/module-federation": "23.2.0",
+    "@nx/react": "23.1.0",
+  },
+}
+```

package/dist/src/migrations/update-23-2-0/add-svgr-webpack-if-used.d.ts

@@ -0,0 +1,2 @@
+import { type Tree } from '@nx/devkit';
+export default function addSvgrWebpackIfUsed(tree: Tree): Promise<import("@nx/devkit").GeneratorCallback>;

package/dist/src/migrations/update-23-2-0/add-svgr-webpack-if-used.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = addSvgrWebpackIfUsed;
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("../../utils/versions");
+// The Nx 22 `add-svgr-to-webpack-config` migration inlined a `withSvgr` helper
+// that resolves `@svgr/webpack` into user webpack configs, but never added the
+// package to the workspace - it only resolved transitively through `@nx/react`.
+// Now that `@nx/react` no longer depends on it, backfill it where a webpack
+// config actually references it.
+const webpackConfigFileNames = [
+    'webpack.config.js',
+    'webpack.config.ts',
+    'webpack.config.cjs',
+    'webpack.config.mjs',
+    'webpack.config.prod.js',
+    'webpack.config.prod.ts',
+    'webpack.server.config.js',
+    'webpack.server.config.ts',
+];
+async function addSvgrWebpackIfUsed(tree) {
+    let needsSvgr = false;
+    for (const [, project] of (0, devkit_1.getProjects)(tree)) {
+        // Configs referenced by executor targets can live anywhere.
+        for (const target of Object.values(project.targets ?? {})) {
+            for (const options of [
+                target.options,
+                ...Object.values(target.configurations ?? {}),
+            ]) {
+                const webpackConfig = options?.webpackConfig;
+                if (typeof webpackConfig === 'string') {
+                    needsSvgr ||= referencesSvgrWebpack(tree, webpackConfig);
+                }
+            }
+        }
+        // Inferred setups have no executor options pointing at a config, so also
+        // check the conventional config file names at the project root.
+        for (const fileName of webpackConfigFileNames) {
+            needsSvgr ||= referencesSvgrWebpack(tree, (0, devkit_1.joinPathFragments)(project.root, fileName));
+        }
+        if (needsSvgr) {
+            break;
+        }
+    }
+    if (!needsSvgr) {
+        return;
+    }
+    return (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@svgr/webpack': versions_1.svgrWebpackVersion }, undefined, true);
+}
+function referencesSvgrWebpack(tree, path) {
+    if (!tree.exists(path)) {
+        return false;
+    }
+    return tree.read(path, 'utf-8').includes('@svgr/webpack');
+}

package/dist/src/migrations/update-23-2-0/add-svgr-webpack-if-used.md

@@ -0,0 +1,28 @@
+#### Add `@svgr/webpack` If Used
+
+Adds `@svgr/webpack` to the workspace when a webpack config references it.
+
+`@svgr/webpack` is no longer a dependency of `@nx/react`, so workspaces whose webpack configs resolve it - which is what the Nx 22 `add-svgr-to-webpack-config` migration inlined - must declare it themselves. This migration backfills it for those workspaces. Configs referenced by executor targets are checked, as well as the conventional config file names at each project root. Workspaces that already have `@svgr/webpack` are left untouched.
+
+#### Examples
+
+##### Before
+
+```jsonc title="package.json"
+{
+  "devDependencies": {
+    "@nx/react": "23.1.0",
+  },
+}
+```
+
+##### After
+
+```jsonc title="package.json"
+{
+  "devDependencies": {
+    "@nx/react": "23.1.0",
+    "@svgr/webpack": "^8.0.1",
+  },
+}
+```

package/dist/src/utils/assert-package.d.ts

@@ -0,0 +1 @@
+export declare function assertPackageIsInstalled(packageName: string, requiredBy: string): void;

package/dist/src/utils/assert-package.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assertPackageIsInstalled = assertPackageIsInstalled;
+function assertPackageIsInstalled(packageName, requiredBy) {
+    try {
+        require.resolve(packageName);
+    }
+    catch (e) {
+        // Only a missing module means "not installed"; surface other resolution
+        // errors (e.g. a malformed package's exports) as-is instead of mislabeling.
+        const code = e.code;
+        if (code !== 'MODULE_NOT_FOUND' && code !== 'ERR_MODULE_NOT_FOUND') {
+            throw e;
+        }
+        throw new Error(`The "${packageName}" package is required by "${requiredBy}" but is not installed. Please install it and try again.`);
+    }
+}

package/dist/src/utils/versions.d.ts

@@ -33,6 +33,7 @@ export declare const postcssVersion = "8.4.38";
 export declare const autoprefixerVersion = "10.4.13";
 export declare const expressVersion = "^4.21.2";
 export declare const typesExpressVersion = "^4.17.21";
+export declare const httpProxyMiddlewareVersion = "^3.0.5";
 export declare const isbotVersion = "^3.6.5";
 export declare const corsVersion = "~2.8.5";
 export declare const typesCorsVersion = "~2.8.12";
@@ -41,3 +42,4 @@ export declare const moduleFederationEnhancedVersion = "^2.1.0";
 export declare const sassVersion = "^1.97.2";
 export declare const rollupPluginUrlVersion = "^8.0.2";
 export declare const svgrRollupVersion = "^8.1.0";
+export declare const svgrWebpackVersion = "^8.0.1";

package/dist/src/utils/versions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.svgrRollupVersion = exports.rollupPluginUrlVersion = exports.sassVersion = exports.moduleFederationEnhancedVersion = exports.moduleFederationNodeVersion = exports.typesCorsVersion = exports.corsVersion = exports.isbotVersion = exports.typesExpressVersion = exports.expressVersion = exports.autoprefixerVersion = exports.postcssVersion = exports.tsLibVersion = exports.eslintPluginReactHooksVersion = exports.eslintPluginReactVersion = exports.eslintPluginJsxA11yVersion = exports.eslintPluginImportVersion = exports.reactReduxVersion = exports.reduxjsToolkitVersion = exports.testingLibraryDomVersion = exports.testingLibraryReactVersion = exports.reactRouterIsBotVersion = exports.reactRouterVersion = exports.reactRouterDomVersion = exports.babelCoreVersion = exports.babelPresetReactVersion = exports.typesNodeVersion = exports.reactViteVersion = exports.typesReactIsVersion = exports.typesReactIsV18Version = exports.typesReactDomVersion = exports.typesReactDomV18Version = exports.typesReactVersion = exports.typesReactV18Version = exports.swcLoaderVersion = exports.reactIsV18Version = exports.reactIsVersion = exports.reactDomV18Version = exports.reactDomVersion = exports.reactV18Version = exports.reactVersion = exports.minSupportedReactVersion = exports.nxVersion = void 0;
+exports.svgrWebpackVersion = exports.svgrRollupVersion = exports.rollupPluginUrlVersion = exports.sassVersion = exports.moduleFederationEnhancedVersion = exports.moduleFederationNodeVersion = exports.typesCorsVersion = exports.corsVersion = exports.isbotVersion = exports.httpProxyMiddlewareVersion = exports.typesExpressVersion = exports.expressVersion = exports.autoprefixerVersion = exports.postcssVersion = exports.tsLibVersion = exports.eslintPluginReactHooksVersion = exports.eslintPluginReactVersion = exports.eslintPluginJsxA11yVersion = exports.eslintPluginImportVersion = exports.reactReduxVersion = exports.reduxjsToolkitVersion = exports.testingLibraryDomVersion = exports.testingLibraryReactVersion = exports.reactRouterIsBotVersion = exports.reactRouterVersion = exports.reactRouterDomVersion = exports.babelCoreVersion = exports.babelPresetReactVersion = exports.typesNodeVersion = exports.reactViteVersion = exports.typesReactIsVersion = exports.typesReactIsV18Version = exports.typesReactDomVersion = exports.typesReactDomV18Version = exports.typesReactVersion = exports.typesReactV18Version = exports.swcLoaderVersion = exports.reactIsV18Version = exports.reactIsVersion = exports.reactDomV18Version = exports.reactDomVersion = exports.reactV18Version = exports.reactVersion = exports.minSupportedReactVersion = exports.nxVersion = void 0;
 const path_1 = require("path");
 exports.nxVersion = require((0, path_1.join)('@nx/react', 'package.json')).version;
 exports.minSupportedReactVersion = '18.0.0';
@@ -41,6 +41,7 @@ exports.autoprefixerVersion = '10.4.13';
 // SSR and Module Federation
 exports.expressVersion = '^4.21.2';
 exports.typesExpressVersion = '^4.17.21';
+exports.httpProxyMiddlewareVersion = '^3.0.5';
 exports.isbotVersion = '^3.6.5';
 exports.corsVersion = '~2.8.5';
 exports.typesCorsVersion = '~2.8.12';
@@ -51,3 +52,4 @@ exports.sassVersion = '^1.97.2';
 // rollup plugins (if needed)
 exports.rollupPluginUrlVersion = '^8.0.2';
 exports.svgrRollupVersion = '^8.1.0';
+exports.svgrWebpackVersion = '^8.0.1';

package/migrations.json

@@ -39,6 +39,18 @@
       "description": "Create AI instructions to help migrate workspaces from React 18 to 19.",
       "prompt": "./dist/src/migrations/update-23-1-0/ai-instructions-for-react-19.md",
       "documentation": "./dist/src/migrations/update-23-1-0/upgrade-to-react-19.md"
+    },
+    "update-23-2-0-add-optional-module-federation-packages": {
+      "version": "23.2.0-beta.4",
+      "description": "Add optional Module Federation packages when existing targets require them.",
+      "implementation": "./dist/src/migrations/update-23-2-0/add-optional-module-federation-packages",
+      "documentation": "./dist/src/migrations/update-23-2-0/add-optional-module-federation-packages.md"
+    },
+    "update-23-2-0-add-svgr-webpack-if-used": {
+      "version": "23.2.0-beta.4",
+      "description": "Add `@svgr/webpack` when a webpack config references it.",
+      "implementation": "./dist/src/migrations/update-23-2-0/add-svgr-webpack-if-used",
+      "documentation": "./dist/src/migrations/update-23-2-0/add-svgr-webpack-if-used.md"
     }
   },
   "packageJsonUpdates": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "23.2.0-canary.20260729-e3e16e9",
+  "version": "23.2.0-canary.20260731-0634da3",
   "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": {
@@ -93,40 +93,52 @@
   "peerDependencies": {
     "babel-plugin-react-compiler": "^1.0.0",
     "react": ">=18.0.0 <20.0.0",
-    "react-dom": ">=18.0.0 <20.0.0"
+    "react-dom": ">=18.0.0 <20.0.0",
+    "express": "^4.21.2",
+    "http-proxy-middleware": "^3.0.5",
+    "@nx/module-federation": "23.2.0-canary.20260731-0634da3"
   },
   "peerDependenciesMeta": {
     "babel-plugin-react-compiler": {
       "optional": true
+    },
+    "@nx/module-federation": {
+      "optional": true
+    },
+    "express": {
+      "optional": true
+    },
+    "http-proxy-middleware": {
+      "optional": true
     }
   },
   "dependencies": {
+    "@babel/preset-react": "^7.22.5",
     "@phenomnomnominal/tsquery": "~6.2.0",
-    "@svgr/webpack": "^8.0.1",
     "minimatch": "10.2.5",
     "tslib": "^2.3.0",
-    "express": "^4.21.2",
-    "http-proxy-middleware": "^3.0.5",
     "semver": "^7.6.3",
-    "@nx/devkit": "23.2.0-canary.20260729-e3e16e9",
-    "@nx/js": "23.2.0-canary.20260729-e3e16e9",
-    "@nx/eslint": "23.2.0-canary.20260729-e3e16e9",
-    "@nx/web": "23.2.0-canary.20260729-e3e16e9",
-    "@nx/module-federation": "23.2.0-canary.20260729-e3e16e9",
-    "@nx/rollup": "23.2.0-canary.20260729-e3e16e9"
+    "@nx/devkit": "23.2.0-canary.20260731-0634da3",
+    "@nx/js": "23.2.0-canary.20260731-0634da3",
+    "@nx/eslint": "23.2.0-canary.20260731-0634da3",
+    "@nx/web": "23.2.0-canary.20260731-0634da3"
   },
   "devDependencies": {
-    "@nx/cypress": "23.2.0-canary.20260729-e3e16e9",
-    "@nx/playwright": "23.2.0-canary.20260729-e3e16e9",
-    "@nx/rsbuild": "23.2.0-canary.20260729-e3e16e9",
-    "@nx/vite": "23.2.0-canary.20260729-e3e16e9",
-    "@nx/vitest": "23.2.0-canary.20260729-e3e16e9",
-    "@nx/webpack": "23.2.0-canary.20260729-e3e16e9",
-    "@nx/storybook": "23.2.0-canary.20260729-e3e16e9",
-    "nx": "23.2.0-canary.20260729-e3e16e9"
+    "express": "^4.21.2",
+    "http-proxy-middleware": "^3.0.5",
+    "@nx/cypress": "23.2.0-canary.20260731-0634da3",
+    "@nx/module-federation": "23.2.0-canary.20260731-0634da3",
+    "@nx/playwright": "23.2.0-canary.20260731-0634da3",
+    "@nx/rollup": "23.2.0-canary.20260731-0634da3",
+    "@nx/vite": "23.2.0-canary.20260731-0634da3",
+    "@nx/vitest": "23.2.0-canary.20260731-0634da3",
+    "@nx/rsbuild": "23.2.0-canary.20260731-0634da3",
+    "@nx/webpack": "23.2.0-canary.20260731-0634da3",
+    "@nx/storybook": "23.2.0-canary.20260731-0634da3",
+    "nx": "23.2.0-canary.20260731-0634da3"
   },
   "optionalDependencies": {
-    "@nx/vite": "23.2.0-canary.20260729-e3e16e9"
+    "@nx/vite": "23.2.0-canary.20260731-0634da3"
   },
   "publishConfig": {
     "access": "public"