@nx/react 21.7.0-canary.20250929-405d91d → 22.0.0-beta.0

package/migrations.json

@@ -47,12 +47,6 @@
       "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.7.0-canary.20250929-405d91d",
+  "version": "22.0.0-beta.0",
   "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.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",
+    "@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",
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.5",
     "semver": "^7.6.3"
   },
   "devDependencies": {
-    "nx": "21.7.0-canary.20250929-405d91d"
+    "nx": "22.0.0-beta.0"
   },
   "publishConfig": {
     "access": "public"

package/plugins/bundle-rollup.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-// TODO(v22): Remove this in Nx 22 and migrate to explicit rollup.config.cjs files.
 /**
  * @deprecated Use `withNx` function from `@nx/rollup/with-nx` in your rollup.config.cjs file instead. Use `nx g @nx/rollup:convert-to-inferred` to generate the rollup.config.cjs file if it does not exist.
  */

package/plugins/component-testing/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/react/plugins/component-testing/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,oCAAoC,CAAC;AAsB5C,KAAK,aAAa,GAAG;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,GAAG,CAAC;CAClB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,GAAG,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,wBAAwB,CACtC,YAAY,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,yBAAyB,GAClC;IACD,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,aAAa,GAAG,gBAAgB,CAAC;IAC5C,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,OAAO,CAAC;CAC5B,CA+HA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/react/plugins/component-testing/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,oCAAoC,CAAC;AAsB5C,KAAK,aAAa,GAAG;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,GAAG,CAAC;CAClB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,GAAG,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,wBAAwB,CACtC,YAAY,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,yBAAyB,GAClC;IACD,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,aAAa,GAAG,gBAAgB,CAAC;IAC5C,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,OAAO,CAAC;CAC5B,CAkIA"}

package/plugins/component-testing/index.js

@@ -65,7 +65,7 @@ function nxComponentTestingPreset(pathToConfig, options) {
             },
         };
     }
-    let webpackConfig;
+    let webpackConfig = null;
     try {
         const graph = (0, devkit_1.readCachedProjectGraph)();
         const { targets: ctTargets, name: ctProjectName } = (0, ct_helpers_1.getProjectConfigByPath)(graph, pathToConfig);
@@ -93,6 +93,9 @@ function nxComponentTestingPreset(pathToConfig, options) {
         devkit_1.logger.warn((0, devkit_1.stripIndents) `Unable to build a webpack config with the project graph. 
       Falling back to default webpack config.`);
         devkit_1.logger.warn(e);
+    }
+    // Fallback config
+    if (!webpackConfig) {
         const { buildBaseWebpackConfig } = require('./webpack-fallback');
         webpackConfig = buildBaseWebpackConfig({
             tsConfigPath: findTsConfig(normalizedProjectRootPath),
@@ -170,32 +173,31 @@ function buildTargetWebpack(ctx, buildTarget, componentTestingProjectName) {
     }
     return async () => {
         customWebpack = await customWebpack;
-        // TODO(v22): Component testing need to be agnostic of the underlying executor. With Crystal, we're not using `@nx/webpack:webpack` by default.
-        // We need to decouple CT from the build target of the app, we just care about bundler config (e.g. webpack.config.js).
-        // The generated setup should support both Webpack and Vite as documented here: https://docs.cypress.io/guides/component-testing/react/overview
-        // Related issue: https://github.com/nrwl/nx/issues/21546
-        const configure = composePluginsSync(withNx(), withWeb());
-        const defaultWebpack = configure({}, {
-            options: {
-                ...options,
-                // cypress will generate its own index.html from component-index.html
-                generateIndexHtml: false,
-                // causes issues with buildable libraries with ENOENT: no such file or directory, scandir error
-                extractLicenses: false,
-                root: devkit_1.workspaceRoot,
-                projectRoot: ctProjectConfig.root,
-                sourceRoot: (0, ts_solution_setup_1.getProjectSourceRoot)(ctProjectConfig),
-            },
-            context,
-        });
-        if (customWebpack) {
-            return await customWebpack(defaultWebpack, {
-                options,
+        // For legacy `composePlugins(...)` setup, we need change some options to make Cypress CT work properly.
+        if (customWebpack &&
+            require('@nx/webpack').isNxWebpackComposablePlugin(customWebpack) // using inline since @nx/webpack may not be installed when using vite so top-level import would error
+        ) {
+            return await customWebpack({}, {
+                options: {
+                    ...options,
+                    // cypress will generate its own index.html from component-index.html
+                    generateIndexHtml: false,
+                    // causes issues with buildable libraries with ENOENT: no such file or directory, scandir error
+                    extractLicenses: false,
+                    root: devkit_1.workspaceRoot,
+                    projectRoot: ctProjectConfig.root,
+                    sourceRoot: (0, ts_solution_setup_1.getProjectSourceRoot)(ctProjectConfig),
+                },
                 context,
                 configuration: parsed.configuration,
             });
         }
-        return defaultWebpack;
+        else if (typeof customWebpack === 'object' ||
+            typeof customWebpack === 'function') {
+            // If this is a standard webpack config object or function, just return. it
+            return customWebpack;
+        }
+        return null; // return null to use fallback config
     };
 }
 function findViteConfig(projectRootFullPath) {

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

@@ -1,3 +1,6 @@
 import { Configuration, WebpackOptionsNormalized } from 'webpack';
-export declare function applyReactConfig(options?: Record<string, any>, config?: Partial<WebpackOptionsNormalized | Configuration>): void;
+import { SvgrOptions } from '../../with-react';
+export declare function applyReactConfig(options: {
+    svgr?: boolean | SvgrOptions;
+}, 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;AAElE,wBAAgB,gBAAgB,CAC9B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,EACjC,MAAM,GAAE,OAAO,CAAC,wBAAwB,GAAG,aAAa,CAAM,GAC7D,IAAI,CAUN"}
+{"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"}

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

@@ -1,10 +1,35 @@
 "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,
@@ -34,3 +59,13 @@ 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,7 +1,9 @@
 import { Compiler } from 'webpack';
 export declare class NxReactWebpackPlugin {
     private options;
-    constructor(options?: Record<string, any>);
+    constructor(options?: {
+        svgr?: boolean;
+    });
     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,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM;IAErD,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;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAO;IAEpD,KAAK,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI;CAGhC"}

package/plugins/with-react.d.ts

@@ -1,6 +1,16 @@
 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,gBAAiB,SAAQ,cAAc;CAAG;AAE3D;;;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,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"}

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)({}, config);
+        (0, apply_react_config_1.applyReactConfig)(pluginOptions, config);
         processed.add(config);
         return config;
     };

package/src/generators/application/files/base-webpack/webpack.config.js__tmpl__

@@ -6,6 +6,7 @@ const { join } = require('path');
 module.exports = {
   output: {
     path: join(__dirname, '<%= webpackPluginOptions.outputPath %>'),
+    clean: true,
   },
   devServer: {
     port: <%= port %>,
@@ -49,6 +50,7 @@ module.exports = composePlugins(
   (config) => {
     // Update the webpack config as needed here.
     // e.g. `config.plugins.push(new MyPlugin())`
+    config.output.clean = true;
     return config;
   }
 );

package/src/generators/library/lib/normalize-options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"normalize-options.d.ts","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/library/lib/normalize-options.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,IAAI,EACL,MAAM,YAAY,CAAC;AAMpB,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAOrD,wBAAsB,gBAAgB,CACpC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,MAAM,GACd,OAAO,CAAC,gBAAgB,CAAC,CAqG3B"}
+{"version":3,"file":"normalize-options.d.ts","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/library/lib/normalize-options.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,IAAI,EACL,MAAM,YAAY,CAAC;AAMpB,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAOrD,wBAAsB,gBAAgB,CACpC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,MAAM,GACd,OAAO,CAAC,gBAAgB,CAAC,CAmG3B"}

package/src/generators/library/lib/normalize-options.js

@@ -18,9 +18,7 @@ async function normalizeOptions(host, options) {
     const addPlugin = process.env.NX_ADD_PLUGINS !== 'false' &&
         nxJson.useInferencePlugins !== false;
     options.addPlugin ??= addPlugin;
-    const fileName = options.simpleName
-        ? projectNames.projectSimpleName
-        : projectNames.projectFileName;
+    const fileName = projectNames.projectFileName;
     const parsedTags = options.tags
         ? options.tags.split(',').map((s) => s.trim())
         : [];

package/src/generators/library/library.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"library.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/library/library.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EAOjB,IAAI,EAGL,MAAM,YAAY,CAAC;AAiCpB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,wBAAsB,gBAAgB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,8BAMhE;AAED,wBAAsB,wBAAwB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,8BA6RxE;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"library.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/library/library.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EAOjB,IAAI,EAGL,MAAM,YAAY,CAAC;AAiCpB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,wBAAsB,gBAAgB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,8BAMhE;AAED,wBAAsB,wBAAwB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,8BAsRxE;AAED,eAAe,gBAAgB,CAAC"}

package/src/generators/library/library.js

@@ -47,10 +47,6 @@ async function libraryGeneratorInternal(host, schema) {
         !schema.importPath) {
         throw new Error(`For publishable libs you have to provide a proper "--importPath" which needs to be a valid npm package name (e.g. my-awesome-lib or @myorg/my-lib)`);
     }
-    if (schema.simpleName !== undefined && schema.simpleName !== false) {
-        // TODO(v22): Remove simpleName as user should be using name.
-        devkit_1.logger.warn(`The "--simpleName" option is deprecated and will be removed in Nx 22. Please use the "--name" option to provide the exact name you want for the library.`);
-    }
     if (!options.component) {
         options.style = 'none';
     }

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

@@ -25,7 +25,6 @@ export interface Schema {
   tags?: string;
   unitTestRunner?: 'jest' | 'vitest' | 'none';
   minimal?: boolean;
-  simpleName?: boolean;
   addPlugin?: boolean;
   useProjectJson?: boolean;
 }

package/src/generators/library/schema.json

@@ -186,12 +186,6 @@
       "type": "boolean",
       "default": false
     },
-    "simpleName": {
-      "description": "Don't include the directory in the name of the module of the library.",
-      "type": "boolean",
-      "default": false,
-      "x-deprecated": "Use the --name option to provide the exact name instead. This option will be removed in Nx 22."
-    },
     "useProjectJson": {
       "type": "boolean",
       "description": "Use a `project.json` configuration file instead of inlining the Nx configuration in the `package.json` file."

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

@@ -1,3 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,403 +0,0 @@
-"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',
-    });
-}