@nx/module-federation 20.7.2 → 20.8.0-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nx/module-federation",
   "description": "The Nx Plugin for Module Federation contains executors and utilities that support building applications using Module Federation.",
-  "version": "20.7.2",
+  "version": "20.8.0-beta.0",
   "type": "commonjs",
   "repository": {
     "type": "git",
@@ -25,9 +25,9 @@
   "executors": "./executors.json",
   "dependencies": {
     "tslib": "^2.3.0",
-    "@nx/devkit": "20.7.2",
-    "@nx/js": "20.7.2",
-    "@nx/web": "20.7.2",
+    "@nx/devkit": "20.8.0-beta.0",
+    "@nx/js": "20.8.0-beta.0",
+    "@nx/web": "20.8.0-beta.0",
     "picocolors": "^1.1.0",
     "webpack": "^5.88.0",
     "@rspack/core": "^1.1.5",

package/src/plugins/nx-module-federation-plugin/rspack/nx-module-federation-dev-server-plugin.d.ts

@@ -3,7 +3,6 @@ import { ModuleFederationConfig } from '../../../utils/models';
 import { NxModuleFederationDevServerConfig } from '../../models';
 export declare class NxModuleFederationDevServerPlugin implements RspackPluginInstance {
     private _options;
-    private devServerProcess;
     private nxBin;
     constructor(_options: {
         config: ModuleFederationConfig;

package/src/plugins/nx-module-federation-plugin/rspack/nx-module-federation-dev-server-plugin.js

@@ -17,22 +17,29 @@ class NxModuleFederationDevServerPlugin {
         };
     }
     apply(compiler) {
-        compiler.hooks.beforeCompile.tapAsync(PLUGIN_NAME, async (params, callback) => {
-            const staticRemotesConfig = await this.setup(compiler);
-            devkit_1.logger.info(`NX Starting module federation dev-server for ${pc.bold(this._options.config.name)} with ${Object.keys(staticRemotesConfig).length} remotes`);
-            const mappedLocationOfRemotes = await (0, utils_1.buildStaticRemotes)(staticRemotesConfig, this._options.devServerConfig, this.nxBin);
-            (0, utils_1.startStaticRemotesFileServer)(staticRemotesConfig, devkit_1.workspaceRoot, this._options.devServerConfig.staticRemotesPort);
-            (0, utils_1.startRemoteProxies)(staticRemotesConfig, mappedLocationOfRemotes, {
-                pathToCert: this._options.devServerConfig.sslCert,
-                pathToKey: this._options.devServerConfig.sslCert,
+        const isDevServer = process.env['WEBPACK_SERVE'];
+        if (!isDevServer) {
+            return;
+        }
+        compiler.hooks.watchRun.tapAsync(PLUGIN_NAME, async (compiler, callback) => {
+            compiler.hooks.beforeCompile.tapAsync(PLUGIN_NAME, async (params, callback) => {
+                const staticRemotesConfig = await this.setup();
+                devkit_1.logger.info(`NX Starting module federation dev-server for ${pc.bold(this._options.config.name)} with ${Object.keys(staticRemotesConfig).length} remotes`);
+                const mappedLocationOfRemotes = await (0, utils_1.buildStaticRemotes)(staticRemotesConfig, this._options.devServerConfig, this.nxBin);
+                (0, utils_1.startStaticRemotesFileServer)(staticRemotesConfig, devkit_1.workspaceRoot, this._options.devServerConfig.staticRemotesPort);
+                (0, utils_1.startRemoteProxies)(staticRemotesConfig, mappedLocationOfRemotes, {
+                    pathToCert: this._options.devServerConfig.sslCert,
+                    pathToKey: this._options.devServerConfig.sslCert,
+                });
+                new core_1.DefinePlugin({
+                    'process.env.NX_MF_DEV_REMOTES': process.env.NX_MF_DEV_REMOTES,
+                }).apply(compiler);
+                callback();
             });
-            new core_1.DefinePlugin({
-                'process.env.NX_MF_DEV_REMOTES': process.env.NX_MF_DEV_REMOTES,
-            }).apply(compiler);
             callback();
         });
     }
-    async setup(compiler) {
+    async setup() {
         const projectGraph = (0, devkit_1.readCachedProjectGraph)();
         const { projects: workspaceProjects } = (0, devkit_1.readProjectsConfigurationFromProjectGraph)(projectGraph);
         const project = workspaceProjects[this._options.config.name];

package/src/plugins/nx-module-federation-plugin/rspack/nx-module-federation-plugin.d.ts

@@ -1,12 +1,10 @@
 import { Compiler, RspackPluginInstance } from '@rspack/core';
 import { ModuleFederationConfig, NxModuleFederationConfigOverride } from '../../../utils/models';
-import { NxModuleFederationDevServerConfig } from '../../models';
 export declare class NxModuleFederationPlugin implements RspackPluginInstance {
     private _options;
     private configOverride?;
     constructor(_options: {
         config: ModuleFederationConfig;
-        devServerConfig?: NxModuleFederationDevServerConfig;
         isServer?: boolean;
     }, configOverride?: NxModuleFederationConfigOverride);
     apply(compiler: Compiler): void;

package/src/plugins/nx-module-federation-plugin/rspack/nx-module-federation-plugin.js

@@ -12,6 +12,7 @@ class NxModuleFederationPlugin {
             return;
         }
         // This is required to ensure Module Federation will build the project correctly
+        compiler.options.optimization ??= {};
         compiler.options.optimization.runtimeChunk = false;
         compiler.options.output.uniqueName = this._options.config.name;
         if (this._options.isServer) {

package/src/plugins/nx-module-federation-plugin/rspack/nx-module-federation-ssr-dev-server-plugin.js

@@ -18,6 +18,10 @@ class NxModuleFederationSSRDevServerPlugin {
         };
     }
     apply(compiler) {
+        const isDevServer = process.env['WEBPACK_SERVE'];
+        if (!isDevServer) {
+            return;
+        }
         compiler.hooks.watchRun.tapAsync(PLUGIN_NAME, async (compiler, callback) => {
             compiler.hooks.beforeCompile.tapAsync(PLUGIN_NAME, async (params, callback) => {
                 const staticRemotesConfig = await this.setup(compiler);
@@ -38,20 +42,20 @@ class NxModuleFederationSSRDevServerPlugin {
         });
     }
     async startServer(compiler) {
-        compiler.hooks.afterEmit.tapAsync(PLUGIN_NAME, async (_, callback) => {
+        compiler.hooks.done.tapAsync(PLUGIN_NAME, async (_, callback) => {
             const serverPath = (0, path_1.join)(compiler.options.output.path, compiler.options.output.filename ?? 'server.js');
             if (this.devServerProcess) {
                 await new Promise((res) => {
                     this.devServerProcess.on('exit', () => {
                         res();
                     });
-                    this.devServerProcess.kill();
+                    this.devServerProcess.kill('SIGKILL');
                     this.devServerProcess = undefined;
                 });
             }
             if (!(0, fs_1.existsSync)(serverPath)) {
                 for (let retries = 0; retries < 10; retries++) {
-                    await new Promise((res) => setTimeout(res, 100));
+                    await new Promise((res) => setTimeout(res, 200));
                     if ((0, fs_1.existsSync)(serverPath)) {
                         break;
                     }
@@ -62,10 +66,10 @@ class NxModuleFederationSSRDevServerPlugin {
             }
             this.devServerProcess = (0, node_child_process_1.fork)(serverPath);
             process.on('exit', () => {
-                this.devServerProcess?.kill();
+                this.devServerProcess?.kill('SIGKILL');
             });
             process.on('SIGINT', () => {
-                this.devServerProcess?.kill();
+                this.devServerProcess?.kill('SIGKILL');
             });
             callback();
         });

package/src/plugins/utils/parse-remotes-config.js

@@ -18,7 +18,7 @@ function parseRemotesConfig(remotes, workspaceRoot, projectGraph, isServer) {
             projectRoot,
             workspaceRoot,
         });
-        if (outputPath.startsWith(projectRoot)) {
+        if (!outputPath.startsWith(workspaceRoot)) {
             outputPath = (0, devkit_1.joinPathFragments)(workspaceRoot, outputPath);
         }
         const basePath = (0, path_1.dirname)(outputPath);

package/src/utils/get-remotes-for-host.js

@@ -35,7 +35,16 @@ function collectRemoteProjects(remote, collected, context) {
     }
     collected.add(remote);
     const remoteProjectRoot = remoteProject.root;
-    const remoteProjectTsConfig = remoteProject.targets['build'].options.tsConfig;
+    let remoteProjectTsConfig = remoteProject.targets['build'].options.tsConfig ??
+        [
+            (0, path_1.join)(remoteProjectRoot, 'tsconfig.app.json'),
+            (0, path_1.join)(remoteProjectRoot, 'tsconfig.json'),
+            (0, path_1.join)(context.root, 'tsconfig.json'),
+            (0, path_1.join)(context.root, 'tsconfig.base.json'),
+        ].find((p) => (0, fs_1.existsSync)(p));
+    if (!remoteProjectTsConfig) {
+        throw new Error(`Could not find a tsconfig for remote project ${remote}. Please add a tsconfig.app.json or tsconfig.json to the project.`);
+    }
     const remoteProjectConfig = getModuleFederationConfig(remoteProjectTsConfig, context.root, remoteProjectRoot);
     const { remotes: remoteProjectRemotes } = extractRemoteProjectsFromConfig(remoteProjectConfig);
     remoteProjectRemotes.forEach((r) => collectRemoteProjects(r, collected, context));

package/src/utils/parse-static-remotes-config.d.ts

@@ -1,4 +1,4 @@
-import type { ExecutorContext } from '@nx/devkit';
+import { ExecutorContext } from '@nx/devkit';
 export type StaticRemoteConfig = {
     basePath: string;
     outputPath: string;

package/src/utils/parse-static-remotes-config.js

@@ -2,14 +2,27 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseStaticRemotesConfig = parseStaticRemotesConfig;
 exports.parseStaticSsrRemotesConfig = parseStaticSsrRemotesConfig;
+const devkit_1 = require("@nx/devkit");
 const path_1 = require("path");
+const utils_1 = require("nx/src/tasks-runner/utils");
 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; // dist || dist/checkout
+        const projectGraph = context.projectGraph;
+        const projectRoot = projectGraph.nodes[app].data.root;
+        let outputPath = (0, utils_1.interpolate)(projectGraph.nodes[app].data.targets?.['build']?.options?.outputPath ??
+            projectGraph.nodes[app].data.targets?.['build']?.outputs?.[0] ??
+            `${context.root}/${projectGraph.nodes[app].data.root}/dist`, {
+            projectName: projectGraph.nodes[app].data.name,
+            projectRoot,
+            workspaceRoot: context.root,
+        });
+        if (outputPath.startsWith(projectRoot)) {
+            outputPath = (0, devkit_1.joinPathFragments)(context.root, outputPath);
+        }
         const basePath = ['', '/', '.'].some((p) => (0, path_1.dirname)(outputPath) === p)
             ? outputPath
             : (0, path_1.dirname)(outputPath); // dist || dist/checkout -> dist
@@ -25,9 +38,19 @@ function parseStaticSsrRemotesConfig(staticRemotes, context) {
     }
     const config = {};
     for (const app of staticRemotes) {
-        let outputPath = context.projectGraph.nodes[app].data.targets['build']
-            .options.outputPath;
-        outputPath = (0, path_1.dirname)(outputPath); // dist/browser => dist || dist/checkout/browser -> checkout
+        const projectGraph = context.projectGraph;
+        const projectRoot = projectGraph.nodes[app].data.root;
+        let outputPath = (0, utils_1.interpolate)(projectGraph.nodes[app].data.targets?.['build']?.options?.outputPath ??
+            projectGraph.nodes[app].data.targets?.['build']?.outputs?.[0] ??
+            `${context.root}/${projectGraph.nodes[app].data.root}/dist`, {
+            projectName: projectGraph.nodes[app].data.name,
+            projectRoot,
+            workspaceRoot: context.root,
+        });
+        if (outputPath.startsWith(projectRoot)) {
+            outputPath = (0, devkit_1.joinPathFragments)(context.root, outputPath);
+        }
+        outputPath = (0, path_1.dirname)(outputPath);
         const basePath = ['', '/', '.'].some((p) => (0, path_1.dirname)(outputPath) === p)
             ? outputPath
             : (0, path_1.dirname)(outputPath); // dist || dist/checkout -> dist