@nx/react 21.6.1-rc.0 → 21.7.0-canary.20250929-405d91d

package/migrations.json

@@ -47,6 +47,12 @@
       "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": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "21.6.1-rc.0",
+  "version": "21.7.0-canary.20250929-405d91d",
   "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": "21.6.1-rc.0",
-    "@nx/js": "21.6.1-rc.0",
-    "@nx/eslint": "21.6.1-rc.0",
-    "@nx/web": "21.6.1-rc.0",
-    "@nx/vite": "21.6.1-rc.0",
-    "@nx/module-federation": "21.6.1-rc.0",
-    "@nx/rollup": "21.6.1-rc.0",
+    "@nx/devkit": "21.7.0-canary.20250929-405d91d",
+    "@nx/js": "21.7.0-canary.20250929-405d91d",
+    "@nx/eslint": "21.7.0-canary.20250929-405d91d",
+    "@nx/web": "21.7.0-canary.20250929-405d91d",
+    "@nx/vite": "21.7.0-canary.20250929-405d91d",
+    "@nx/module-federation": "21.7.0-canary.20250929-405d91d",
+    "@nx/rollup": "21.7.0-canary.20250929-405d91d",
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.5",
     "semver": "^7.6.3"
   },
   "devDependencies": {
-    "nx": "21.6.1-rc.0"
+    "nx": "21.7.0-canary.20250929-405d91d"
   },
   "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',
+    });
+}