@nx/react 21.0.0-canary.20250429-cf4a1f3 → 21.0.0-canary.20250501-8f50358

package/index.d.ts

@@ -1,5 +1,5 @@
 import { NxReactWebpackPlugin as _NxReactWebpackPlugin } from './plugins/nx-react-webpack-plugin/nx-react-webpack-plugin';
-/** @deprecated Use '@nx/react/webpack-plugin' instead. */
+/** @deprecated Use '@nx/react/webpack-plugin' instead, which can improve graph creation by 150-200ms per file. */
 export declare const NxReactWebpackPlugin: typeof _NxReactWebpackPlugin;
 export { extraEslintDependencies, extendReactEslintJson, } from './src/utils/lint';
 export { cssInJsDependenciesBabel } from './src/utils/styled';

package/index.js

@@ -3,8 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupTailwindGenerator = exports.componentTestGenerator = exports.cypressComponentConfigGenerator = exports.remoteGenerator = exports.hostGenerator = exports.storybookConfigurationGenerator = exports.storiesGenerator = exports.reduxGenerator = exports.reactInitGenerator = exports.libraryGenerator = exports.componentStoryGenerator = exports.hookGenerator = exports.componentGenerator = exports.applicationGenerator = exports.reactVersion = exports.reactDomVersion = exports.assertValidStyle = exports.cssInJsDependenciesBabel = exports.extendReactEslintJson = exports.extraEslintDependencies = exports.NxReactWebpackPlugin = void 0;
 const tslib_1 = require("tslib");
 const nx_react_webpack_plugin_1 = require("./plugins/nx-react-webpack-plugin/nx-react-webpack-plugin");
-// TODO(v21): Remove this in favor of deep imports in order to load configs faster (150-200ms faster).
-/** @deprecated Use '@nx/react/webpack-plugin' instead. */
+/** @deprecated Use '@nx/react/webpack-plugin' instead, which can improve graph creation by 150-200ms per file. */
 exports.NxReactWebpackPlugin = nx_react_webpack_plugin_1.NxReactWebpackPlugin;
 var lint_1 = require("./src/utils/lint");
 Object.defineProperty(exports, "extraEslintDependencies", { enumerable: true, get: function () { return lint_1.extraEslintDependencies; } });

package/migrations.json

@@ -41,6 +41,12 @@
       "version": "20.4.0-beta.0",
       "description": "Add NX_MF_DEV_REMOTES to inputs for task hashing when '@nx/webpack:webpack' or '@nx/rspack:rspack' is used for Module Federation.",
       "factory": "./src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults"
+    },
+    "update-21-0-0-update-babel-loose": {
+      "cli": "nx",
+      "version": "21.0.0-beta.11",
+      "description": "Replaces `classProperties.loose` option with `loose`.",
+      "factory": "./src/migrations/update-21-0-0/update-babel-loose"
     }
   },
   "packageJsonUpdates": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "21.0.0-canary.20250429-cf4a1f3",
+  "version": "21.0.0-canary.20250501-8f50358",
   "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,11 +38,11 @@
     "minimatch": "9.0.3",
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
-    "@nx/devkit": "21.0.0-canary.20250429-cf4a1f3",
-    "@nx/js": "21.0.0-canary.20250429-cf4a1f3",
-    "@nx/eslint": "21.0.0-canary.20250429-cf4a1f3",
-    "@nx/web": "21.0.0-canary.20250429-cf4a1f3",
-    "@nx/module-federation": "21.0.0-canary.20250429-cf4a1f3",
+    "@nx/devkit": "21.0.0-canary.20250501-8f50358",
+    "@nx/js": "21.0.0-canary.20250501-8f50358",
+    "@nx/eslint": "21.0.0-canary.20250501-8f50358",
+    "@nx/web": "21.0.0-canary.20250501-8f50358",
+    "@nx/module-federation": "21.0.0-canary.20250501-8f50358",
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.3",
     "semver": "^7.6.3"

package/plugins/component-testing/index.js

@@ -167,7 +167,7 @@ function buildTargetWebpack(ctx, buildTarget, componentTestingProjectName) {
     }
     return async () => {
         customWebpack = await customWebpack;
-        // TODO(v21): Component testing need to be agnostic of the underlying executor. With Crystal, we're not using `@nx/webpack:webpack` by default.
+        // 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

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

@@ -13,26 +13,6 @@ function applyReactConfig(options, config = {}) {
             ref: true,
         };
         const svgrOptions = typeof options.svgr === 'object' ? options.svgr : defaultSvgrOptions;
-        // TODO(v21): Remove file-loader and use `?react` querystring to differentiate between asset and SVGR.
-        // It should be:
-        // use: [{
-        //   test: /\.svg$/i,
-        //   type: 'asset',
-        //   resourceQuery: /react/, // *.svg?react
-        // },
-        // {
-        //   test: /\.svg$/i,
-        //   issuer: /\.[jt]sx?$/,
-        //   resourceQuery: { not: [/react/] }, // exclude react component if *.svg?react
-        //   use: ['@svgr/webpack'],
-        // }],
-        // See:
-        // - SVGR: https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project
-        // - Vite: https://www.npmjs.com/package/vite-plugin-svgr
-        // - Rsbuild: https://github.com/web-infra-dev/rsbuild/pull/1783
-        // Note: We also need a migration for any projects that are using SVGR to convert
-        //       `import { ReactComponent as X } from './x.svg` to
-        //       `import X from './x.svg?react';
         config.module.rules.push({
             test: /\.svg$/,
             issuer: /\.(js|ts|md)x?$/,

package/plugins/with-react.d.ts

@@ -6,6 +6,10 @@ export interface SvgrOptions {
     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;
 }
 /**

package/src/generators/application/lib/add-linting.js

@@ -12,7 +12,7 @@ const lint_1 = require("../../../utils/lint");
 const versions_1 = require("../../../utils/versions");
 async function addLinting(host, options) {
     const tasks = [];
-    if (options.linter === eslint_1.Linter.EsLint) {
+    if (options.linter === 'eslint') {
         const lintTask = await (0, eslint_1.lintProjectGenerator)(host, {
             linter: options.linter,
             project: options.projectName,

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

@@ -8,7 +8,7 @@ const lint_1 = require("../../../utils/lint");
 const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
 const flat_config_1 = require("@nx/eslint/src/utils/flat-config");
 async function addLinting(host, options) {
-    if (options.linter === eslint_1.Linter.EsLint) {
+    if (options.linter === 'eslint') {
         const tasks = [];
         const lintTask = await (0, eslint_1.lintProjectGenerator)(host, {
             linter: options.linter,

package/src/migrations/update-21-0-0/update-babel-loose.d.ts

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

package/src/migrations/update-21-0-0/update-babel-loose.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = updateBabelLoose;
+const devkit_1 = require("@nx/devkit");
+async function updateBabelLoose(tree) {
+    (0, devkit_1.visitNotIgnoredFiles)(tree, '', (path) => {
+        if (!path.endsWith('.babelrc'))
+            return;
+        try {
+            (0, devkit_1.updateJson)(tree, path, (babelConfig) => {
+                if (!Array.isArray(babelConfig.presets))
+                    return babelConfig;
+                const ourPreset = babelConfig.presets.find((p) => Array.isArray(p) && p[0] === '@nx/react/babel');
+                if (!ourPreset || !ourPreset[1])
+                    return babelConfig;
+                const options = ourPreset[1];
+                if (options['classProperties']?.loose !== undefined) {
+                    options.loose = options['classProperties'].loose;
+                    delete options['classProperties'];
+                }
+                return babelConfig;
+            });
+        }
+        catch {
+            // Skip if JSON does not parse for whatever reason
+            return;
+        }
+    });
+    await (0, devkit_1.formatFiles)(tree);
+}

package/src/utils/testing-generators.js

@@ -4,11 +4,10 @@ exports.createApp = createApp;
 exports.createLib = createLib;
 const devkit_1 = require("@nx/devkit");
 const application_1 = require("../generators/application/application");
-const eslint_1 = require("@nx/eslint");
 async function createApp(tree, appName) {
     await (0, application_1.default)(tree, {
         e2eTestRunner: 'none',
-        linter: eslint_1.Linter.EsLint,
+        linter: 'eslint',
         skipFormat: true,
         style: 'css',
         unitTestRunner: 'none',