@nx/react 0.0.0-pr-22870-d31b9b7 → 0.0.0-pr-26816-51699f9

package/migrations.json

@@ -202,6 +202,15 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "19.4.0-module-federation": {
+      "version": "19.4.0-rc.2",
+      "packages": {
+        "@module-federation/node": {
+          "version": "^2.3.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "0.0.0-pr-22870-d31b9b7",
+  "version": "0.0.0-pr-26816-51699f9",
   "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,12 @@
     "file-loader": "^6.2.0",
     "minimatch": "9.0.3",
     "tslib": "^2.3.0",
-    "@nx/devkit": "0.0.0-pr-22870-d31b9b7",
-    "@nx/js": "0.0.0-pr-22870-d31b9b7",
-    "@nx/eslint": "0.0.0-pr-22870-d31b9b7",
-    "@nx/web": "0.0.0-pr-22870-d31b9b7",
-    "@nrwl/react": "0.0.0-pr-22870-d31b9b7"
+    "@module-federation/enhanced": "~0.2.3",
+    "@nx/devkit": "0.0.0-pr-26816-51699f9",
+    "@nx/js": "0.0.0-pr-26816-51699f9",
+    "@nx/eslint": "0.0.0-pr-26816-51699f9",
+    "@nx/web": "0.0.0-pr-26816-51699f9",
+    "@nrwl/react": "0.0.0-pr-26816-51699f9"
   },
   "publishConfig": {
     "access": "public"

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

@@ -188,6 +188,8 @@ async function* moduleFederationDevServer(options, context) {
         projectGraph: context.projectGraph,
         root: context.root,
     }, pathToManifestFile);
+    // 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;

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

@@ -65,6 +65,8 @@ async function* moduleFederationSsrDevServer(options, context) {
         : Array.isArray(options.devRemotes)
             ? options.devRemotes
             : [options.devRemotes];
+    // Set NX_MF_DEV_REMOTES for the Nx Runtime Library Control Plugin
+    process.env.NX_MF_DEV_REMOTES = JSON.stringify(devServeApps);
     for (const app of knownRemotes) {
         const [appName] = Array.isArray(app) ? app : [app];
         const isDev = devServeApps.includes(appName);

package/src/generators/host/host.js

@@ -13,6 +13,7 @@ const setup_ssr_for_host_1 = require("./lib/setup-ssr-for-host");
 const update_module_federation_e2e_project_1 = require("./lib/update-module-federation-e2e-project");
 const add_mf_env_to_inputs_1 = require("../../utils/add-mf-env-to-inputs");
 const js_1 = require("@nx/js");
+const versions_1 = require("../../utils/versions");
 async function hostGenerator(host, schema) {
     return hostGeneratorInternal(host, {
         projectNameAndRootFormat: 'derived',
@@ -97,6 +98,8 @@ async function hostGeneratorInternal(host, schema) {
         host.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.lint.json'));
     }
     (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(host);
+    const installTask = (0, devkit_1.addDependenciesToPackageJson)(host, {}, { '@module-federation/enhanced': versions_1.moduleFederationEnhancedVersion });
+    tasks.push(installTask);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }

package/src/generators/host/schema.json

@@ -90,7 +90,7 @@
       "x-priority": "internal"
     },
     "skipNxJson": {
-      "description": "Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).",
+      "description": "Skip updating nx.json with default options based on values provided to this app (e.g. babel, style).",
       "type": "boolean",
       "default": false,
       "x-priority": "internal"

package/src/generators/remote/remote.js

@@ -14,6 +14,7 @@ const add_remote_to_dynamic_host_1 = require("./lib/add-remote-to-dynamic-host")
 const add_mf_env_to_inputs_1 = require("../../utils/add-mf-env-to-inputs");
 const maybe_js_1 = require("../../utils/maybe-js");
 const js_1 = require("@nx/js");
+const versions_1 = require("../../utils/versions");
 function addModuleFederationFiles(host, options) {
     const templateVariables = {
         ...(0, devkit_1.names)(options.name),
@@ -104,6 +105,8 @@ async function remoteGeneratorInternal(host, schema) {
         (0, add_remote_to_dynamic_host_1.addRemoteToDynamicHost)(host, options.name, options.devServerPort, pathToMFManifest);
     }
     (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(host);
+    const installTask = (0, devkit_1.addDependenciesToPackageJson)(host, {}, { '@module-federation/enhanced': versions_1.moduleFederationEnhancedVersion });
+    tasks.push(installTask);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }

package/src/generators/remote/schema.json

@@ -96,7 +96,7 @@
       "x-priority": "internal"
     },
     "skipNxJson": {
-      "description": "Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).",
+      "description": "Skip updating nx.json with default options based on values provided to this app (e.g. babel, style).",
       "type": "boolean",
       "default": false,
       "x-priority": "internal"

package/src/module-federation/with-module-federation-ssr.d.ts

@@ -1,2 +1,2 @@
-import { ModuleFederationConfig } from '@nx/webpack/src/utils/module-federation';
-export declare function withModuleFederationForSSR(options: ModuleFederationConfig): Promise<(config: any) => any>;
+import { ModuleFederationConfig, NxModuleFederationConfigOverride } from '@nx/webpack/src/utils/module-federation';
+export declare function withModuleFederationForSSR(options: ModuleFederationConfig, configOverride?: NxModuleFederationConfigOverride): Promise<(config: any) => any>;

package/src/module-federation/with-module-federation-ssr.js

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withModuleFederationForSSR = void 0;
 const utils_1 = require("./utils");
-async function withModuleFederationForSSR(options) {
+async function withModuleFederationForSSR(options, configOverride) {
     if (global.NX_GRAPH_CREATION) {
         return (config) => config;
     }
+    options.useNxLibraryControlPlugin ??= true;
     const { sharedLibraries, sharedDependencies, mappedRemotes } = await (0, utils_1.getModuleFederationConfig)(options, {
         isServer: true,
     });
@@ -27,7 +28,24 @@ async function withModuleFederationForSSR(options) {
                 type: 'commonjs-module',
             },
             isServer: true,
+            /**
+             * Apply user-defined config overrides
+             */
+            ...(configOverride ? configOverride : {}),
+            runtimePlugins: process.env.NX_MF_DEV_REMOTES && options.useNxLibraryControlPlugin
+                ? [
+                    ...(configOverride?.runtimePlugins ?? []),
+                    require.resolve('@nx/webpack/src/utils/module-federation/plugins/runtime-library-control.plugin.js'),
+                ]
+                : configOverride?.runtimePlugins,
         }, {}), sharedLibraries.getReplacementPlugin());
+        if (process.env.NX_MF_DEV_REMOTES && options.useNxLibraryControlPlugin) {
+            // The env var is only set from the module-federation-dev-server
+            // Attach the runtime plugin
+            config.plugins.push(new (require('webpack').DefinePlugin)({
+                'process.env.NX_MF_DEV_REMOTES': process.env.NX_MF_DEV_REMOTES,
+            }));
+        }
         return config;
     };
 }

package/src/module-federation/with-module-federation.d.ts

@@ -1,7 +1,7 @@
-import { ModuleFederationConfig } from '@nx/webpack/src/utils/module-federation';
+import { ModuleFederationConfig, NxModuleFederationConfigOverride } from '@nx/webpack/src/utils/module-federation';
 import type { AsyncNxComposableWebpackPlugin } from '@nx/webpack';
 /**
  * @param {ModuleFederationConfig} options
  * @return {Promise<AsyncNxComposableWebpackPlugin>}
  */
-export declare function withModuleFederation(options: ModuleFederationConfig): Promise<AsyncNxComposableWebpackPlugin>;
+export declare function withModuleFederation(options: ModuleFederationConfig, configOverride?: NxModuleFederationConfigOverride): Promise<AsyncNxComposableWebpackPlugin>;

package/src/module-federation/with-module-federation.js

@@ -2,16 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withModuleFederation = void 0;
 const utils_1 = require("./utils");
-const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+const webpack_1 = require("@module-federation/enhanced/webpack");
 const isVarOrWindow = (libType) => libType === 'var' || libType === 'window';
 /**
  * @param {ModuleFederationConfig} options
  * @return {Promise<AsyncNxComposableWebpackPlugin>}
  */
-async function withModuleFederation(options) {
+async function withModuleFederation(options, configOverride) {
     if (global.NX_GRAPH_CREATION) {
         return (config) => config;
     }
+    options.useNxLibraryControlPlugin ??= true;
     const { sharedDependencies, sharedLibraries, mappedRemotes } = await (0, utils_1.getModuleFederationConfig)(options);
     const isGlobal = isVarOrWindow(options.library?.type);
     return (config, ctx) => {
@@ -32,7 +33,7 @@ async function withModuleFederation(options) {
             ...config.experiments,
             outputModule: !isGlobal,
         };
-        config.plugins.push(new ModuleFederationPlugin({
+        config.plugins.push(new webpack_1.ModuleFederationPlugin({
             name: options.name,
             library: options.library ?? { type: 'module' },
             filename: 'remoteEntry.js',
@@ -48,7 +49,24 @@ async function withModuleFederation(options) {
              *  { appY: 'appY@http://localhost:3002/remoteEntry.js' }
              */
             ...(isGlobal ? { remoteType: 'script' } : {}),
+            /**
+             * Apply user-defined config overrides
+             */
+            ...(configOverride ? configOverride : {}),
+            runtimePlugins: process.env.NX_MF_DEV_REMOTES && options.useNxLibraryControlPlugin
+                ? [
+                    ...(configOverride?.runtimePlugins ?? []),
+                    require.resolve('@nx/webpack/src/utils/module-federation/plugins/runtime-library-control.plugin.js'),
+                ]
+                : configOverride?.runtimePlugins,
         }), sharedLibraries.getReplacementPlugin());
+        if (process.env.NX_MF_DEV_REMOTES && options.useNxLibraryControlPlugin) {
+            // The env var is only set from the module-federation-dev-server
+            // Attach the runtime plugin
+            config.plugins.push(new (require('webpack').DefinePlugin)({
+                'process.env.NX_MF_DEV_REMOTES': process.env.NX_MF_DEV_REMOTES,
+            }));
+        }
         return config;
     };
 }

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

@@ -5,7 +5,7 @@ const devkit_1 = require("@nx/devkit");
 function addMfEnvToTargetDefaultInputs(tree) {
     const nxJson = (0, devkit_1.readNxJson)(tree);
     const webpackExecutor = '@nx/webpack:webpack';
-    const mfEnvVar = 'NX_MF_DEV_SERVER_STATIC_REMOTES';
+    const mfEnvVar = 'NX_MF_DEV_REMOTES';
     nxJson.targetDefaults ??= {};
     nxJson.targetDefaults[webpackExecutor] ??= {};
     nxJson.targetDefaults[webpackExecutor].inputs ??= [

package/src/utils/versions.d.ts

@@ -36,7 +36,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 = "~0.9.9";
+export declare const moduleFederationNodeVersion = "^2.3.0";
+export declare const moduleFederationEnhancedVersion = "~0.2.3";
 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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.swcPluginStyledComponentsVersion = exports.swcPluginEmotionVersion = exports.swcPluginStyledJsxVersion = exports.svgrRollupVersion = exports.rollupPluginUrlVersion = exports.sassVersion = exports.lessVersion = exports.moduleFederationNodeVersion = exports.typesCorsVersion = exports.corsVersion = exports.isbotVersion = exports.typesExpressVersion = exports.expressVersion = exports.autoprefixerVersion = exports.tailwindcssVersion = exports.postcssVersion = exports.tsLibVersion = exports.babelPluginStyledComponentsVersion = exports.eslintPluginReactHooksVersion = exports.eslintPluginReactVersion = exports.eslintPluginJsxA11yVersion = exports.eslintPluginImportVersion = exports.reactTestRendererVersion = exports.reactReduxVersion = exports.reduxjsToolkitVersion = exports.testingLibraryReactVersion = exports.reactRouterDomVersion = exports.styledJsxVersion = exports.emotionBabelPlugin = exports.emotionReactVersion = exports.emotionStyledVersion = exports.typesStyledComponentsVersion = exports.styledComponentsVersion = exports.babelCoreVersion = exports.babelPresetReactVersion = exports.typesNodeVersion = exports.typesReactIsVersion = exports.typesReactDomVersion = exports.typesReactVersion = exports.babelLoaderVersion = exports.swcLoaderVersion = exports.reactIsVersion = exports.reactDomVersion = exports.reactVersion = exports.nxRspackVersion = exports.nxVersion = void 0;
+exports.swcPluginStyledComponentsVersion = exports.swcPluginEmotionVersion = exports.swcPluginStyledJsxVersion = exports.svgrRollupVersion = exports.rollupPluginUrlVersion = exports.sassVersion = exports.lessVersion = exports.moduleFederationEnhancedVersion = exports.moduleFederationNodeVersion = exports.typesCorsVersion = exports.corsVersion = exports.isbotVersion = exports.typesExpressVersion = exports.expressVersion = exports.autoprefixerVersion = exports.tailwindcssVersion = exports.postcssVersion = exports.tsLibVersion = exports.babelPluginStyledComponentsVersion = exports.eslintPluginReactHooksVersion = exports.eslintPluginReactVersion = exports.eslintPluginJsxA11yVersion = exports.eslintPluginImportVersion = exports.reactTestRendererVersion = exports.reactReduxVersion = exports.reduxjsToolkitVersion = exports.testingLibraryReactVersion = exports.reactRouterDomVersion = exports.styledJsxVersion = exports.emotionBabelPlugin = exports.emotionReactVersion = exports.emotionStyledVersion = exports.typesStyledComponentsVersion = exports.styledComponentsVersion = exports.babelCoreVersion = exports.babelPresetReactVersion = exports.typesNodeVersion = exports.typesReactIsVersion = exports.typesReactDomVersion = exports.typesReactVersion = exports.babelLoaderVersion = exports.swcLoaderVersion = exports.reactIsVersion = exports.reactDomVersion = exports.reactVersion = exports.nxRspackVersion = exports.nxVersion = void 0;
 exports.nxVersion = require('../../package.json').version;
 // Always pull the latest version until we merge rspack plugin into the repo.
 exports.nxRspackVersion = '*';
@@ -42,7 +42,8 @@ exports.typesExpressVersion = '4.17.17';
 exports.isbotVersion = '^3.6.5';
 exports.corsVersion = '~2.8.5';
 exports.typesCorsVersion = '~2.8.12';
-exports.moduleFederationNodeVersion = '~0.9.9';
+exports.moduleFederationNodeVersion = '^2.3.0';
+exports.moduleFederationEnhancedVersion = '~0.2.3';
 // style preprocessors
 exports.lessVersion = '3.12.2';
 exports.sassVersion = '^1.55.0';