@nx/react 23.1.0 → 23.1.2

package/dist/src/generators/host/schema.json

@@ -109,11 +109,17 @@
       "description": "Creates an application with strict mode and strict type checking",
       "default": true
     },
-    "setParserOptionsProject": {
+    "enableTypedLinting": {
       "type": "boolean",
-      "description": "Whether or not to configure the ESLint \"parserOptions.project\" option. We do not do this by default for lint performance reasons.",
+      "description": "Whether to enable typed linting. For flat configs, this configures the recommended `parserOptions.projectService` and `tsconfigRootDir`. For legacy `.eslintrc` configs, this configures `parserOptions.project`. We do not enable this by default for lint performance reasons.",
       "default": false
     },
+    "setParserOptionsProject": {
+      "type": "boolean",
+      "description": "Deprecated alias for `enableTypedLinting`.",
+      "default": false,
+      "x-deprecated": "Use `enableTypedLinting` instead. This option will be removed in Nx v24."
+    },
     "compiler": {
       "type": "string",
       "description": "The compiler to use",

package/dist/src/generators/library/lib/add-linting.d.ts

@@ -1,4 +1,3 @@
-import { Tree } from 'nx/src/generators/tree';
-import { GeneratorCallback } from '@nx/devkit';
+import { GeneratorCallback, Tree } from '@nx/devkit';
 import { NormalizedSchema } from '../schema';
 export declare function addLinting(host: Tree, options: NormalizedSchema): Promise<GeneratorCallback>;

package/dist/src/generators/library/lib/add-linting.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addLinting = addLinting;
 const eslint_1 = require("@nx/eslint");
-const path_1 = require("nx/src/utils/path");
 const devkit_1 = require("@nx/devkit");
 const lint_1 = require("../../../utils/lint");
 const internal_1 = require("@nx/eslint/internal");
@@ -13,12 +12,12 @@ async function addLinting(host, options) {
             linter: options.linter,
             project: options.name,
             tsConfigPaths: [
-                (0, path_1.joinPathFragments)(options.projectRoot, 'tsconfig.lib.json'),
+                (0, devkit_1.joinPathFragments)(options.projectRoot, 'tsconfig.lib.json'),
             ],
             unitTestRunner: options.unitTestRunner,
             skipFormat: true,
             skipPackageJson: options.skipPackageJson,
-            setParserOptionsProject: options.setParserOptionsProject,
+            enableTypedLinting: (0, internal_1.isTypedLintingEnabled)(options),
             addPlugin: options.addPlugin,
         });
         tasks.push(lintTask);

package/dist/src/generators/library/lib/add-rollup-build-target.d.ts

@@ -1,5 +1,4 @@
-import { Tree } from 'nx/src/generators/tree';
-import { GeneratorCallback } from '@nx/devkit';
+import { GeneratorCallback, Tree } from '@nx/devkit';
 import { NormalizedSchema } from '../schema';
 export declare function addRollupBuildTarget(host: Tree, options: NormalizedSchema & {
     format?: Array<'esm' | 'cjs'>;

package/dist/src/generators/library/lib/determine-entry-fields.d.ts

@@ -1,3 +1,3 @@
-import type { PackageJson } from 'nx/src/utils/package-json';
 import type { NormalizedSchema } from '../schema';
+import { type PackageJson } from '@nx/devkit/internal';
 export declare function determineEntryFields(options: NormalizedSchema): Pick<PackageJson, 'main' | 'types' | 'exports'>;

package/dist/src/generators/library/lib/update-app-routes.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateAppRoutes = updateAppRoutes;
 const devkit_1 = require("@nx/devkit");
 const ast_utils_1 = require("../../../utils/ast-utils");
-const ast_utils_2 = require("../../../utils/ast-utils");
 const maybe_js_1 = require("../../../utils/maybe-js");
 const versions_1 = require("../../../utils/versions");
 const internal_1 = require("@nx/js/internal");
@@ -32,7 +31,7 @@ function updateAppRoutes(host, options) {
         const { content: componentContent, source: componentSource } = readComponent(host, appComponentPath);
         const isComponentRouterPresent = componentContent.match(/react-router-dom/);
         if (!isComponentRouterPresent) {
-            const changes = (0, devkit_1.applyChangesToString)(componentContent, (0, ast_utils_2.addInitialRoutes)(appComponentPath, componentSource));
+            const changes = (0, devkit_1.applyChangesToString)(componentContent, (0, ast_utils_1.addInitialRoutes)(appComponentPath, componentSource));
             host.write(appComponentPath, changes);
         }
     }

package/dist/src/generators/library/schema.d.ts

@@ -16,6 +16,10 @@ export interface Schema {
   name?: string;
   publishable?: boolean;
   routing?: boolean;
+  enableTypedLinting?: boolean;
+  /**
+   * @deprecated Use `enableTypedLinting` instead. This option will be removed in Nx v24.
+   */
   setParserOptionsProject?: boolean;
   skipFormat?: boolean;
   skipPackageJson?: boolean;

package/dist/src/generators/library/schema.json

@@ -145,11 +145,17 @@
       "description": "Whether to enable tsconfig strict mode or not.",
       "default": true
     },
-    "setParserOptionsProject": {
+    "enableTypedLinting": {
       "type": "boolean",
-      "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.",
+      "description": "Whether to enable typed linting. For flat configs, this configures the recommended `parserOptions.projectService` and `tsconfigRootDir`. For legacy `.eslintrc` configs, this configures `parserOptions.project`. We do not enable this by default for lint performance reasons.",
       "default": false
     },
+    "setParserOptionsProject": {
+      "type": "boolean",
+      "description": "Deprecated alias for `enableTypedLinting`.",
+      "default": false,
+      "x-deprecated": "Use `enableTypedLinting` instead. This option will be removed in Nx v24."
+    },
     "compiler": {
       "type": "string",
       "enum": ["babel", "swc"],

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

@@ -2,12 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupSsrForRemote = setupSsrForRemote;
 const devkit_1 = require("@nx/devkit");
-const devkit_2 = require("@nx/devkit");
 const versions_1 = require("../../../utils/versions");
 const create_application_files_1 = require("../../application/lib/create-application-files");
 async function setupSsrForRemote(tree, options, appName) {
     const tasks = [];
-    const project = (0, devkit_2.readProjectConfiguration)(tree, appName);
+    const project = (0, devkit_1.readProjectConfiguration)(tree, appName);
     const pathToModuleFederationSsrFiles = options.typescriptConfiguration
         ? `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation-ssr-ts`
         : `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation-ssr`;
@@ -29,28 +28,28 @@ async function setupSsrForRemote(tree, options, appName) {
             browserBuildOutputPath: project.targets.build?.options?.outputPath,
             serverBuildOutputPath: project.targets.server?.options?.outputPath,
         };
-    (0, devkit_2.generateFiles)(tree, (0, devkit_2.joinPathFragments)(__dirname, `../files/${pathToModuleFederationSsrFiles}`), project.root, templateVariables);
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, `../files/${pathToModuleFederationSsrFiles}`), project.root, templateVariables);
     // For hosts to use when running remotes in static mode.
     const originalOutputPath = (project.targets.build?.options?.outputPath ??
         options.isUsingTsSolutionConfig)
         ? 'dist'
-        : (0, devkit_2.joinPathFragments)((0, devkit_1.offsetFromRoot)(options.appProjectRoot), 'dist', options.appProjectRoot != '.'
+        : (0, devkit_1.joinPathFragments)((0, devkit_1.offsetFromRoot)(options.appProjectRoot), 'dist', options.appProjectRoot != '.'
             ? options.appProjectRoot
             : options.projectName);
     const serverOptions = project.targets.server?.options;
     const serverOutputPath = serverOptions?.outputPath ??
-        (0, devkit_2.joinPathFragments)(originalOutputPath, 'server');
+        (0, devkit_1.joinPathFragments)(originalOutputPath, 'server');
     const serverOutputName = serverOptions?.outputFileName ?? 'main.js';
     project.targets['serve-static'] = {
         dependsOn: ['build', 'server'],
         executor: 'nx:run-commands',
         defaultConfiguration: 'development',
         options: {
-            command: `PORT=${options.devServerPort ?? 4200} node ${(0, devkit_2.joinPathFragments)(serverOutputPath, serverOutputName)}`,
+            command: `PORT=${options.devServerPort ?? 4200} node ${(0, devkit_1.joinPathFragments)(serverOutputPath, serverOutputName)}`,
         },
     };
-    (0, devkit_2.updateProjectConfiguration)(tree, appName, project);
-    const installTask = (0, devkit_2.addDependenciesToPackageJson)(tree, {
+    (0, devkit_1.updateProjectConfiguration)(tree, appName, project);
+    const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {
         '@module-federation/node': versions_1.moduleFederationNodeVersion,
         cors: versions_1.corsVersion,
         isbot: versions_1.isbotVersion,
@@ -58,5 +57,5 @@ async function setupSsrForRemote(tree, options, appName) {
         '@types/express': versions_1.typesExpressVersion,
     }, {}, undefined, true);
     tasks.push(installTask);
-    return (0, devkit_2.runTasksInSerial)(...tasks);
+    return (0, devkit_1.runTasksInSerial)(...tasks);
 }

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

@@ -5,10 +5,11 @@ exports.remoteGenerator = remoteGenerator;
 const tslib_1 = require("tslib");
 const internal_1 = require("@nx/devkit/internal");
 const assert_supported_react_version_1 = require("../../utils/assert-supported-react-version");
+const internal_2 = require("@nx/eslint/internal");
 const devkit_1 = require("@nx/devkit");
 const path_1 = require("path");
 const js_1 = require("@nx/js");
-const internal_2 = require("@nx/js/internal");
+const internal_3 = require("@nx/js/internal");
 const update_module_federation_project_1 = require("../../rules/update-module-federation-project");
 const add_mf_env_to_inputs_1 = require("../../utils/add-mf-env-to-inputs");
 const normalize_remote_1 = require("../../utils/normalize-remote");
@@ -59,7 +60,7 @@ function addModuleFederationFiles(host, options) {
             host.delete(pathToWebpackProdConfig);
         }
         // Delete TypeScript prod config in TS solution setup - not needed in Crystal
-        if ((0, internal_2.isUsingTsSolutionSetup)(host)) {
+        if ((0, internal_3.isUsingTsSolutionSetup)(host)) {
             const pathToTsProdConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, options.bundler === 'rspack'
                 ? 'rspack.config.prod.ts'
                 : 'webpack.config.prod.ts');
@@ -109,7 +110,7 @@ async function remoteGenerator(host, schema) {
     });
     tasks.push(initAppTask);
     // In TS solution setup, update package.json to use simple name instead of scoped name
-    if ((0, internal_2.isUsingTsSolutionSetup)(host)) {
+    if ((0, internal_3.isUsingTsSolutionSetup)(host)) {
         const remotePackageJsonPath = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json');
         if (host.exists(remotePackageJsonPath)) {
             (0, devkit_1.updateJson)(host, remotePackageJsonPath, (json) => {
@@ -128,7 +129,7 @@ async function remoteGenerator(host, schema) {
     addModuleFederationFiles(host, options);
     (0, update_module_federation_project_1.updateModuleFederationProject)(host, options);
     // Conditionally setup TS path or package.json exports based on TS solution setup
-    if ((0, internal_2.isUsingTsSolutionSetup)(host)) {
+    if ((0, internal_3.isUsingTsSolutionSetup)(host)) {
         (0, setup_package_json_exports_for_remote_1.setupPackageJsonExportsForRemote)(host, options);
     }
     else {
@@ -152,7 +153,7 @@ async function remoteGenerator(host, schema) {
             (0, devkit_1.updateProjectConfiguration)(host, options.projectName, projectConfig);
         }
     }
-    if (!options.setParserOptionsProject) {
+    if (!(0, internal_2.isTypedLintingEnabled)(options)) {
         host.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.lint.json'));
     }
     if (options.host && options.bundler === 'rspack') {
@@ -164,7 +165,7 @@ async function remoteGenerator(host, schema) {
     }
     if (options.host && options.dynamic) {
         const hostConfig = (0, devkit_1.readProjectConfiguration)(host, schema.host);
-        const pathToMFManifest = (0, devkit_1.joinPathFragments)((0, internal_2.getProjectSourceRoot)(hostConfig, host), 'assets/module-federation.manifest.json');
+        const pathToMFManifest = (0, devkit_1.joinPathFragments)((0, internal_3.getProjectSourceRoot)(hostConfig, host), 'assets/module-federation.manifest.json');
         (0, add_remote_to_dynamic_host_1.addRemoteToDynamicHost)(host, options.projectName, options.devServerPort, pathToMFManifest);
     }
     (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(host, options.bundler);
@@ -172,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/generators/remote/schema.d.ts

@@ -14,6 +14,10 @@ export interface Schema {
   linter: Linter | LinterType;
   name?: string;
   routing?: boolean;
+  enableTypedLinting?: boolean;
+  /**
+   * @deprecated Use `enableTypedLinting` instead. This option will be removed in Nx v24.
+   */
   setParserOptionsProject?: boolean;
   skipFormat: boolean;
   skipNxJson?: boolean;

package/dist/src/generators/remote/schema.json

@@ -115,11 +115,17 @@
       "description": "Creates an application with strict mode and strict type checking.",
       "default": true
     },
-    "setParserOptionsProject": {
+    "enableTypedLinting": {
       "type": "boolean",
-      "description": "Whether or not to configure the ESLint \"parserOptions.project\" option. We do not do this by default for lint performance reasons.",
+      "description": "Whether to enable typed linting. For flat configs, this configures the recommended `parserOptions.projectService` and `tsconfigRootDir`. For legacy `.eslintrc` configs, this configures `parserOptions.project`. We do not enable this by default for lint performance reasons.",
       "default": false
     },
+    "setParserOptionsProject": {
+      "type": "boolean",
+      "description": "Deprecated alias for `enableTypedLinting`.",
+      "default": false,
+      "x-deprecated": "Use `enableTypedLinting` instead. This option will be removed in Nx v24."
+    },
     "compiler": {
       "type": "string",
       "description": "The compiler to use.",

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/plugins/router-plugin.js

@@ -5,18 +5,16 @@ const internal_1 = require("@nx/devkit/internal");
 const devkit_1 = require("@nx/devkit");
 const path_1 = require("path");
 const fs_1 = require("fs");
-const cache_directory_1 = require("nx/src/utils/cache-directory");
 const js_1 = require("@nx/js");
-const devkit_internals_1 = require("nx/src/devkit-internals");
 const internal_2 = require("@nx/js/internal");
 const pmCommand = (0, devkit_1.getPackageManagerCommand)();
 const reactRouterConfigBlob = '**/react-router.config.{ts,js,cjs,cts,mjs,mts}';
 exports.createNodes = [
     reactRouterConfigBlob,
     async (configFiles, options, context) => {
-        const optionsHash = (0, devkit_internals_1.hashObject)(options);
+        const optionsHash = (0, internal_1.hashObject)(options);
         const normalizedOptions = normalizeOptions(options);
-        const cachePath = (0, path_1.join)(cache_directory_1.workspaceDataDirectory, `react-router-${optionsHash}.hash`);
+        const cachePath = (0, path_1.join)(internal_1.workspaceDataDirectory, `react-router-${optionsHash}.hash`);
         const targetsCache = new internal_1.PluginCache(cachePath);
         const isUsingTsSolutionSetup = (0, internal_2.isUsingTsSolutionSetup)();
         const { roots: projectRoots, configFiles: validConfigFiles } = configFiles.reduce((acc, configFile) => {

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/create-ts-config.d.ts

@@ -1,4 +1,4 @@
-import { Tree } from 'nx/src/generators/tree';
+import { Tree } from '@nx/devkit';
 export declare function createTsConfig(host: Tree, projectRoot: string, type: 'app' | 'lib', options: {
     strict?: boolean;
     style?: string;

package/dist/src/utils/create-ts-config.js

@@ -4,8 +4,8 @@ exports.createTsConfig = createTsConfig;
 exports.extractTsConfigBase = extractTsConfigBase;
 const tslib_1 = require("tslib");
 const shared = tslib_1.__importStar(require("@nx/js"));
-const json_1 = require("nx/src/generators/utils/json");
 const internal_1 = require("@nx/js/internal");
+const devkit_1 = require("@nx/devkit");
 function createTsConfig(host, projectRoot, type, options, relativePathToRootTsConfig) {
     if ((0, internal_1.isUsingTsSolutionSetup)(host)) {
         createTsConfigForTsSolution(host, projectRoot, type, options, relativePathToRootTsConfig);
@@ -43,10 +43,10 @@ function createTsConfigForTsSolution(host, projectRoot, type, options, relativeP
     else {
         json.extends = relativePathToRootTsConfig;
     }
-    (0, json_1.writeJson)(host, `${projectRoot}/tsconfig.json`, json);
+    (0, devkit_1.writeJson)(host, `${projectRoot}/tsconfig.json`, json);
     const tsconfigProjectPath = `${projectRoot}/tsconfig.${type}.json`;
     if (host.exists(tsconfigProjectPath)) {
-        (0, json_1.updateJson)(host, tsconfigProjectPath, (json) => {
+        (0, devkit_1.updateJson)(host, tsconfigProjectPath, (json) => {
             if (options.bundler === 'vite') {
                 json.compilerOptions ??= {};
                 const types = new Set(json.compilerOptions.types ?? []);
@@ -92,10 +92,10 @@ function createTsConfigForNonTsSolution(host, projectRoot, type, options, relati
     else {
         json.extends = relativePathToRootTsConfig;
     }
-    (0, json_1.writeJson)(host, `${projectRoot}/tsconfig.json`, json);
+    (0, devkit_1.writeJson)(host, `${projectRoot}/tsconfig.json`, json);
     const tsconfigProjectPath = `${projectRoot}/tsconfig.${type}.json`;
     if (options.bundler === 'vite' && host.exists(tsconfigProjectPath)) {
-        (0, json_1.updateJson)(host, tsconfigProjectPath, (json) => {
+        (0, devkit_1.updateJson)(host, tsconfigProjectPath, (json) => {
             json.compilerOptions ??= {};
             const types = new Set(json.compilerOptions.types ?? []);
             types.add('node');

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": {