@mainset/bundler-webpack 0.3.7 → 0.4.0

package/dist/esm/index.mjs

@@ -1 +1,4 @@
 export { generateEnvBasedWebpackConfig } from './generate-webpack-config.mjs';
+// NOTE: re-exported so an app can extend the generated config without a
+// direct {webpack-merge} dependency of its own.
+export { merge as mergeWebpackConfig } from 'webpack-merge';

package/dist/esm/module-federation/index.mjs

@@ -0,0 +1,2 @@
+export { DOCKER_SAFE__MODULE_FEDERATION_CONFIG_CHUNK, SSR_STYLESHEETS_FILENAME, } from './module-federation.chunk.mjs';
+export { generateModuleFederationCommonWebpackConfigFragment, generateModuleFederationSSRContainerWebpackConfig, generateModuleFederationSSRServerWebpackConfigFragment, generateModuleFederationWebappWebpackConfigFragment, } from './module-federation.fragment.mjs';

package/dist/esm/module-federation/module-federation-node.mjs

@@ -0,0 +1,16 @@
+import { createRequire } from 'module';
+// NOTE: {@module-federation/node} is loaded through its CommonJS build on
+// purpose. Its ESM build aliases its own internal {require} calls to
+// {__require} (a helper of its bundler), and StreamingTargetPlugin embeds some
+// of its source functions verbatim ({fn.toString()}) into the GENERATED
+// chunk-loading runtime — so the ESM build leaks a free {__require} into the
+// app's bundle ("__require is not defined" at runtime). The CJS build's
+// equivalents use plain {require}, which resolves fine.
+const requireFromBundler = createRequire(import.meta.url);
+const { NodeFederationPlugin, StreamingTargetPlugin } = requireFromBundler('@module-federation/node');
+// NOTE: passed to NodeFederationPlugin as {runtimePlugins} explicitly, instead
+// of its own {useRuntimePlugin: true} — that option resolves a path missing
+// from the package's ESM build ({../runtimePlugin.mjs}). The package's
+// exports map exposes the CJS variant, resolved here.
+const NODE_FEDERATION_RUNTIME_PLUGIN_PATH = requireFromBundler.resolve('@module-federation/node/runtimePlugin');
+export { NODE_FEDERATION_RUNTIME_PLUGIN_PATH, NodeFederationPlugin, StreamingTargetPlugin, };

package/dist/esm/module-federation/module-federation.chunk.mjs

@@ -0,0 +1,48 @@
+// The file names a remote's build emits — part of its contract with whatever
+// deploys and loads it.
+const REMOTE_ENTRY_FILENAME__WEBAPP = 'remoteEntry.js';
+const REMOTE_ENTRY_FILENAME__SSR = 'ssr-remoteEntry.js';
+// NOTE: written next to the webapp build, but read by the hosts' SSR — deploy
+// it with the server build (ssr-remoteEntry.js), not with the browser files,
+// so it switches together with the server code that renders the markup.
+const SSR_STYLESHEETS_FILENAME = 'ssr-stylesheets.json';
+// NOTE: without this, the webapp entry consumes the shared singletons
+// synchronously before Module Federation's share-scope negotiation gets an
+// async tick to run, throwing RUNTIME-006 ("Invalid loadShareSync function
+// call") on every load. {asyncStartup} wraps entry startup in an async
+// boundary so the negotiation can complete first.
+const ASYNC_STARTUP__MODULE_FEDERATION_CONFIG_CHUNK = {
+    experiments: { asyncStartup: true },
+};
+// NOTE: Module Federation's tooling writes into all three folders on every
+// compile — the DTS plugin a scratch {tsconfig.<hash>.json} into
+// node_modules/.federation, the manifest plugin {mf-manifest.json} into dist,
+// and {@module-federation/error-codes} a diagnostics dump into .mf/ (on every
+// reported error, at a hardcoded path). Each rewrite bumps mtime even with
+// identical content, which a polling watcher reads as a source change: a
+// self-sustaining rebuild loop, and a TS error in an exposed module surfaces
+// as that loop instead of an error message. None of them is ever a source
+// input, so they are excluded outright.
+const WATCH_OPTIONS__MODULE_FEDERATION__WEBPACK_CONFIG_CHUNK = {
+    watchOptions: {
+        ignored: ['**/node_modules/**', '**/dist/**', '**/.mf/**'],
+    },
+};
+// Opt-in preset (pass it as {pluginOptions}) for running the dev build inside
+// Docker on macOS/Windows: bind-mount file sharing doesn't propagate native fs
+// events reliably, so webpack falls back to polling and can't tell "my own
+// generated output changed" from a real edit.
+// - dts: the default types folder ({@mf-types}) lands in the app root — the
+//   bind mount. Redirected into node_modules, which Docker setups usually
+//   mask with an anonymous volume.
+// - dev: "hot types reload" hardcodes its output to {<app root>/.dev-server}
+//   (no option to move it), so it is turned off. Live reload of the remote's
+//   code is unaffected.
+const DOCKER_SAFE__MODULE_FEDERATION_CONFIG_CHUNK = {
+    dts: {
+        generateTypes: { typesFolder: 'node_modules/.mf-types' },
+        consumeTypes: { typesFolder: 'node_modules/.mf-types' },
+    },
+    dev: { disableHotTypesReload: true },
+};
+export { ASYNC_STARTUP__MODULE_FEDERATION_CONFIG_CHUNK, DOCKER_SAFE__MODULE_FEDERATION_CONFIG_CHUNK, REMOTE_ENTRY_FILENAME__SSR, REMOTE_ENTRY_FILENAME__WEBAPP, SSR_STYLESHEETS_FILENAME, WATCH_OPTIONS__MODULE_FEDERATION__WEBPACK_CONFIG_CHUNK, };

package/dist/esm/module-federation/module-federation.fragment.mjs

@@ -0,0 +1,161 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { runtimePathById } from '@mainset/cli/runtime';
+import { ModuleFederationPlugin } from '@module-federation/enhanced/webpack';
+import fs from 'fs';
+import path from 'path';
+import { merge } from 'webpack-merge';
+import ssrServerEnvBasedConfig from '../webpack-config/server.ssr.config.mjs';
+import { NODE_FEDERATION_RUNTIME_PLUGIN_PATH, NodeFederationPlugin, StreamingTargetPlugin, } from './module-federation-node.mjs';
+import { ASYNC_STARTUP__MODULE_FEDERATION_CONFIG_CHUNK, REMOTE_ENTRY_FILENAME__SSR, REMOTE_ENTRY_FILENAME__WEBAPP, WATCH_OPTIONS__MODULE_FEDERATION__WEBPACK_CONFIG_CHUNK, } from './module-federation.chunk.mjs';
+import { RemoteStylesheetsPlugin } from './remote-stylesheets.plugin.mjs';
+// NOTE: an SSR host's server entry has to reach its SSR config through a
+// dynamic import — a static import of the shared deps (e.g. react-dom/server)
+// fails Module Federation's share-scope negotiation ({loadShareSync failed}).
+// That async boundary is app code, so it lives next to the SSR config by
+// convention, the same way {ssr-server.config.mts} does.
+const SSR_SERVER_ENTRY_PATH = path.join(runtimePathById.config, 'ssr-server.entry.mts');
+// { landing: { webappEntry: 'https://…/remoteEntry.js' } }
+//   → { landing: 'landing@https://…/remoteEntry.js' }
+const generatePluginRemotes = (remotes = {}, entryKey) => Object.fromEntries(Object.entries(remotes).map(([remoteName, remote]) => {
+    const remoteEntry = remote[entryKey];
+    if (!remoteEntry) {
+        throw new Error(`[bundler-webpack] Module Federation remote "${remoteName}" has no {${entryKey}}.`);
+    }
+    return [remoteName, `${remoteName}@${remoteEntry}`];
+}));
+// NOTE: eager on the server only — nothing there is lazy-loaded for payload
+// size, and the SSR server consumes the shared deps synchronously as soon as it
+// starts. Required together with {webpackMode: "eager"} on the dynamic import
+// in {ssr-server.entry.mts}: that one alone inlines the module, so the shared
+// dep is consumed before negotiation (RUNTIME-006); this one alone leaves a
+// separate chunk the server would then have to load. The browser keeps the
+// non-eager deps — there the async negotiation is both correct and wanted.
+const generateEagerShared = (shared = {}) => Object.fromEntries(Object.entries(shared).map(([sharedName, sharedConfig]) => [
+    sharedName,
+    Object.assign(Object.assign({}, sharedConfig), { eager: true }),
+]));
+// Merge into the config passed to {generateEnvBasedWebpackConfig} — it is
+// needed by every compilation of an app that uses Module Federation.
+const generateModuleFederationCommonWebpackConfigFragment = ({ name, }) => merge(WATCH_OPTIONS__MODULE_FEDERATION__WEBPACK_CONFIG_CHUNK, {
+    output: {
+        // NOTE: must differ between every app on the page — webpack names its
+        // global chunk array after it ({self.webpackChunk<uniqueName>}) and
+        // defaults it to package.json {name}. Two apps on the same array: the
+        // runtime loaded last takes it over, the other app's chunks register in
+        // the wrong runtime, and hydration fails ("Cannot read properties of
+        // undefined (reading 'call')").
+        uniqueName: name,
+    },
+});
+// Merge into the webapp (browser) compilation — in CSR the only one there is.
+// NOTE: a remote built for SSR also publishes {ssr-stylesheets.json} for its
+// hosts' SSR (see RemoteStylesheetsPlugin). Not in CSR — there is no server
+// HTML to link it from.
+const generateModuleFederationWebappWebpackConfigFragment = ({ name, exposes, remotes, shared, pluginOptions = {}, }) => {
+    const isSsrRemote = Boolean(exposes) && process.env.MS_CLI__WEBPACK_SERVE_MODE === 'ssr';
+    return {
+        plugins: [
+            new ModuleFederationPlugin(merge(Object.assign(Object.assign(Object.assign({ name }, (exposes && {
+                filename: REMOTE_ENTRY_FILENAME__WEBAPP,
+                exposes,
+            })), (remotes && {
+                remotes: generatePluginRemotes(remotes, 'webappEntry'),
+            })), { shared }), ASYNC_STARTUP__MODULE_FEDERATION_CONFIG_CHUNK, pluginOptions)),
+            ...(isSsrRemote ? [new RemoteStylesheetsPlugin()] : []),
+        ],
+    };
+};
+// Merge into an SSR HOST's server compilation (the one that renders pages and
+// loads its remotes' server code). A remote that hosts nothing leaves its own
+// server compilation as it is.
+const generateModuleFederationSSRServerWebpackConfigFragment = ({ name, remotes, shared, pluginOptions = {}, }) => {
+    if (!fs.existsSync(SSR_SERVER_ENTRY_PATH)) {
+        throw new Error(`[bundler-webpack] an SSR host needs ${SSR_SERVER_ENTRY_PATH}, which imports ./ssr-server.config.mts dynamically ({webpackMode: "eager"}) — see generateModuleFederationSSRServerWebpackConfigFragment.`);
+    }
+    const pluginRemotes = generatePluginRemotes(remotes, 'ssrServerEntry');
+    const eagerShared = generateEagerShared(shared);
+    return {
+        // NOTE: 'async-node' (not plain 'node') is required by
+        // {@module-federation/node}'s runtime plugin.
+        target: 'async-node',
+        entry: { 'ssr-server.config': SSR_SERVER_ENTRY_PATH },
+        plugins: [
+            new NodeFederationPlugin(merge({
+                name,
+                remotes: pluginRemotes,
+                shared: eagerShared,
+                runtimePlugins: [NODE_FEDERATION_RUNTIME_PLUGIN_PATH],
+            }, pluginOptions), {}),
+            // NOTE: patches how async chunks the remotes split off are loaded in
+            // Node — fetched over HTTP instead of read from this app's disk.
+            new StreamingTargetPlugin({
+                name,
+                remotes: pluginRemotes,
+                shared: eagerShared,
+            }),
+        ],
+    };
+};
+// A REMOTE's extra compilation for SSR hosts: its exposed modules built as a
+// CommonJS container ({ssr-remoteEntry.js}) a Node process can fetch and run.
+// Returns a whole config (not a fragment): it reuses the SSR server base (its
+// TS/SCSS loaders, CSS nulled out) WITHOUT its entry — the container must not
+// build the app's own SSR server — and webpack-merge can't remove a key.
+// Pass the same fragment as to {generateEnvBasedWebpackConfig}, extended with
+// the server-facing {output.publicPath}.
+const generateModuleFederationSSRContainerWebpackConfig = (extendedWebpackConfig, { name, exposes, remotes, shared, pluginOptions = {}, }) => {
+    if (!exposes) {
+        throw new Error(`[bundler-webpack] "${name}" exposes nothing — an SSR container is only built for a remote.`);
+    }
+    const { entry: _ssrServerEntry } = ssrServerEnvBasedConfig, ssrServerConfigWithoutEntry = __rest(ssrServerEnvBasedConfig, ["entry"]);
+    const pluginRemotes = generatePluginRemotes(remotes, 'ssrServerEntry');
+    return merge(ssrServerConfigWithoutEntry, extendedWebpackConfig, {
+        entry: {},
+        // NOTE: not the base's 'node' — a hardcoded 'node' target bakes in
+        // filesystem {require()} chunk loading before StreamingTargetPlugin can
+        // switch it to HTTP, which breaks loading an exposed module's async chunk
+        // from another process. Matches how {@module-federation/node}'s own
+        // server-side remote examples set up their compiler.
+        target: false,
+        output: {
+            // NOTE: next to the browser build, not in dist/private — the host's
+            // Node process fetches it over HTTP, so it has to be served.
+            path: path.join(runtimePathById.dist, 'public'),
+            library: { type: 'commonjs-module' },
+        },
+        experiments: { outputModule: false },
+        plugins: [
+            // NOTE: NodeFederationPlugin (not plain ModuleFederationPlugin) even
+            // for a remote that consumes nothing: the plain one leaves the exposed
+            // module's async chunk on filesystem loading, which fails for a
+            // consumer in another process.
+            new NodeFederationPlugin(merge({
+                name,
+                filename: REMOTE_ENTRY_FILENAME__SSR,
+                // NOTE: Node hosts fetch a remote entry and {require()}-wrap it,
+                // reading {module.exports} — the browser container's bare
+                // {var <name> = …} global evaporates once wrapped that way.
+                library: { type: 'commonjs-module' },
+                remotes: pluginRemotes,
+                exposes,
+                shared,
+            }, pluginOptions), {}),
+            new StreamingTargetPlugin({
+                name,
+                library: { type: 'commonjs-module' },
+                remotes: pluginRemotes,
+            }),
+        ],
+    });
+};
+export { generateModuleFederationCommonWebpackConfigFragment, generateModuleFederationSSRContainerWebpackConfig, generateModuleFederationSSRServerWebpackConfigFragment, generateModuleFederationWebappWebpackConfigFragment, };

package/dist/esm/module-federation/module-federation.types.mjs

@@ -0,0 +1 @@
+export {};

package/dist/esm/module-federation/remote-stylesheets.plugin.mjs

@@ -0,0 +1,54 @@
+import { SSR_STYLESHEETS_FILENAME } from './module-federation.chunk.mjs';
+const PLUGIN_NAME = 'RemoteStylesheetsPlugin';
+const MODULE_FEDERATION_MANIFEST_FILENAME = 'mf-manifest.json';
+// Records, per exposed module, the stylesheets an SSR host must have in its
+// page <head> before that module's markup is first painted — the file the
+// host's SSR reads to avoid a flash of unstyled content (FOUC).
+//
+// Why a host needs it: the exposed module's CSS lives in the remote's async
+// chunk and is only requested by Module Federation's browser runtime AFTER JS
+// runs, while the host's SSR HTML already carries the markup. Nothing in that
+// HTML points at the CSS, so the page paints unstyled until the chunk loads.
+//
+// NOTE: derived from Module Federation's own manifest (its `assets.css.sync`
+// per expose) rather than re-walking the chunk graph, so "which CSS belongs to
+// which expose" stays MF's answer. Not shipped as-is because the manifest is
+// not a stable contract: the webapp and the SSR container are two
+// compilations writing the SAME `mf-manifest.json` into the same folder (last
+// one wins), and the SSR one has no CSS at all (CSS is nulled out on the
+// server). Runs on the WEBAPP compilation only.
+//
+// Output ({ssr-stylesheets.json}), URLs exactly `publicPath + file` (so
+// output.publicPath must be absolute, not 'auto'), which is what webpack's CSS
+// loader compares against — a <link> with the same href is reused after
+// hydration instead of being fetched twice:
+//   { "./routes": ["https://cdn.example/landing/prod/css/806.0116.min.css"] }
+//
+// NOTE: only `sync` CSS — what the module needs to render. CSS of its lazily
+// loaded chunks (`async`) is requested when that chunk is.
+class RemoteStylesheetsPlugin {
+    apply(compiler) {
+        const { Compilation, WebpackError, sources } = compiler.webpack;
+        compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+            compilation.hooks.processAssets.tap({
+                name: PLUGIN_NAME,
+                // NOTE: Module Federation emits its manifest at
+                // PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER (3000) — this has to run after.
+                stage: Compilation.PROCESS_ASSETS_STAGE_REPORT,
+            }, () => {
+                const manifestAsset = compilation.getAsset(MODULE_FEDERATION_MANIFEST_FILENAME);
+                if (!manifestAsset) {
+                    compilation.errors.push(new WebpackError(`${PLUGIN_NAME}: ${MODULE_FEDERATION_MANIFEST_FILENAME} was not emitted — is Module Federation's manifest disabled?`));
+                    return;
+                }
+                const { metaData, exposes } = JSON.parse(manifestAsset.source.source().toString());
+                const stylesheetsByExpose = Object.fromEntries(exposes.map(({ path, assets }) => [
+                    path,
+                    assets.css.sync.map((file) => `${metaData.publicPath}${file}`),
+                ]));
+                compilation.emitAsset(SSR_STYLESHEETS_FILENAME, new sources.RawSource(`${JSON.stringify(stylesheetsByExpose, null, 2)}\n`));
+            });
+        });
+    }
+}
+export { RemoteStylesheetsPlugin };

package/dist/types/index.d.mts

@@ -1 +1,2 @@
 export { generateEnvBasedWebpackConfig } from './generate-webpack-config.mjs';
+export { merge as mergeWebpackConfig } from 'webpack-merge';

package/dist/types/module-federation/index.d.mts

@@ -0,0 +1,3 @@
+export { DOCKER_SAFE__MODULE_FEDERATION_CONFIG_CHUNK, SSR_STYLESHEETS_FILENAME, } from './module-federation.chunk.mjs';
+export { generateModuleFederationCommonWebpackConfigFragment, generateModuleFederationSSRContainerWebpackConfig, generateModuleFederationSSRServerWebpackConfigFragment, generateModuleFederationWebappWebpackConfigFragment, } from './module-federation.fragment.mjs';
+export type { ModuleFederationConfig, ModuleFederationRemote, ModuleFederationSharedConfig, } from './module-federation.types.mjs';

package/dist/types/module-federation/module-federation-node.d.mts

@@ -0,0 +1,3 @@
+declare const NodeFederationPlugin: typeof import("@module-federation/node").NodeFederationPlugin, StreamingTargetPlugin: typeof import("@module-federation/node").StreamingTargetPlugin;
+declare const NODE_FEDERATION_RUNTIME_PLUGIN_PATH: string;
+export { NODE_FEDERATION_RUNTIME_PLUGIN_PATH, NodeFederationPlugin, StreamingTargetPlugin, };

package/dist/types/module-federation/module-federation.chunk.d.mts

@@ -0,0 +1,9 @@
+import type { Configuration } from 'webpack';
+import type { ModuleFederationPluginOptions } from './module-federation.types.mjs';
+declare const REMOTE_ENTRY_FILENAME__WEBAPP = "remoteEntry.js";
+declare const REMOTE_ENTRY_FILENAME__SSR = "ssr-remoteEntry.js";
+declare const SSR_STYLESHEETS_FILENAME = "ssr-stylesheets.json";
+declare const ASYNC_STARTUP__MODULE_FEDERATION_CONFIG_CHUNK: Partial<ModuleFederationPluginOptions>;
+declare const WATCH_OPTIONS__MODULE_FEDERATION__WEBPACK_CONFIG_CHUNK: Configuration;
+declare const DOCKER_SAFE__MODULE_FEDERATION_CONFIG_CHUNK: Partial<ModuleFederationPluginOptions>;
+export { ASYNC_STARTUP__MODULE_FEDERATION_CONFIG_CHUNK, DOCKER_SAFE__MODULE_FEDERATION_CONFIG_CHUNK, REMOTE_ENTRY_FILENAME__SSR, REMOTE_ENTRY_FILENAME__WEBAPP, SSR_STYLESHEETS_FILENAME, WATCH_OPTIONS__MODULE_FEDERATION__WEBPACK_CONFIG_CHUNK, };

package/dist/types/module-federation/module-federation.fragment.d.mts

@@ -0,0 +1,7 @@
+import type { Configuration } from 'webpack';
+import type { ModuleFederationConfig } from './module-federation.types.mjs';
+declare const generateModuleFederationCommonWebpackConfigFragment: ({ name, }: Pick<ModuleFederationConfig, "name">) => Configuration;
+declare const generateModuleFederationWebappWebpackConfigFragment: ({ name, exposes, remotes, shared, pluginOptions, }: ModuleFederationConfig) => Configuration;
+declare const generateModuleFederationSSRServerWebpackConfigFragment: ({ name, remotes, shared, pluginOptions, }: ModuleFederationConfig) => Configuration;
+declare const generateModuleFederationSSRContainerWebpackConfig: (extendedWebpackConfig: Configuration, { name, exposes, remotes, shared, pluginOptions, }: ModuleFederationConfig) => Configuration;
+export { generateModuleFederationCommonWebpackConfigFragment, generateModuleFederationSSRContainerWebpackConfig, generateModuleFederationSSRServerWebpackConfigFragment, generateModuleFederationWebappWebpackConfigFragment, };

package/dist/types/module-federation/module-federation.types.d.mts

@@ -0,0 +1,16 @@
+import type { ModuleFederationPlugin } from '@module-federation/enhanced/webpack';
+type ModuleFederationPluginOptions = ConstructorParameters<typeof ModuleFederationPlugin>[0];
+type ModuleFederationSharedObject = Exclude<NonNullable<ModuleFederationPluginOptions['shared']>, unknown[]>;
+type ModuleFederationSharedConfig = Exclude<ModuleFederationSharedObject[string], string>;
+type ModuleFederationRemote = {
+    webappEntry: string;
+    ssrServerEntry?: string;
+};
+type ModuleFederationConfig = {
+    name: string;
+    exposes?: Record<string, string>;
+    remotes?: Record<string, ModuleFederationRemote>;
+    shared?: Record<string, ModuleFederationSharedConfig>;
+    pluginOptions?: Partial<ModuleFederationPluginOptions>;
+};
+export type { ModuleFederationConfig, ModuleFederationPluginOptions, ModuleFederationRemote, ModuleFederationSharedConfig, };

package/dist/types/module-federation/remote-stylesheets.plugin.d.mts

@@ -0,0 +1,5 @@
+import type { Compiler } from 'webpack';
+declare class RemoteStylesheetsPlugin {
+    apply(compiler: Compiler): void;
+}
+export { RemoteStylesheetsPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mainset/bundler-webpack",
-  "version": "0.3.7",
+  "version": "0.4.0",
   "description": "Bundler for web apps",
   "homepage": "https://github.com/mainset/dev-stack-fe/tree/main/packages/bundler-webpack",
   "bugs": {
@@ -23,6 +23,10 @@
       "types": "./dist/types/index.d.mts",
       "import": "./dist/esm/index.mjs"
     },
+    "./module-federation": {
+      "types": "./dist/types/module-federation/index.d.mts",
+      "import": "./dist/esm/module-federation/index.mjs"
+    },
     "./global-types": "./src/@types/bundler.d.ts"
   },
   "dependencies": {
@@ -31,6 +35,8 @@
     "@babel/preset-env": "^8.0.2",
     "@babel/preset-react": "^8.0.1",
     "@babel/preset-typescript": "^8.0.1",
+    "@module-federation/enhanced": "^2.9.2",
+    "@module-federation/node": "^2.7.52",
     "babel-loader": "^10.1.1",
     "copy-webpack-plugin": "^14.0.0",
     "css-loader": "^7.1.4",
@@ -49,8 +55,8 @@
     "webpack-merge": "^6.0.1"
   },
   "devDependencies": {
-    "@mainset/cli": "^0.7.2",
-    "@mainset/dev-stack-fe": "^0.2.3"
+    "@mainset/dev-stack-fe": "^0.2.3",
+    "@mainset/cli": "^0.7.4"
   },
   "peerDependencies": {
     "@mainset/cli": ">=0.5.0 <1.0.0",