@nx/react 22.0.0-beta.0 → 22.0.0-canary.20251001-e28a97a

package/migrations.json

@@ -1,23 +1,5 @@
 {
   "generators": {
-    "update-19-6-0-turn-module-federation-dts-off": {
-      "cli": "nx",
-      "version": "19.6.0-beta.4",
-      "description": "Ensure Module Federation DTS is turned off by default.",
-      "factory": "./src/migrations/update-19-6-0/turn-off-dts-by-default"
-    },
-    "update-module-federation-ssr-server-file": {
-      "cli": "nx",
-      "version": "19.6.0-beta.4",
-      "description": "Update the server file for Module Federation SSR port value to be the same as the 'serve' target port value.",
-      "factory": "./src/migrations/update-19-6-0/update-ssr-server-port"
-    },
-    "update-19-6-1-ensure-module-federation-target-defaults": {
-      "cli": "nx",
-      "version": "19.6.1-beta.0",
-      "description": "Ensure Target Defaults are set correctly for Module Federation.",
-      "factory": "./src/migrations/update-19-6-1/ensure-depends-on-for-mf"
-    },
     "update-20-2-0-update-module-federation-config-import": {
       "cli": "nx",
       "version": "20.2.0-beta.2",
@@ -47,82 +29,15 @@
       "version": "21.0.0-beta.11",
       "description": "Replaces `classProperties.loose` option with `loose`.",
       "factory": "./src/migrations/update-21-0-0/update-babel-loose"
+    },
+    "update-22-0-0-add-svgr-to-webpack-config": {
+      "cli": "nx",
+      "version": "22.0.0-beta.0",
+      "description": "Updates webpack configs using React to use the new withSvgr composable function instead of the svgr option in withReact or NxReactWebpackPlugin.",
+      "factory": "./src/migrations/update-22-0-0/add-svgr-to-webpack-config"
     }
   },
   "packageJsonUpdates": {
-    "19.0.0": {
-      "version": "19.0.0-beta.12",
-      "packages": {
-        "react": {
-          "version": "18.3.1",
-          "alwaysAddToPackageJson": false
-        },
-        "react-dom": {
-          "version": "18.3.1",
-          "alwaysAddToPackageJson": false
-        },
-        "react-is": {
-          "version": "18.3.1",
-          "alwaysAddToPackageJson": false
-        },
-        "@types/react": {
-          "version": "18.3.1",
-          "alwaysAddToPackageJson": false
-        },
-        "@types/react-dom": {
-          "version": "18.3.0",
-          "alwaysAddToPackageJson": false
-        },
-        "@types/react-is": {
-          "version": "18.3.0",
-          "alwaysAddToPackageJson": false
-        },
-        "@testing-library/react": {
-          "version": "15.0.6",
-          "alwaysAddToPackageJson": false
-        }
-      }
-    },
-    "19.0.3": {
-      "version": "19.0.3-beta.0",
-      "packages": {
-        "tailwindcss": {
-          "version": "3.4.3",
-          "alwaysAddToPackageJson": false
-        }
-      }
-    },
-    "19.2.0": {
-      "version": "19.2.0-beta.8",
-      "packages": {
-        "postcss": {
-          "version": "8.4.38",
-          "alwaysAddToPackageJson": false
-        }
-      }
-    },
-    "19.5.0-module-federation": {
-      "version": "19.5.0-beta.0",
-      "packages": {
-        "@module-federation/node": {
-          "version": "^2.3.0",
-          "alwaysAddToPackageJson": false
-        }
-      }
-    },
-    "19.7.0": {
-      "version": "19.7.0-beta.0",
-      "packages": {
-        "@module-federation/enhanced": {
-          "version": "~0.6.0",
-          "alwaysAddToPackageJson": false
-        },
-        "@module-federation/node": {
-          "version": "~2.5.0",
-          "alwaysAddToPackageJson": false
-        }
-      }
-    },
     "20.0.0": {
       "version": "20.0.0-beta.8",
       "packages": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "22.0.0-beta.0",
+  "version": "22.0.0-canary.20251001-e28a97a",
   "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": {
@@ -38,19 +38,19 @@
     "minimatch": "9.0.3",
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
-    "@nx/devkit": "22.0.0-beta.0",
-    "@nx/js": "22.0.0-beta.0",
-    "@nx/eslint": "22.0.0-beta.0",
-    "@nx/web": "22.0.0-beta.0",
-    "@nx/vite": "22.0.0-beta.0",
-    "@nx/module-federation": "22.0.0-beta.0",
-    "@nx/rollup": "22.0.0-beta.0",
+    "@nx/devkit": "22.0.0-canary.20251001-e28a97a",
+    "@nx/js": "22.0.0-canary.20251001-e28a97a",
+    "@nx/eslint": "22.0.0-canary.20251001-e28a97a",
+    "@nx/web": "22.0.0-canary.20251001-e28a97a",
+    "@nx/vite": "22.0.0-canary.20251001-e28a97a",
+    "@nx/module-federation": "22.0.0-canary.20251001-e28a97a",
+    "@nx/rollup": "22.0.0-canary.20251001-e28a97a",
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.5",
     "semver": "^7.6.3"
   },
   "devDependencies": {
-    "nx": "22.0.0-beta.0"
+    "nx": "22.0.0-canary.20251001-e28a97a"
   },
   "publishConfig": {
     "access": "public"

package/plugins/nx-react-webpack-plugin/lib/apply-react-config.d.ts

@@ -1,6 +1,3 @@
 import { Configuration, WebpackOptionsNormalized } from 'webpack';
-import { SvgrOptions } from '../../with-react';
-export declare function applyReactConfig(options: {
-    svgr?: boolean | SvgrOptions;
-}, config?: Partial<WebpackOptionsNormalized | Configuration>): void;
+export declare function applyReactConfig(options?: Record<string, any>, config?: Partial<WebpackOptionsNormalized | Configuration>): void;
 //# sourceMappingURL=apply-react-config.d.ts.map

package/plugins/nx-react-webpack-plugin/lib/apply-react-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"apply-react-config.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/plugins/nx-react-webpack-plugin/lib/apply-react-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE;IAAE,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAA;CAAE,EACzC,MAAM,GAAE,OAAO,CAAC,wBAAwB,GAAG,aAAa,CAAM,GAC7D,IAAI,CAwCN"}
+{"version":3,"file":"apply-react-config.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/plugins/nx-react-webpack-plugin/lib/apply-react-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAElE,wBAAgB,gBAAgB,CAC9B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,EACjC,MAAM,GAAE,OAAO,CAAC,wBAAwB,GAAG,aAAa,CAAM,GAC7D,IAAI,CAUN"}

package/plugins/nx-react-webpack-plugin/lib/apply-react-config.js

@@ -1,35 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyReactConfig = applyReactConfig;
-function applyReactConfig(options, config = {}) {
+function applyReactConfig(options = {}, config = {}) {
     if (!process.env['NX_TASK_TARGET_PROJECT'])
         return;
     addHotReload(config);
-    if (options.svgr !== false || typeof options.svgr === 'object') {
-        removeSvgLoaderIfPresent(config);
-        const defaultSvgrOptions = {
-            svgo: false,
-            titleProp: true,
-            ref: true,
-        };
-        const svgrOptions = typeof options.svgr === 'object' ? options.svgr : defaultSvgrOptions;
-        config.module.rules.push({
-            test: /\.svg$/,
-            issuer: /\.(js|ts|md)x?$/,
-            use: [
-                {
-                    loader: require.resolve('@svgr/webpack'),
-                    options: svgrOptions,
-                },
-                {
-                    loader: require.resolve('file-loader'),
-                    options: {
-                        name: '[name].[hash].[ext]',
-                    },
-                },
-            ],
-        });
-    }
     // enable webpack node api
     config.node = {
         __dirname: true,
@@ -59,13 +34,3 @@ function addHotReload(config) {
         config.plugins.push(new ReactRefreshPlugin({ overlay: false }));
     }
 }
-// We remove potentially conflicting rules that target SVGs because we use @svgr/webpack loader
-// See https://github.com/nrwl/nx/issues/14383
-function removeSvgLoaderIfPresent(config) {
-    const svgLoaderIdx = config.module.rules.findIndex((rule) => typeof rule === 'object' &&
-        typeof rule.test !== 'undefined' &&
-        rule.test.toString().includes('svg'));
-    if (svgLoaderIdx === -1)
-        return;
-    config.module.rules.splice(svgLoaderIdx, 1);
-}

package/plugins/nx-react-webpack-plugin/nx-react-webpack-plugin.d.ts

@@ -1,9 +1,7 @@
 import { Compiler } from 'webpack';
 export declare class NxReactWebpackPlugin {
     private options;
-    constructor(options?: {
-        svgr?: boolean;
-    });
+    constructor(options?: Record<string, any>);
     apply(compiler: Compiler): void;
 }
 //# sourceMappingURL=nx-react-webpack-plugin.d.ts.map

package/plugins/nx-react-webpack-plugin/nx-react-webpack-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nx-react-webpack-plugin.d.ts","sourceRoot":"","sources":["../../../../../packages/react/plugins/nx-react-webpack-plugin/nx-react-webpack-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGnC,qBAAa,oBAAoB;IACnB,OAAO,CAAC,OAAO;gBAAP,OAAO,GAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAO;IAEpD,KAAK,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI;CAGhC"}
+{"version":3,"file":"nx-react-webpack-plugin.d.ts","sourceRoot":"","sources":["../../../../../packages/react/plugins/nx-react-webpack-plugin/nx-react-webpack-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGnC,qBAAa,oBAAoB;IACnB,OAAO,CAAC,OAAO;gBAAP,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM;IAErD,KAAK,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI;CAGhC"}

package/plugins/with-react.d.ts

@@ -1,16 +1,6 @@
 import type { Configuration } from 'webpack';
 import type { NxWebpackExecutionContext, WithWebOptions } from '@nx/webpack';
-export interface SvgrOptions {
-    svgo?: boolean;
-    titleProp?: boolean;
-    ref?: boolean;
-}
 export interface WithReactOptions extends WithWebOptions {
-    /**
-     * @deprecated Add SVGR support in your Webpack configuration without relying on Nx. See https://react-svgr.com/docs/webpack/
-     * TODO(v22): Remove this option and migrate userland webpack config to explicitly configure @svgr/webpack
-     * */
-    svgr?: boolean | SvgrOptions;
 }
 /**
  * @param {WithReactOptions} pluginOptions

package/plugins/with-react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"with-react.d.ts","sourceRoot":"","sources":["../../../../packages/react/plugins/with-react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,EAAE,yBAAyB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAK7E,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AACD,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;SAGK;IACL,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;CAC9B;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,aAAa,GAAE,gBAAqB,IAE1D,QAAQ,aAAa,EACrB,SAAS,yBAAyB,KACjC,aAAa,CAajB"}
+{"version":3,"file":"with-react.d.ts","sourceRoot":"","sources":["../../../../packages/react/plugins/with-react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,EAAE,yBAAyB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAK7E,MAAM,WAAW,gBAAiB,SAAQ,cAAc;CAAG;AAE3D;;;GAGG;AACH,wBAAgB,SAAS,CAAC,aAAa,GAAE,gBAAqB,IAE1D,QAAQ,aAAa,EACrB,SAAS,yBAAyB,KACjC,aAAa,CAajB"}

package/plugins/with-react.js

@@ -14,7 +14,7 @@ function withReact(pluginOptions = {}) {
             return config;
         // Apply web config for CSS, JSX, index.html handling, etc.
         config = withWeb(pluginOptions)(config, context);
-        (0, apply_react_config_1.applyReactConfig)(pluginOptions, config);
+        (0, apply_react_config_1.applyReactConfig)({}, config);
         processed.add(config);
         return config;
     };

package/src/migrations/update-22-0-0/add-svgr-to-webpack-config.d.ts

@@ -0,0 +1,3 @@
+import { type Tree } from '@nx/devkit';
+export default function addSvgrToWebpackConfig(tree: Tree): Promise<import("@nx/devkit").GeneratorCallback>;
+//# sourceMappingURL=add-svgr-to-webpack-config.d.ts.map

package/src/migrations/update-22-0-0/add-svgr-to-webpack-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-svgr-to-webpack-config.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/migrations/update-22-0-0/add-svgr-to-webpack-config.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,IAAI,EAOV,MAAM,YAAY,CAAC;AAuGpB,wBAA8B,sBAAsB,CAAC,IAAI,EAAE,IAAI,mDA+X9D"}

package/src/migrations/update-22-0-0/add-svgr-to-webpack-config.js

@@ -0,0 +1,403 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = addSvgrToWebpackConfig;
+const devkit_1 = require("@nx/devkit");
+const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
+const tsquery_1 = require("@phenomnomnominal/tsquery");
+const ts = require("typescript");
+const withSvgrFunctionForWithReact = `
+
+// SVGR support function (migrated from svgr option in withReact/NxReactWebpackPlugin)
+function withSvgr(svgrOptions = {}) {
+  const defaultOptions = {
+    svgo: false,
+    titleProp: true,
+    ref: true,
+  };
+
+  const options = { ...defaultOptions, ...svgrOptions };
+
+  return function configure(config) {
+    // Remove existing SVG loader if present
+    const svgLoaderIdx = config.module.rules.findIndex(
+      (rule) =>
+        typeof rule === 'object' &&
+        typeof rule.test !== 'undefined' &&
+        rule.test.toString().includes('svg')
+    );
+
+    if (svgLoaderIdx !== -1) {
+      config.module.rules.splice(svgLoaderIdx, 1);
+    }
+
+    // Add SVGR loader
+    config.module.rules.push({
+      test: /\\.svg$/,
+      issuer: /\\.(js|ts|md)x?$/,
+      use: [
+        {
+          loader: require.resolve('@svgr/webpack'),
+          options,
+        },
+        {
+          loader: require.resolve('file-loader'),
+          options: {
+            name: '[name].[hash].[ext]',
+          },
+        },
+      ],
+    });
+
+    return config;
+  };
+}
+`;
+const withSvgrFunctionForNxReactWebpackPlugin = `
+
+// SVGR support function (migrated from svgr option in withReact/NxReactWebpackPlugin)
+function withSvgr(svgrOptions = {}) {
+  const defaultOptions = {
+    svgo: false,
+    titleProp: true,
+    ref: true,
+  };
+
+  const options = { ...defaultOptions, ...svgrOptions };
+
+  return (config) => {
+    config.plugins.push({
+      apply: (compiler) => {
+        // Remove ALL existing SVG loaders
+        compiler.options.module.rules = compiler.options.module.rules.filter(
+          (rule) =>
+            !(
+              rule &&
+              typeof rule === 'object' &&
+              rule.test &&
+              rule.test.toString().includes('svg')
+            )
+        );
+
+        // Add SVGR loader with both default and named exports
+        compiler.options.module.rules.push({
+          test: /\.svg$/,
+          issuer: /\.[jt]sx?$/,
+          use: [
+            {
+              loader: require.resolve('@svgr/webpack'),
+              options,
+            },
+            {
+              loader: require.resolve('file-loader'),
+              options: {
+                name: '[name].[hash].[ext]',
+              },
+            },
+          ],
+        });
+      },
+    });
+    return config;
+  };
+}
+`;
+async function addSvgrToWebpackConfig(tree) {
+    const projects = new Map();
+    // Find all React webpack projects using either withReact OR NxReactWebpackPlugin
+    (0, executor_options_utils_1.forEachExecutorOptions)(tree, '@nx/webpack:webpack', (options, project, target) => {
+        if (!options.webpackConfig)
+            return;
+        const webpackConfigPath = options.webpackConfig;
+        if (!tree.exists(webpackConfigPath))
+            return;
+        const content = tree.read(webpackConfigPath, 'utf-8');
+        const ast = tsquery_1.tsquery.ast(content);
+        // Check if this is a withReact setup
+        if (content.includes('withReact')) {
+            const withReactCalls = (0, tsquery_1.tsquery)(ast, 'CallExpression[expression.name=withReact]');
+            if (withReactCalls.length > 0) {
+                const callExpr = withReactCalls[0];
+                if (callExpr.arguments.length === 0)
+                    return;
+                const arg = callExpr.arguments[0];
+                if (!ts.isObjectLiteralExpression(arg))
+                    return;
+                const svgrProp = arg.properties.find((prop) => ts.isPropertyAssignment(prop) &&
+                    ts.isIdentifier(prop.name) &&
+                    prop.name.text === 'svgr');
+                if (svgrProp) {
+                    let svgrValue;
+                    if (ts.isObjectLiteralExpression(svgrProp.initializer)) {
+                        svgrValue = {};
+                        for (const prop of svgrProp.initializer.properties) {
+                            if (!ts.isPropertyAssignment(prop))
+                                continue;
+                            if (!ts.isIdentifier(prop.name))
+                                continue;
+                            const key = prop.name.text;
+                            if (prop.initializer.kind === ts.SyntaxKind.TrueKeyword) {
+                                svgrValue[key] = true;
+                            }
+                            else if (prop.initializer.kind === ts.SyntaxKind.FalseKeyword) {
+                                svgrValue[key] = false;
+                            }
+                        }
+                    }
+                    else {
+                        svgrValue =
+                            svgrProp.initializer.kind === ts.SyntaxKind.TrueKeyword;
+                    }
+                    projects.set(webpackConfigPath, {
+                        svgrOptions: svgrValue,
+                        isWithReact: true,
+                    });
+                }
+            }
+        }
+        // Otherwise check if this is NxReactWebpackPlugin setup
+        else if (content.includes('NxReactWebpackPlugin')) {
+            const pluginCalls = (0, tsquery_1.tsquery)(ast, 'NewExpression[expression.name=NxReactWebpackPlugin]');
+            if (pluginCalls.length > 0) {
+                const newExpr = pluginCalls[0];
+                if (!newExpr.arguments || newExpr.arguments.length === 0)
+                    return;
+                const arg = newExpr.arguments[0];
+                if (!ts.isObjectLiteralExpression(arg))
+                    return;
+                const svgrProp = arg.properties.find((prop) => ts.isPropertyAssignment(prop) &&
+                    ts.isIdentifier(prop.name) &&
+                    prop.name.text === 'svgr');
+                if (svgrProp) {
+                    let svgrValue;
+                    if (ts.isObjectLiteralExpression(svgrProp.initializer)) {
+                        svgrValue = {};
+                        for (const prop of svgrProp.initializer.properties) {
+                            if (!ts.isPropertyAssignment(prop))
+                                continue;
+                            if (!ts.isIdentifier(prop.name))
+                                continue;
+                            const key = prop.name.text;
+                            if (prop.initializer.kind === ts.SyntaxKind.TrueKeyword) {
+                                svgrValue[key] = true;
+                            }
+                            else if (prop.initializer.kind === ts.SyntaxKind.FalseKeyword) {
+                                svgrValue[key] = false;
+                            }
+                        }
+                    }
+                    else if (svgrProp.initializer.kind === ts.SyntaxKind.TrueKeyword) {
+                        svgrValue = true;
+                    }
+                    else if (svgrProp.initializer.kind === ts.SyntaxKind.FalseKeyword) {
+                        svgrValue = false;
+                    }
+                    // Add to projects if svgr is explicitly set
+                    if (svgrValue !== undefined) {
+                        projects.set(webpackConfigPath, {
+                            svgrOptions: svgrValue,
+                            isWithReact: false,
+                        });
+                    }
+                }
+            }
+        }
+    });
+    if (projects.size === 0)
+        return;
+    // Update webpack configs to add withSvgr function inline
+    for (const [webpackConfigPath, config] of projects.entries()) {
+        let content = tree.read(webpackConfigPath, 'utf-8');
+        const ast = tsquery_1.tsquery.ast(content);
+        const changes = [];
+        // Build the svgr options for this specific config
+        let svgrOptionsStr = '';
+        if (config.svgrOptions) {
+            const importStatements = (0, tsquery_1.tsquery)(ast, 'ImportDeclaration');
+            const requireStatements = (0, tsquery_1.tsquery)(ast, 'VariableStatement:has(CallExpression[expression.name=require])');
+            const allImportRequires = [
+                ...importStatements,
+                ...requireStatements,
+            ].sort((a, b) => a.getEnd() - b.getEnd());
+            const lastImportOrRequire = allImportRequires[allImportRequires.length - 1];
+            if (config.svgrOptions === true || config.svgrOptions === undefined) {
+                svgrOptionsStr = '';
+            }
+            else if (typeof config.svgrOptions === 'object') {
+                const options = Object.entries(config.svgrOptions)
+                    .map(([key, value]) => `  ${key}: ${value}`)
+                    .join(',\n');
+                svgrOptionsStr = `{\n${options}\n}`;
+            }
+            if (lastImportOrRequire) {
+                changes.push({
+                    type: devkit_1.ChangeType.Insert,
+                    index: lastImportOrRequire.getEnd(),
+                    text: config.isWithReact
+                        ? withSvgrFunctionForWithReact
+                        : withSvgrFunctionForNxReactWebpackPlugin,
+                });
+            }
+            else {
+                changes.push({
+                    type: devkit_1.ChangeType.Insert,
+                    index: 0,
+                    text: (config.isWithReact
+                        ? withSvgrFunctionForWithReact
+                        : withSvgrFunctionForNxReactWebpackPlugin) + '\n',
+                });
+            }
+        }
+        // Remove svgr option based on the style (withReact OR NxReactWebpackPlugin)
+        if (config.isWithReact) {
+            // Remove svgr option from first withReact call (only one expected)
+            const withReactCalls = (0, tsquery_1.tsquery)(ast, 'CallExpression[expression.name=withReact]');
+            if (withReactCalls.length > 0) {
+                const callExpr = withReactCalls[0];
+                if (callExpr.arguments.length > 0) {
+                    const arg = callExpr.arguments[0];
+                    if (ts.isObjectLiteralExpression(arg)) {
+                        const svgrProp = arg.properties.find((prop) => ts.isPropertyAssignment(prop) &&
+                            ts.isIdentifier(prop.name) &&
+                            prop.name.text === 'svgr');
+                        if (svgrProp) {
+                            changes.push({
+                                type: devkit_1.ChangeType.Delete,
+                                start: arg.getStart(),
+                                length: arg.getEnd() - arg.getStart(),
+                            });
+                            if (config.svgrOptions) {
+                                const composePluginsCalls = (0, tsquery_1.tsquery)(ast, 'CallExpression[expression.name=composePlugins]');
+                                if (composePluginsCalls.length > 0) {
+                                    const composeCall = composePluginsCalls[0];
+                                    let svgrCallStr = '';
+                                    if (config.svgrOptions === true ||
+                                        config.svgrOptions === undefined) {
+                                        svgrCallStr = 'withSvgr()';
+                                    }
+                                    else if (typeof config.svgrOptions === 'object') {
+                                        svgrCallStr = `withSvgr(${svgrOptionsStr})`;
+                                    }
+                                    const withReactIdx = composeCall.arguments.findIndex((arg) => arg.getText().includes('withReact'));
+                                    // Insert withSvgr as the last argument before the closing paren
+                                    const argToInsertAfter = composeCall.arguments[withReactIdx];
+                                    if (argToInsertAfter) {
+                                        changes.push({
+                                            type: devkit_1.ChangeType.Insert,
+                                            index: argToInsertAfter.getEnd(),
+                                            text: `, ${svgrCallStr}`,
+                                        });
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        else {
+            // Remove svgr option from first NxReactWebpackPlugin call
+            const pluginCalls = (0, tsquery_1.tsquery)(ast, 'NewExpression[expression.name=NxReactWebpackPlugin]');
+            if (pluginCalls.length > 0) {
+                const newExpr = pluginCalls[0];
+                if (newExpr.arguments && newExpr.arguments.length > 0) {
+                    const arg = newExpr.arguments[0];
+                    if (ts.isObjectLiteralExpression(arg)) {
+                        const svgrProp = arg.properties.find((prop) => ts.isPropertyAssignment(prop) &&
+                            ts.isIdentifier(prop.name) &&
+                            prop.name.text === 'svgr');
+                        if (svgrProp) {
+                            const hasOnlySvgrProperty = arg.properties.length === 1;
+                            // Replace entire object argument with empty parentheses when only svgr property exists
+                            if (hasOnlySvgrProperty) {
+                                changes.push({
+                                    type: devkit_1.ChangeType.Delete,
+                                    start: arg.getStart(),
+                                    length: arg.getEnd() - arg.getStart(),
+                                });
+                            }
+                            // If more properties exist, just remove the svgr property
+                            else {
+                                const propIndex = arg.properties.indexOf(svgrProp);
+                                const isLastProp = propIndex === arg.properties.length - 1;
+                                const isFirstProp = propIndex === 0;
+                                let removeStart = svgrProp.getFullStart();
+                                let removeEnd = svgrProp.getEnd();
+                                if (!isLastProp) {
+                                    const nextProp = arg.properties[propIndex + 1];
+                                    removeEnd = nextProp.getFullStart();
+                                }
+                                else if (!isFirstProp) {
+                                    const prevProp = arg.properties[propIndex - 1];
+                                    const textBetween = content.substring(prevProp.getEnd(), svgrProp.getFullStart());
+                                    const commaIndex = textBetween.indexOf(',');
+                                    if (commaIndex !== -1) {
+                                        removeStart = prevProp.getEnd() + commaIndex;
+                                    }
+                                }
+                                changes.push({
+                                    type: devkit_1.ChangeType.Delete,
+                                    start: removeStart,
+                                    length: removeEnd - removeStart,
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+            // For NxReactWebpackPlugin style, wrap the entire module.exports or export default with withSvgr
+            if (config.svgrOptions) {
+                const allAssignments = (0, tsquery_1.tsquery)(ast, 'BinaryExpression');
+                // Find the one that has module.exports on the left side
+                const moduleExportsAssignment = allAssignments.find((node) => {
+                    const binaryExpr = node;
+                    const left = binaryExpr.left;
+                    return (ts.isPropertyAccessExpression(left) &&
+                        ts.isIdentifier(left.expression) &&
+                        left.expression.text === 'module' &&
+                        ts.isIdentifier(left.name) &&
+                        left.name.text === 'exports');
+                });
+                // Also check for export default
+                const exportDefaultStatements = (0, tsquery_1.tsquery)(ast, 'ExportAssignment');
+                const exportDefaultStatement = exportDefaultStatements[0];
+                // Use whichever export style is found
+                let exportValue;
+                if (moduleExportsAssignment) {
+                    exportValue = moduleExportsAssignment.right;
+                }
+                else if (exportDefaultStatement) {
+                    exportValue = exportDefaultStatement.expression;
+                }
+                if (exportValue) {
+                    let svgrCallStr = '';
+                    if (config.svgrOptions === true || config.svgrOptions === undefined) {
+                        svgrCallStr = 'withSvgr()';
+                    }
+                    else if (typeof config.svgrOptions === 'object') {
+                        const options = Object.entries(config.svgrOptions)
+                            .map(([key, value]) => `  ${key}: ${value}`)
+                            .join(',\n');
+                        svgrCallStr = `withSvgr({\n${options}\n})`;
+                    }
+                    changes.push({
+                        type: devkit_1.ChangeType.Insert,
+                        index: exportValue.getStart(),
+                        text: `${svgrCallStr}(`,
+                    });
+                    changes.push({
+                        type: devkit_1.ChangeType.Insert,
+                        index: exportValue.getEnd(),
+                        text: ')',
+                    });
+                }
+            }
+        }
+        content = (0, devkit_1.applyChangesToString)(content, changes);
+        tree.write(webpackConfigPath, content);
+    }
+    await (0, devkit_1.formatFiles)(tree);
+    // Add file-loader as a dev dependency since it's now required for SVGR
+    return (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
+        'file-loader': '^6.2.0',
+    });
+}

package/src/migrations/update-19-6-0/turn-off-dts-by-default.d.ts

@@ -1,3 +0,0 @@
-import { type Tree } from '@nx/devkit';
-export default function (tree: Tree): Promise<void>;
-//# sourceMappingURL=turn-off-dts-by-default.d.ts.map

package/src/migrations/update-19-6-0/turn-off-dts-by-default.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"turn-off-dts-by-default.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/migrations/update-19-6-0/turn-off-dts-by-default.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,EAAqC,MAAM,YAAY,CAAC;AAK1E,yBAA+B,IAAI,EAAE,IAAI,iBA+ExC"}

package/src/migrations/update-19-6-0/turn-off-dts-by-default.js

@@ -1,56 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = default_1;
-const devkit_1 = require("@nx/devkit");
-const minimatch_1 = require("minimatch");
-const tsquery_1 = require("@phenomnomnominal/tsquery");
-async function default_1(tree) {
-    (0, devkit_1.visitNotIgnoredFiles)(tree, '', (path) => {
-        const webpackConfigGlob = '**/webpack*.config*.{js,ts,mjs,cjs}';
-        const result = (0, minimatch_1.minimatch)(path, webpackConfigGlob);
-        if (!result) {
-            return;
-        }
-        let webpackConfigContents = tree.read(path, 'utf-8');
-        if (!/withModuleFederationSSR|withModuleFederation/.test(webpackConfigContents)) {
-            return;
-        }
-        const WITH_MODULE_FEDERATION_SELECTOR = 'CallExpression:has(Identifier[name=composePlugins]) > CallExpression:has(Identifier[name=withModuleFederation]),CallExpression:has(Identifier[name=composePlugins]) > CallExpression:has(Identifier[name=withModuleFederationForSSR])';
-        const EXISTING_MF_OVERRIDES_SELECTOR = 'ObjectLiteralExpression';
-        const ast = tsquery_1.tsquery.ast(webpackConfigContents);
-        const withModuleFederationNodes = (0, tsquery_1.tsquery)(ast, WITH_MODULE_FEDERATION_SELECTOR, { visitAllChildren: true });
-        if (!withModuleFederationNodes.length) {
-            return;
-        }
-        const withModuleFederationNode = withModuleFederationNodes[0];
-        const existingOverridesNodes = (0, tsquery_1.tsquery)(withModuleFederationNode, EXISTING_MF_OVERRIDES_SELECTOR, { visitAllChildren: true });
-        if (!existingOverridesNodes.length) {
-            // doesn't exist, add it
-            webpackConfigContents = `${webpackConfigContents.slice(0, withModuleFederationNode.getEnd() - 1)},${JSON.stringify({ dts: false })}${webpackConfigContents.slice(withModuleFederationNode.getEnd() - 1)}`;
-        }
-        else {
-            let existingOverrideNode;
-            for (const node of existingOverridesNodes) {
-                if (!existingOverrideNode) {
-                    existingOverrideNode = node;
-                }
-                if (existingOverrideNode.getText().includes(node.getText())) {
-                    continue;
-                }
-                existingOverrideNode = node;
-            }
-            const DTS_PROPERTY_SELECTOR = 'PropertyAssignment > Identifier[name=dts]';
-            const dtsPropertyNode = (0, tsquery_1.tsquery)(existingOverrideNode, DTS_PROPERTY_SELECTOR);
-            if (dtsPropertyNode.length) {
-                // dts already exists, do nothing
-                return;
-            }
-            const newOverrides = `{ dts: false, ${existingOverrideNode
-                .getText()
-                .slice(1)}`;
-            webpackConfigContents = `${webpackConfigContents.slice(0, existingOverrideNode.getStart())}${newOverrides}${webpackConfigContents.slice(existingOverrideNode.getEnd())}`;
-        }
-        tree.write(path, webpackConfigContents);
-    });
-    await (0, devkit_1.formatFiles)(tree);
-}

package/src/migrations/update-19-6-0/update-ssr-server-port.d.ts

@@ -1,3 +0,0 @@
-import { type Tree } from '@nx/devkit';
-export default function update(tree: Tree): void;
-//# sourceMappingURL=update-ssr-server-port.d.ts.map

package/src/migrations/update-19-6-0/update-ssr-server-port.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"update-ssr-server-port.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/migrations/update-19-6-0/update-ssr-server-port.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,IAAI,EAIV,MAAM,YAAY,CAAC;AAOpB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,IAAI,EAAE,IAAI,QAqCxC"}

package/src/migrations/update-19-6-0/update-ssr-server-port.js

@@ -1,74 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = update;
-const devkit_1 = require("@nx/devkit");
-const tsquery_1 = require("@phenomnomnominal/tsquery");
-const ts = require("typescript");
-const minimatch_1 = require("minimatch");
-const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
-function update(tree) {
-    const projects = (0, devkit_1.getProjects)(tree);
-    const executors = [
-        '@nx/webpack:ssr-dev-server',
-        '@nx/react:module-federation-ssr-dev-server',
-    ];
-    executors.forEach((executor) => {
-        (0, executor_options_utils_1.forEachExecutorOptions)(tree, executor, (options, projectName) => {
-            const project = projects.get(projectName);
-            if (isModuleFederationSSRProject(tree, project)) {
-                const port = options.port;
-                if (tree.exists((0, devkit_1.joinPathFragments)(project.root, 'server.ts'))) {
-                    const serverContent = tree.read((0, devkit_1.joinPathFragments)(project.root, 'server.ts'), 'utf-8');
-                    if (serverContent && port) {
-                        const updatedServerContent = updateServerPort(serverContent, port);
-                        if (updatedServerContent) {
-                            tree.write((0, devkit_1.joinPathFragments)(project.root, 'server.ts'), updatedServerContent);
-                        }
-                    }
-                }
-            }
-        });
-    });
-}
-function updateServerPort(serverContent, port) {
-    const sourceFile = tsquery_1.tsquery.ast(serverContent);
-    const serverPortNode = (0, tsquery_1.tsquery)(sourceFile, `VariableDeclaration:has(Identifier[name="port"])`)[0];
-    if (serverPortNode) {
-        const binaryExpression = (0, tsquery_1.tsquery)(serverPortNode, 'BinaryExpression')[0];
-        if (binaryExpression) {
-            const leftExpression = (0, tsquery_1.tsquery)(binaryExpression, 'PropertyAccessExpression:has(Identifier[name="env"])')[0];
-            const rightExpression = (0, tsquery_1.tsquery)(binaryExpression, 'NumericLiteral[text="4200"]')[0];
-            if (leftExpression && rightExpression) {
-                const serverPortDeclaration = serverPortNode;
-                const newInitializer = ts.factory.createBinaryExpression(
-                // process.env.PORT
-                ts.factory.createPropertyAccessExpression(ts.factory.createPropertyAccessExpression(ts.factory.createIdentifier('process'), ts.factory.createIdentifier('env')), 'PORT'), 
-                // ||
-                ts.SyntaxKind.BarBarToken, 
-                // port value
-                ts.factory.createNumericLiteral(port.toString()));
-                const updatePortDeclaration = ts.factory.updateVariableDeclaration(serverPortDeclaration, serverPortDeclaration.name, serverPortDeclaration.exclamationToken, serverPortDeclaration.type, newInitializer);
-                const updatedStatements = sourceFile.statements.map((statement) => {
-                    if (ts.isVariableStatement(statement)) {
-                        const updatedDeclarationList = statement.declarationList.declarations.map((decl) => decl === serverPortDeclaration ? updatePortDeclaration : decl);
-                        const updatedDeclList = ts.factory.updateVariableDeclarationList(statement.declarationList, updatedDeclarationList);
-                        return ts.factory.updateVariableStatement(statement, statement.modifiers, updatedDeclList);
-                    }
-                    return statement;
-                });
-                const updatedSourceFile = ts.factory.updateSourceFile(sourceFile, updatedStatements);
-                const printer = ts.createPrinter();
-                return printer.printNode(ts.EmitHint.Unspecified, updatedSourceFile, sourceFile);
-            }
-        }
-    }
-}
-function isModuleFederationSSRProject(tree, project) {
-    let hasMfeServerConfig = false;
-    (0, devkit_1.visitNotIgnoredFiles)(tree, project.root, (filePath) => {
-        if ((0, minimatch_1.minimatch)(filePath, '**/module-federation*.server.config.*')) {
-            hasMfeServerConfig = true;
-        }
-    });
-    return hasMfeServerConfig;
-}

package/src/migrations/update-19-6-1/ensure-depends-on-for-mf.d.ts

@@ -1,3 +0,0 @@
-import { type Tree } from '@nx/devkit';
-export default function (tree: Tree): Promise<void>;
-//# sourceMappingURL=ensure-depends-on-for-mf.d.ts.map

package/src/migrations/update-19-6-1/ensure-depends-on-for-mf.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ensure-depends-on-for-mf.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/migrations/update-19-6-1/ensure-depends-on-for-mf.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,IAAI,EAAgB,MAAM,YAAY,CAAC;AAI9E,yBAA+B,IAAI,EAAE,IAAI,iBA2DxC"}

package/src/migrations/update-19-6-1/ensure-depends-on-for-mf.js

@@ -1,46 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = default_1;
-const devkit_1 = require("@nx/devkit");
-const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
-async function default_1(tree) {
-    let usesModuleFederation = false;
-    (0, executor_options_utils_1.forEachExecutorOptions)(tree, '@nx/webpack:webpack', (options, projectName, targetName) => {
-        const webpackConfig = options.webpackConfig;
-        if (!webpackConfig || webpackConfig === '@nx/react/plugins/webpack') {
-            return;
-        }
-        const webpackContents = tree.read(webpackConfig, 'utf-8');
-        if (['withModuleFederation', 'withModuleFederationForSSR'].some((p) => webpackContents.includes(p))) {
-            usesModuleFederation = true;
-        }
-    });
-    if (!usesModuleFederation) {
-        return;
-    }
-    const nxJson = (0, devkit_1.readNxJson)(tree);
-    const nxMFDevRemotesEnvVar = 'NX_MF_DEV_REMOTES';
-    if (!nxJson.targetDefaults ||
-        !nxJson.targetDefaults?.['@nx/webpack:webpack']) {
-        nxJson.targetDefaults ??= {};
-        nxJson.targetDefaults['@nx/webpack:webpack'] = {
-            cache: true,
-            inputs: ['production', '^production', { env: nxMFDevRemotesEnvVar }],
-            dependsOn: ['^build'],
-        };
-    }
-    else {
-        nxJson.targetDefaults['@nx/webpack:webpack'].dependsOn ??= [];
-        if (!nxJson.targetDefaults['@nx/webpack:webpack'].dependsOn.includes('^build')) {
-            nxJson.targetDefaults['@nx/webpack:webpack'].dependsOn.push('^build');
-        }
-        nxJson.targetDefaults['@nx/webpack:webpack'].inputs ??= [];
-        if (!nxJson.targetDefaults['@nx/webpack:webpack'].inputs.find((i) => typeof i === 'string' ? false : i['env'] === nxMFDevRemotesEnvVar)) {
-            nxJson.targetDefaults['@nx/webpack:webpack'].inputs.push({
-                env: nxMFDevRemotesEnvVar,
-            });
-        }
-    }
-    (0, devkit_1.updateNxJson)(tree, nxJson);
-    await (0, devkit_1.formatFiles)(tree);
-}