@nx/react 20.3.1 → 20.3.3

package/LICENSE

@@ -1,6 +1,6 @@
 (The MIT License)
 
-Copyright (c) 2017-2024 Narwhal Technologies Inc.
+Copyright (c) 2017-2025 Narwhal Technologies Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

package/migrations.json

@@ -47,6 +47,12 @@
       "version": "20.3.0-beta.2",
       "description": "If workspace includes Module Federation projects, ensure the new @nx/module-federation package is installed.",
       "factory": "./src/migrations/update-20-3-0/ensure-nx-module-federation-package"
+    },
+    "add-mf-env-var-to-target-defaults": {
+      "cli": "nx",
+      "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"
     }
   },
   "packageJsonUpdates": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "20.3.1",
+  "version": "20.3.3",
   "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": "20.3.1",
-    "@nx/js": "20.3.1",
-    "@nx/eslint": "20.3.1",
-    "@nx/web": "20.3.1",
-    "@nx/module-federation": "20.3.1",
+    "@nx/devkit": "20.3.3",
+    "@nx/js": "20.3.3",
+    "@nx/eslint": "20.3.3",
+    "@nx/web": "20.3.3",
+    "@nx/module-federation": "20.3.3",
     "express": "^4.19.2",
     "http-proxy-middleware": "^3.0.3"
   },

package/plugins/jest.js

@@ -16,17 +16,12 @@ module.exports = {
       module.exports = {
         __esModule: true,
         default: ${assetFilename},
-        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
-          return {
-            $$typeof: Symbol.for('react.element'),
-            type: 'svg',
-            ref: ref,
-            key: null,
-            props: Object.assign({}, props, {
-              children: ${assetFilename}
-            })
-          };
-        }),
+        ReactComponent: function ${componentName}(props) {
+          return React.createElement(
+            'svg',
+            Object.assign({}, props, { children: ${assetFilename} })
+          );
+        },
       };`,
             };
         }

package/src/generators/application/application.js

@@ -25,6 +25,7 @@ const add_webpack_1 = require("./lib/bundlers/add-webpack");
 const add_rspack_1 = require("./lib/bundlers/add-rspack");
 const add_rsbuild_1 = require("./lib/bundlers/add-rsbuild");
 const add_vite_1 = require("./lib/bundlers/add-vite");
+const sort_fields_1 = require("@nx/js/src/utils/package-json/sort-fields");
 async function applicationGenerator(tree, schema) {
     return await applicationGeneratorInternal(tree, {
         addPlugin: false,
@@ -130,6 +131,7 @@ async function applicationGeneratorInternal(tree, schema) {
     if (options.isUsingTsSolutionConfig) {
         (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(tree, options.appProjectRoot);
     }
+    (0, sort_fields_1.sortPackageJsonFields)(tree, options.appProjectRoot);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }

package/src/generators/application/lib/get-app-tests.js

@@ -13,7 +13,7 @@ function getAppTests(options) {
     ${options.routing
         ? 'const { getByText } = render(<BrowserRouter><App /></BrowserRouter>);'
         : 'const { getByText } = render(<App />);'}
-    expect(getByText(/Welcome ${options.projectName}/gi)).toBeTruthy();
+    expect(getByText(new RegExp('Welcome ${options.projectName}', 'gi'))).toBeTruthy();
   });
 `;
 }

package/src/generators/host/host.js

@@ -104,7 +104,7 @@ async function hostGenerator(host, schema) {
     if (!options.setParserOptionsProject) {
         host.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.lint.json'));
     }
-    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(host);
+    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(host, options.bundler);
     const installTask = (0, devkit_1.addDependenciesToPackageJson)(host, { '@module-federation/enhanced': versions_1.moduleFederationEnhancedVersion }, {
         '@nx/web': versions_1.nxVersion,
         '@nx/module-federation': versions_1.nxVersion,

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

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

package/src/generators/library/lib/determine-entry-fields.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.determineEntryFields = determineEntryFields;
+function determineEntryFields(options) {
+    if (options.bundler !== 'none') {
+        return {};
+    }
+    return {
+        main: options.js ? './src/index.js' : './src/index.ts',
+        types: options.js ? './src/index.js' : './src/index.ts',
+        exports: {
+            '.': options.js
+                ? './src/index.js'
+                : {
+                    types: './src/index.ts',
+                    import: './src/index.ts',
+                    default: './src/index.ts',
+                },
+            './package.json': './package.json',
+        },
+    };
+}

package/src/generators/library/library.js

@@ -21,6 +21,8 @@ const create_ts_config_1 = require("../../utils/create-ts-config");
 const install_common_dependencies_1 = require("./lib/install-common-dependencies");
 const set_defaults_1 = require("./lib/set-defaults");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
+const determine_entry_fields_1 = require("./lib/determine-entry-fields");
+const sort_fields_1 = require("@nx/js/src/utils/package-json/sort-fields");
 async function libraryGenerator(host, schema) {
     return await libraryGeneratorInternal(host, {
         addPlugin: false,
@@ -47,16 +49,10 @@ async function libraryGeneratorInternal(host, schema) {
     });
     tasks.push(initTask);
     if (options.isUsingTsSolutionConfig) {
-        const sourceEntry = options.bundler === 'none'
-            ? options.js
-                ? './src/index.js'
-                : './src/index.ts'
-            : undefined;
         (0, devkit_1.writeJson)(host, `${options.projectRoot}/package.json`, {
             name: options.importPath,
             version: '0.0.1',
-            main: sourceEntry,
-            types: sourceEntry,
+            ...(0, determine_entry_fields_1.determineEntryFields)(options),
             nx: {
                 name: options.importPath === options.name ? undefined : options.name,
                 projectType: 'library',
@@ -214,6 +210,7 @@ async function libraryGeneratorInternal(host, schema) {
     if (options.isUsingTsSolutionConfig) {
         (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(host, options.projectRoot);
     }
+    (0, sort_fields_1.sortPackageJsonFields)(host, options.projectRoot);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }

package/src/generators/remote/remote.js

@@ -122,7 +122,7 @@ async function remoteGenerator(host, schema) {
         const pathToMFManifest = (0, devkit_1.joinPathFragments)(hostConfig.sourceRoot, 'assets/module-federation.manifest.json');
         (0, add_remote_to_dynamic_host_1.addRemoteToDynamicHost)(host, options.projectName, options.devServerPort, pathToMFManifest);
     }
-    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(host);
+    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(host, options.bundler);
     const installTask = (0, devkit_1.addDependenciesToPackageJson)(host, {}, {
         '@module-federation/enhanced': versions_1.moduleFederationEnhancedVersion,
         '@nx/web': versions_1.nxVersion,

package/src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults.js

@@ -4,10 +4,11 @@ exports.default = default_1;
 const devkit_1 = require("@nx/devkit");
 const add_mf_env_to_inputs_1 = require("../../utils/add-mf-env-to-inputs");
 async function default_1(tree) {
-    if (!hasModuleFederationProject(tree)) {
+    const bundler = hasModuleFederationProject(tree);
+    if (!bundler) {
         return;
     }
-    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(tree);
+    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(tree, bundler);
     await (0, devkit_1.formatFiles)(tree);
 }
 function hasModuleFederationProject(tree) {
@@ -15,10 +16,14 @@ function hasModuleFederationProject(tree) {
     for (const project of projects.values()) {
         const targets = project.targets || {};
         for (const [_, target] of Object.entries(targets)) {
-            if (target.executor === '@nx/webpack:webpack' &&
-                (tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.ts')) ||
-                    tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.js')))) {
-                return true;
+            if (tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.ts')) ||
+                tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.js'))) {
+                if (target.executor === '@nx/webpack:webpack') {
+                    return 'webpack';
+                }
+                else if (target.executor === '@nx/rspack:rspack') {
+                    return 'rspack';
+                }
             }
         }
     }

package/src/utils/add-mf-env-to-inputs.d.ts

@@ -1,2 +1,2 @@
 import { type Tree } from '@nx/devkit';
-export declare function addMfEnvToTargetDefaultInputs(tree: Tree): void;
+export declare function addMfEnvToTargetDefaultInputs(tree: Tree, bundler: 'rspack' | 'webpack'): void;

package/src/utils/add-mf-env-to-inputs.js

@@ -2,27 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addMfEnvToTargetDefaultInputs = addMfEnvToTargetDefaultInputs;
 const devkit_1 = require("@nx/devkit");
-function addMfEnvToTargetDefaultInputs(tree) {
+function addMfEnvToTargetDefaultInputs(tree, bundler) {
     const nxJson = (0, devkit_1.readNxJson)(tree);
-    const webpackExecutor = '@nx/webpack:webpack';
+    const executor = bundler === 'rspack' ? '@nx/rspack:rspack' : '@nx/webpack:webpack';
     const mfEnvVar = 'NX_MF_DEV_REMOTES';
     nxJson.targetDefaults ??= {};
-    nxJson.targetDefaults[webpackExecutor] ??= {};
-    nxJson.targetDefaults[webpackExecutor].inputs ??= [
-        'production',
-        '^production',
-    ];
-    nxJson.targetDefaults[webpackExecutor].dependsOn ??= ['^build'];
+    nxJson.targetDefaults[executor] ??= {};
+    nxJson.targetDefaults[executor].inputs ??= ['production', '^production'];
+    nxJson.targetDefaults[executor].dependsOn ??= ['^build'];
     let mfEnvVarExists = false;
-    for (const input of nxJson.targetDefaults[webpackExecutor].inputs) {
+    for (const input of nxJson.targetDefaults[executor].inputs) {
         if (typeof input === 'object' && input['env'] === mfEnvVar) {
             mfEnvVarExists = true;
             break;
         }
     }
     if (!mfEnvVarExists) {
-        nxJson.targetDefaults[webpackExecutor].inputs.push({ env: mfEnvVar });
+        nxJson.targetDefaults[executor].inputs.push({ env: mfEnvVar });
     }
-    nxJson.targetDefaults[webpackExecutor].cache = true;
+    nxJson.targetDefaults[executor].cache = true;
     (0, devkit_1.updateNxJson)(tree, nxJson);
 }

package/src/utils/versions.d.ts

@@ -35,8 +35,8 @@ export declare const typesExpressVersion = "4.17.17";
 export declare const isbotVersion = "^3.6.5";
 export declare const corsVersion = "~2.8.5";
 export declare const typesCorsVersion = "~2.8.12";
-export declare const moduleFederationNodeVersion = "~2.6.11";
-export declare const moduleFederationEnhancedVersion = "0.7.6";
+export declare const moduleFederationNodeVersion = "^2.6.21";
+export declare const moduleFederationEnhancedVersion = "^0.8.8";
 export declare const lessVersion = "3.12.2";
 export declare const sassVersion = "^1.55.0";
 export declare const rollupPluginUrlVersion = "^8.0.2";

package/src/utils/versions.js

@@ -40,8 +40,8 @@ exports.typesExpressVersion = '4.17.17';
 exports.isbotVersion = '^3.6.5';
 exports.corsVersion = '~2.8.5';
 exports.typesCorsVersion = '~2.8.12';
-exports.moduleFederationNodeVersion = '~2.6.11';
-exports.moduleFederationEnhancedVersion = '0.7.6';
+exports.moduleFederationNodeVersion = '^2.6.21';
+exports.moduleFederationEnhancedVersion = '^0.8.8';
 // style preprocessors
 exports.lessVersion = '3.12.2';
 exports.sassVersion = '^1.55.0';