@nx/react 19.5.1 → 19.5.3

package/mf/dynamic-federation.d.ts

@@ -1,4 +1,5 @@
 export type ResolveRemoteUrlFunction = (remoteName: string) => string | Promise<string>;
 export declare function setRemoteUrlResolver(_resolveRemoteUrl: ResolveRemoteUrlFunction): void;
 export declare function setRemoteDefinitions(definitions: Record<string, string>): void;
+export declare function setRemoteDefinition(remoteName: string, remoteUrl: string): void;
 export declare function loadRemoteModule(remoteName: string, moduleName: string): Promise<any>;

package/mf/dynamic-federation.js

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setRemoteUrlResolver = setRemoteUrlResolver;
 exports.setRemoteDefinitions = setRemoteDefinitions;
+exports.setRemoteDefinition = setRemoteDefinition;
 exports.loadRemoteModule = loadRemoteModule;
-let remoteUrlDefinitions;
+let remoteUrlDefinitions = {};
 let resolveRemoteUrl;
 const remoteModuleMap = new Map();
 const remoteContainerMap = new Map();
@@ -14,6 +15,9 @@ function setRemoteUrlResolver(_resolveRemoteUrl) {
 function setRemoteDefinitions(definitions) {
     remoteUrlDefinitions = definitions;
 }
+function setRemoteDefinition(remoteName, remoteUrl) {
+    remoteUrlDefinitions[remoteName] = remoteUrl;
+}
 async function loadRemoteModule(remoteName, moduleName) {
     const remoteModuleKey = `${remoteName}:${moduleName}`;
     if (remoteModuleMap.has(remoteModuleKey)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "19.5.1",
+  "version": "19.5.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": {
@@ -39,11 +39,11 @@
     "minimatch": "9.0.3",
     "tslib": "^2.3.0",
     "@module-federation/enhanced": "~0.2.3",
-    "@nx/devkit": "19.5.1",
-    "@nx/js": "19.5.1",
-    "@nx/eslint": "19.5.1",
-    "@nx/web": "19.5.1",
-    "@nrwl/react": "19.5.1"
+    "@nx/devkit": "19.5.3",
+    "@nx/js": "19.5.3",
+    "@nx/eslint": "19.5.3",
+    "@nx/web": "19.5.3",
+    "@nrwl/react": "19.5.3"
   },
   "publishConfig": {
     "access": "public"

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.d.ts

@@ -12,16 +12,6 @@ type ModuleFederationDevServerOptions = WebDevServerOptions & {
     staticRemotesPort?: number;
     pathToManifestFile?: string;
 };
-type StaticRemoteConfig = {
-    basePath: string;
-    outputPath: string;
-    urlSegment: string;
-};
-type StaticRemotesConfig = {
-    remotes: string[];
-    config: Record<string, StaticRemoteConfig> | undefined;
-};
-export declare function parseStaticRemotesConfig(staticRemotes: string[] | undefined, context: ExecutorContext): StaticRemotesConfig;
 export default function moduleFederationDevServer(options: ModuleFederationDevServerOptions, context: ExecutorContext): AsyncIterableIterator<{
     success: boolean;
     baseUrl?: string;

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseStaticRemotesConfig = parseStaticRemotesConfig;
 exports.default = moduleFederationDevServer;
 const devkit_1 = require("@nx/devkit");
 const dev_server_impl_1 = require("@nx/webpack/src/executors/dev-server/dev-server.impl");
@@ -14,6 +13,8 @@ const node_path_1 = require("node:path");
 const node_fs_1 = require("node:fs");
 const fs_1 = require("fs");
 const path_1 = require("path");
+const start_remote_proxies_1 = require("@nx/webpack/src/utils/module-federation/start-remote-proxies");
+const parse_static_remotes_config_1 = require("@nx/webpack/src/utils/module-federation/parse-static-remotes-config");
 function getBuildOptions(buildTarget, context) {
     const target = (0, devkit_1.parseTargetString)(buildTarget, context);
     const buildOptions = (0, devkit_1.readTargetOptions)(target, context);
@@ -22,6 +23,10 @@ function getBuildOptions(buildTarget, context) {
     };
 }
 function startStaticRemotesFileServer(staticRemotesConfig, context, options) {
+    if (!staticRemotesConfig.remotes ||
+        staticRemotesConfig.remotes.length === 0) {
+        return;
+    }
     let shouldMoveToCommonLocation = false;
     let commonOutputDirectory;
     for (const app of staticRemotesConfig.remotes) {
@@ -56,6 +61,7 @@ function startStaticRemotesFileServer(staticRemotesConfig, context, options) {
         ssl: options.ssl,
         sslCert: options.sslCert,
         sslKey: options.sslKey,
+        cacheSeconds: -1,
     }, context);
     return staticRemotesIter;
 }
@@ -98,7 +104,7 @@ async function buildStaticRemotes(staticRemotesConfig, nxBin, context, options)
         mappedLocationOfRemotes[app] = `http${options.ssl ? 's' : ''}://${options.host}:${options.staticRemotesPort}/${staticRemotesConfig.config[app].urlSegment}`;
     }
     process.env.NX_MF_DEV_SERVER_STATIC_REMOTES = JSON.stringify(mappedLocationOfRemotes);
-    await new Promise((res) => {
+    await new Promise((res, rej) => {
         const staticProcess = (0, node_child_process_1.fork)(nxBin, [
             'run-many',
             `--target=build`,
@@ -118,6 +124,11 @@ async function buildStaticRemotes(staticRemotesConfig, nxBin, context, options)
             const ANSII_CODE_REGEX = /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g;
             const stdoutString = data.toString().replace(ANSII_CODE_REGEX, '');
             stdoutStream.write(stdoutString);
+            // in addition to writing into the stdout stream, also show error directly in console
+            // so the error is easily discoverable. 'ERROR in' is the key word to search in webpack output.
+            if (stdoutString.includes('ERROR in')) {
+                devkit_1.logger.log(stdoutString);
+            }
             if (stdoutString.includes('Successfully ran target build')) {
                 staticProcess.stdout.removeAllListeners('data');
                 devkit_1.logger.info(`NX Built ${staticRemotesConfig.remotes.length} static remotes`);
@@ -130,30 +141,18 @@ async function buildStaticRemotes(staticRemotesConfig, nxBin, context, options)
             staticProcess.stdout.removeAllListeners('data');
             staticProcess.stderr.removeAllListeners('data');
             if (code !== 0) {
-                throw new Error(`Remote failed to start. A complete log can be found in: ${remoteBuildLogFile}`);
+                rej(`Remote failed to start. A complete log can be found in: ${remoteBuildLogFile}`);
+            }
+            else {
+                res();
             }
-            res();
         });
         process.on('SIGTERM', () => staticProcess.kill('SIGTERM'));
         process.on('exit', () => staticProcess.kill('SIGTERM'));
     });
-}
-function parseStaticRemotesConfig(staticRemotes, context) {
-    if (!staticRemotes?.length) {
-        return { remotes: [], config: undefined };
-    }
-    const config = {};
-    for (const app of staticRemotes) {
-        const outputPath = context.projectGraph.nodes[app].data.targets['build'].options.outputPath;
-        const basePath = (0, node_path_1.dirname)(outputPath);
-        const urlSegment = (0, node_path_1.basename)(outputPath);
-        config[app] = { basePath, outputPath, urlSegment };
-    }
-    return { remotes: staticRemotes, config };
+    return mappedLocationOfRemotes;
 }
 async function* moduleFederationDevServer(options, context) {
-    const initialStaticRemotesPorts = options.staticRemotesPort;
-    options.staticRemotesPort ??= options.port + 1;
     // Force Node to resolve to look for the nx binary that is inside node_modules
     const nxBin = require.resolve('nx/bin/nx');
     const currIter = options.static
@@ -163,6 +162,7 @@ async function* moduleFederationDevServer(options, context) {
             withDeps: false,
             spa: false,
             cors: true,
+            cacheSeconds: -1,
         }, context)
         : (0, dev_server_impl_1.default)(options, context);
     const p = context.projectsConfigurations.projects[context.projectName];
@@ -188,29 +188,15 @@ async function* moduleFederationDevServer(options, context) {
         projectGraph: context.projectGraph,
         root: context.root,
     }, pathToManifestFile);
+    options.staticRemotesPort ??= remotes.staticRemotePort;
     // Set NX_MF_DEV_REMOTES for the Nx Runtime Library Control Plugin
     process.env.NX_MF_DEV_REMOTES = JSON.stringify(remotes.devRemotes.map((r) => (typeof r === 'string' ? r : r.remoteName)));
-    if (remotes.devRemotes.length > 0 && !initialStaticRemotesPorts) {
-        options.staticRemotesPort = options.devRemotes.reduce((portToUse, r) => {
-            const remoteName = typeof r === 'string' ? r : r.remoteName;
-            const remotePort = context.projectGraph.nodes[remoteName].data.targets['serve'].options
-                .port;
-            if (remotePort >= portToUse) {
-                return remotePort + 1;
-            }
-            else {
-                return portToUse;
-            }
-        }, options.staticRemotesPort);
-    }
-    const staticRemotesConfig = parseStaticRemotesConfig(remotes.staticRemotes, context);
-    await buildStaticRemotes(staticRemotesConfig, nxBin, context, options);
+    const staticRemotesConfig = (0, parse_static_remotes_config_1.parseStaticRemotesConfig)([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
+    const mappedLocationsOfStaticRemotes = await buildStaticRemotes(staticRemotesConfig, nxBin, context, options);
     const devRemoteIters = await startRemotes(remotes.devRemotes, context, options, 'serve');
-    const dynamicRemotesIters = await startRemotes(remotes.dynamicRemotes, context, options, 'serve-static');
-    const staticRemotesIter = remotes.staticRemotes.length > 0
-        ? startStaticRemotesFileServer(staticRemotesConfig, context, options)
-        : undefined;
-    return yield* (0, async_iterable_1.combineAsyncIterables)(currIter, ...devRemoteIters, ...dynamicRemotesIters, ...(staticRemotesIter ? [staticRemotesIter] : []), (0, async_iterable_1.createAsyncIterable)(async ({ next, done }) => {
+    const staticRemotesIter = startStaticRemotesFileServer(staticRemotesConfig, context, options);
+    (0, start_remote_proxies_1.startRemoteProxies)(staticRemotesConfig, mappedLocationsOfStaticRemotes);
+    return yield* (0, async_iterable_1.combineAsyncIterables)(currIter, ...devRemoteIters, ...(staticRemotesIter ? [staticRemotesIter] : []), (0, async_iterable_1.createAsyncIterable)(async ({ next, done }) => {
         if (!options.isInitialHost) {
             done();
             return;

package/src/generators/host/lib/add-module-federation-files.js

@@ -45,7 +45,11 @@ function addModuleFederationFiles(host, options, defaultRemoteManifest) {
         processWebpackConfig(options, host, 'webpack.config.prod.js');
         processWebpackConfig(options, host, 'webpack.config.prod.ts');
         if (!host.exists(pathToMFManifest)) {
-            host.write(pathToMFManifest, '{}');
+            host.write(pathToMFManifest, `{
+        ${defaultRemoteManifest
+                .map(({ name, port }) => `"${name}": "http://localhost:${port}"`)
+                .join(',\n')}
+          }`);
         }
     }
 }

package/src/generators/remote/lib/add-remote-to-dynamic-host.js

@@ -2,9 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addRemoteToDynamicHost = addRemoteToDynamicHost;
 function addRemoteToDynamicHost(tree, remoteName, remotePort, pathToMfManifest) {
-    const current = tree.read(pathToMfManifest, 'utf8');
-    tree.write(pathToMfManifest, JSON.stringify({
-        ...JSON.parse(current),
-        [remoteName]: `http://localhost:${remotePort}`,
-    }));
+    if (tree.exists(pathToMfManifest)) {
+        const current = tree.read(pathToMfManifest, 'utf8');
+        tree.write(pathToMfManifest, JSON.stringify({
+            ...JSON.parse(current),
+            [remoteName]: `http://localhost:${remotePort}`,
+        }));
+    }
 }

package/src/utils/versions.d.ts

@@ -36,7 +36,7 @@ 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.3.0";
+export declare const moduleFederationNodeVersion = "~2.4.0";
 export declare const moduleFederationEnhancedVersion = "~0.2.3";
 export declare const lessVersion = "3.12.2";
 export declare const sassVersion = "^1.55.0";

package/src/utils/versions.js

@@ -42,7 +42,7 @@ exports.typesExpressVersion = '4.17.17';
 exports.isbotVersion = '^3.6.5';
 exports.corsVersion = '~2.8.5';
 exports.typesCorsVersion = '~2.8.12';
-exports.moduleFederationNodeVersion = '^2.3.0';
+exports.moduleFederationNodeVersion = '~2.4.0';
 exports.moduleFederationEnhancedVersion = '~0.2.3';
 // style preprocessors
 exports.lessVersion = '3.12.2';