@module-federation/modern-js 0.0.0-next-20240624115757 → 0.0.0-next-20240625070454

package/README.md

@@ -1 +1,260 @@
 # @module-federation/modern-js
+
+This plugin provides Module Federation supporting functions for Modern.js
+
+## Supports
+
+- modern.js ^2.54.2
+- Server-Side Rendering
+
+We highly recommend referencing this application which takes advantage of the best capabilities:
+[module-federation example](https://github.com/module-federation/core/tree/feat/modernjs-ssr/apps/modernjs-ssr)
+
+## Quick Start
+
+### Installation
+
+You can install the plugin with the following commands:
+
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs
+  command={{
+    npm: 'npm add @module-federation/modern-js --save',
+    yarn: 'yarn add @module-federation/modern-js --save',
+    pnpm: 'pnpm add @module-federation/modern-js --save',
+    bun: 'bun add @module-federation/modern-js --save',
+  }}
+/>
+
+### Apply Plugin
+
+Apply this plugin in `plugins` of `modern.config.ts`:
+
+```ts title="modern.config.ts"
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { moduleFederationPlugin } from '@module-federation/modern-js';
+
+export default defineConfig({
+  dev: {
+    port: 3005,
+  },
+  runtime: {
+    router: true,
+  },
+  // moduleFederationPlugin is a plug-in for modern.js, which can make certain modifications to the build/runtime
+  plugins: [appTools(), moduleFederationPlugin()],
+});
+```
+
+Then create the `module-federation.config.ts` file and write the required configuration:
+
+```ts title="module-federation.config.ts"
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+export default createModuleFederationConfig({
+  name: 'host',
+  remotes: {
+    remote: 'remote@http://localhost:3006/mf-manifest.json',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});
+```
+
+### Type support
+
+add `/// <reference types='@module-federation/modern-js/types' />` in `modern-app-env.d.ts` to get type support.
+
+```diff title='modern-app-env.d.ts'
++ /// <reference types='@module-federation/modern-js/types' />
+```
+
+## Server-Side Rendering
+
+:::info
+For a better performance experience, Module Federation X Modern.js SSR only supports stream SSR.
+:::
+
+There is no difference between using Module Federation in SSR scenarios and CSR scenarios. Developers can just keep following the original development behavior.
+
+But for a better user experience, we provide supporting functions/components to help developers better use Module Federation.
+
+### createRemoteSSRComponent
+
+```ts
+declare function createRemoteSSRComponent(
+  props: CreateRemoteSSRComponentOptions
+): (props: ComponentType) => React.JSX.Element;
+
+type CreateRemoteSSRComponentOptions = {
+  loader: () => Promise<T>;
+  loading: React.ReactNode;
+  fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
+  injectScript?: boolean;
+  injectLink?: boolean;
+  export?: E;
+};
+
+type ComponentType = T[E] extends (...args: any) => any
+  ? Parameters<T[E]>[0] extends undefined
+    ? Record<string, never>
+    : Parameters<T[E]>[0]
+  : Record<string, never>;
+```
+
+This function will also help inject the corresponding style tag/script while loading the component. This behavior can help avoid the CSS flickering problem caused by streaming rendering and accelerate the PID (first screen interactive time).
+
+#### Example
+
+```tsx
+import React, { FC, memo, useEffect } from 'react';
+import { registerRemotes, createRemoteSSRComponent } from '@modern-js/runtime/mf';
+// The remote declared in the build plug-in can be imported directly at the top level
+import RemoteComp from 'remote/Image';
+
+
+const RemoteSSRComponent = createRemoteSSRComponent({
+  // The remote declared in the build plug-in can also be loaded using this function: loader: () => import('remote/Image'),
+  loader: () => loadRemote('dynamic_remote/Image'),
+  loading: <div>loading...</div>,
+  fallback: ({ error }) => {
+    if (error instanceof Error && error.message.includes('not exist')) {
+      return <div>fallback - not existed id</div>;
+    }
+    return <div>fallback</div>;
+  },
+});
+
+const Product: FC = () => {
+  registerRemotes([
+    {
+      name: 'dynamic_remote',
+      entry: 'http://localhost:3008/mf-manifest.json',
+    },
+  ]);
+
+  const fallback = (err: Error) => {
+    if (err.message.includes('does not exist in container')) {
+      return <div>404</div>;
+    }
+    throw err;
+  };
+
+  return <>
+    <RemoteSSRComponent />
+    <RemoteComp />
+  </>;
+};
+export default Product;
+```
+
+#### loading
+
+- Type:`React.ReactNode`
+- Required: Yes
+- Default value: `undefined`
+
+Set module loading status.
+
+#### fallback
+
+- Type:`((err: Error) => React.ReactElement)`
+- Required: Yes
+- Default value: `undefined`
+
+A fault-tolerant component that is rendered when the component fails to **load** or **render**.
+
+Note: This component only renders this fault-tolerant component on the client side when **rendering** fails.
+
+#### injectLink
+
+- Type:`boolean`
+- Required: No
+- Default value: `true`
+
+Whether to inject the style of the corresponding component.
+
+#### injectScript
+
+- Type:`boolean`
+- Required: No
+- Default value: `true`
+
+Whether to inject the script of the corresponding component.
+
+### collectSSRAssets
+
+```ts
+declare function createRemoteSSRComponent(
+  props: CollectSSRAssetsOptions
+): React.ReactNode[];
+
+type CollectSSRAssetsOptions = {
+  id: string;
+  injectScript?: boolean;
+  injectLink?: boolean;
+};
+```
+
+This function collects producer-related scripts and styles rendered on the server side and returns the script/link tag.
+
+#### Example
+
+```tsx
+import React from 'react';
+import { collectSSRAssets } from '@modern-js/runtime/mf';
+import Comp from 'remote/Image';
+
+export default (): JSX.Element => (
+  <div>
+    {collectSSRAssets({ id: 'remote/Image' })}
+    <Comp />
+  </div>
+);
+```
+
+#### injectLink
+
+- Type:`boolean`
+- Required: No
+- Default value: `true`
+
+Whether to inject the style of the corresponding component.
+
+#### injectScript
+
+- Type:`boolean`
+- Required: No
+- Default value: `true`
+
+Whether to inject the script of the corresponding component.
+
+### SSRLiveReload
+
+:::info
+This component will not take effect in the production environment!
+:::
+
+```ts
+declare function SSRLiveReload(): React.JSX.Element | null;
+```
+
+When remote components are updated, page reloads occur automatically.
+
+#### Example
+
+```tsx
+import { Outlet } from '@modern-js/runtime/router';
+import { SSRLiveReload } from '@modern-js/runtime/mf';
+
+export default function Layout() {
+  return (
+    <div>
+      <SSRLiveReload />
+      <Outlet />
+    </div>
+  );
+}
+```

package/dist/cjs/cli/index.js

@@ -89,10 +89,13 @@ const moduleFederationPlugin = (userConfig = {}) => ({
             mfConfig: envConfig
           });
         };
-        const ipv4 = await (0, import_utils2.getIPV4)();
+        const ipv4 = (0, import_utils2.getIPV4)();
         return {
           tools: {
             rspack(config) {
+              if (enableSSR) {
+                throw new Error(`${import_constant.PLUGIN_IDENTIFIER} not support ssr for rspack bundler yet!`);
+              }
               modifyBundlerConfig(config, false);
             },
             webpack(config, { isServer }) {

package/dist/cjs/cli/utils.js

@@ -90,11 +90,10 @@ const replaceRemoteUrl = async (mfConfig) => {
     handleRemoteObject(mfConfig.remotes);
   }
 };
-const patchMFConfig = (mfConfig, isServer) => {
-  const isDev = process.env.NODE_ENV === "development";
-  const runtimePlugins = [
-    ...mfConfig.runtimePlugins || []
-  ];
+const patchDTSConfig = (mfConfig, isServer) => {
+  if (isServer) {
+    return;
+  }
   const ModernJSRuntime = "@modern-js/runtime/mf";
   if (mfConfig.dts !== false) {
     var _mfConfig_dts, _mfConfig_dts1;
@@ -122,6 +121,13 @@ const patchMFConfig = (mfConfig, isServer) => {
       }
     }
   }
+};
+const patchMFConfig = (mfConfig, isServer) => {
+  const isDev = process.env.NODE_ENV === "development";
+  const runtimePlugins = [
+    ...mfConfig.runtimePlugins || []
+  ];
+  patchDTSConfig(mfConfig, isServer);
   injectRuntimePlugins(import_path.default.resolve(__dirname, "./mfRuntimePlugins/shared-strategy.js"), runtimePlugins);
   if (isDev) {
     injectRuntimePlugins(import_path.default.resolve(__dirname, "./mfRuntimePlugins/resolve-entry-ipv4.js"), runtimePlugins);
@@ -178,7 +184,7 @@ function patchWebpackConfig(options) {
   }
   if (!isServer && enableSSR && typeof ((_bundlerConfig_optimization1 = bundlerConfig.optimization) === null || _bundlerConfig_optimization1 === void 0 ? void 0 : _bundlerConfig_optimization1.splitChunks) === "object" && bundlerConfig.optimization.splitChunks.cacheGroups) {
     bundlerConfig.optimization.splitChunks.chunks = "async";
-    console.warn('[Modern.js Module Federation] splitChunks.chunks = async is not allowed with stream SSR mode, it will auto changed to "async"');
+    console.warn(`${import_constant.PLUGIN_IDENTIFIER} splitChunks.chunks = async is not allowed with stream SSR mode, it will auto changed to "async"`);
   }
   if (((_bundlerConfig_output = bundlerConfig.output) === null || _bundlerConfig_output === void 0 ? void 0 : _bundlerConfig_output.publicPath) === "auto") {
     var _modernjsConfig_dev, _modernjsConfig_server1;

package/dist/cjs/constant.js

@@ -19,13 +19,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var constant_exports = {};
 __export(constant_exports, {
   LOCALHOST: () => LOCALHOST,
-  MODERN_JS_SERVER_DIR: () => MODERN_JS_SERVER_DIR
+  MODERN_JS_SERVER_DIR: () => MODERN_JS_SERVER_DIR,
+  PLUGIN_IDENTIFIER: () => PLUGIN_IDENTIFIER
 });
 module.exports = __toCommonJS(constant_exports);
 const MODERN_JS_SERVER_DIR = "bundles";
 const LOCALHOST = "localhost";
+const PLUGIN_IDENTIFIER = "[ Modern.js Module Federation ]";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   LOCALHOST,
-  MODERN_JS_SERVER_DIR
+  MODERN_JS_SERVER_DIR,
+  PLUGIN_IDENTIFIER
 });

package/dist/esm/cli/index.js

@@ -7,7 +7,7 @@ import { ModuleFederationPlugin as RspackModuleFederationPlugin } from "@module-
 import { StreamingTargetPlugin, EntryChunkTrackerPlugin } from "@module-federation/node";
 import { getMFConfig, getTargetEnvConfig, patchWebpackConfig, getIPV4 } from "./utils";
 import { updateStatsAndManifest } from "./manifest";
-import { MODERN_JS_SERVER_DIR } from "../constant";
+import { MODERN_JS_SERVER_DIR, PLUGIN_IDENTIFIER } from "../constant";
 var SSR_PLUGIN_IDENTIFIER = "mfPluginSSR";
 var isDev = process.env.NODE_ENV === "development";
 var moduleFederationPlugin = function() {
@@ -36,135 +36,130 @@ var moduleFederationPlugin = function() {
                   config: /* @__PURE__ */ _async_to_generator(function() {
                     var _modernjsConfig_dev, bundlerType, WebpackPluginConstructor, RspackPluginConstructor, MFBundlerPlugin, modifyBundlerConfig, ipv4;
                     return _ts_generator(this, function(_state2) {
-                      switch (_state2.label) {
-                        case 0:
-                          bundlerType = useAppContext().bundlerType === "rspack" ? "rspack" : "webpack";
-                          WebpackPluginConstructor = userConfig.webpackPluginImplementation || WebpackModuleFederationPlugin;
-                          RspackPluginConstructor = userConfig.rspackPluginImplementation || RspackModuleFederationPlugin;
-                          MFBundlerPlugin = bundlerType === "rspack" ? RspackPluginConstructor : WebpackPluginConstructor;
-                          if (enableSSR) {
-                            process.env["MF_DISABLE_EMIT_STATS"] = "true";
-                            process.env["MF_SSR_PRJ"] = "true";
+                      bundlerType = useAppContext().bundlerType === "rspack" ? "rspack" : "webpack";
+                      WebpackPluginConstructor = userConfig.webpackPluginImplementation || WebpackModuleFederationPlugin;
+                      RspackPluginConstructor = userConfig.rspackPluginImplementation || RspackModuleFederationPlugin;
+                      MFBundlerPlugin = bundlerType === "rspack" ? RspackPluginConstructor : WebpackPluginConstructor;
+                      if (enableSSR) {
+                        process.env["MF_DISABLE_EMIT_STATS"] = "true";
+                        process.env["MF_SSR_PRJ"] = "true";
+                      }
+                      modifyBundlerConfig = function(config, isServer) {
+                        var envConfig = getTargetEnvConfig(mfConfig, isServer);
+                        if (isServer) {
+                          var _config_plugins, _config_plugins1;
+                          nodePlugin = new MFBundlerPlugin(envConfig);
+                          (_config_plugins = config.plugins) === null || _config_plugins === void 0 ? void 0 : _config_plugins.push(nodePlugin);
+                          (_config_plugins1 = config.plugins) === null || _config_plugins1 === void 0 ? void 0 : _config_plugins1.push(new StreamingTargetPlugin(envConfig));
+                          if (isDev) {
+                            var _config_plugins2;
+                            (_config_plugins2 = config.plugins) === null || _config_plugins2 === void 0 ? void 0 : _config_plugins2.push(new EntryChunkTrackerPlugin());
                           }
-                          modifyBundlerConfig = function(config, isServer) {
-                            var envConfig = getTargetEnvConfig(mfConfig, isServer);
-                            if (isServer) {
-                              var _config_plugins, _config_plugins1;
-                              nodePlugin = new MFBundlerPlugin(envConfig);
-                              (_config_plugins = config.plugins) === null || _config_plugins === void 0 ? void 0 : _config_plugins.push(nodePlugin);
-                              (_config_plugins1 = config.plugins) === null || _config_plugins1 === void 0 ? void 0 : _config_plugins1.push(new StreamingTargetPlugin(envConfig));
-                              if (isDev) {
-                                var _config_plugins2;
-                                (_config_plugins2 = config.plugins) === null || _config_plugins2 === void 0 ? void 0 : _config_plugins2.push(new EntryChunkTrackerPlugin());
+                        } else {
+                          var _config_output, _config_plugins3;
+                          outputDir = ((_config_output = config.output) === null || _config_output === void 0 ? void 0 : _config_output.path) || path.resolve(process.cwd(), "dist");
+                          browserPlugin = new MFBundlerPlugin(envConfig);
+                          (_config_plugins3 = config.plugins) === null || _config_plugins3 === void 0 ? void 0 : _config_plugins3.push(browserPlugin);
+                        }
+                        patchWebpackConfig({
+                          bundlerConfig: config,
+                          isServer,
+                          modernjsConfig,
+                          mfConfig: envConfig
+                        });
+                      };
+                      ipv4 = getIPV4();
+                      return [
+                        2,
+                        {
+                          tools: {
+                            rspack: function rspack(config) {
+                              if (enableSSR) {
+                                throw new Error("".concat(PLUGIN_IDENTIFIER, " not support ssr for rspack bundler yet!"));
                               }
-                            } else {
-                              var _config_output, _config_plugins3;
-                              outputDir = ((_config_output = config.output) === null || _config_output === void 0 ? void 0 : _config_output.path) || path.resolve(process.cwd(), "dist");
-                              browserPlugin = new MFBundlerPlugin(envConfig);
-                              (_config_plugins3 = config.plugins) === null || _config_plugins3 === void 0 ? void 0 : _config_plugins3.push(browserPlugin);
-                            }
-                            patchWebpackConfig({
-                              bundlerConfig: config,
-                              isServer,
-                              modernjsConfig,
-                              mfConfig: envConfig
-                            });
-                          };
-                          return [
-                            4,
-                            getIPV4()
-                          ];
-                        case 1:
-                          ipv4 = _state2.sent();
-                          return [
-                            2,
-                            {
-                              tools: {
-                                rspack: function rspack(config) {
-                                  modifyBundlerConfig(config, false);
-                                },
-                                webpack: function webpack(config, param2) {
-                                  var isServer = param2.isServer;
-                                  var _modernjsConfig_source;
-                                  modifyBundlerConfig(config, isServer);
-                                  var enableAsyncEntry = (_modernjsConfig_source = modernjsConfig.source) === null || _modernjsConfig_source === void 0 ? void 0 : _modernjsConfig_source.enableAsyncEntry;
-                                  if (!enableAsyncEntry && mfConfig.async !== false) {
-                                    var _config_plugins;
-                                    var asyncBoundaryPluginOptions = typeof mfConfig.async === "object" ? mfConfig.async : {
-                                      eager: function(module) {
-                                        return module && /\.federation/.test((module === null || module === void 0 ? void 0 : module.request) || "");
-                                      },
-                                      excludeChunk: function(chunk) {
-                                        return chunk.name === mfConfig.name;
-                                      }
-                                    };
-                                    (_config_plugins = config.plugins) === null || _config_plugins === void 0 ? void 0 : _config_plugins.push(new AsyncBoundaryPlugin(asyncBoundaryPluginOptions));
-                                  }
-                                  config.ignoreWarnings = config.ignoreWarnings || [];
-                                  config.ignoreWarnings.push(function(warning) {
-                                    if (warning.message.includes("external script")) {
-                                      return true;
-                                    }
-                                    return false;
-                                  });
-                                },
-                                devServer: {
-                                  headers: {
-                                    "Access-Control-Allow-Origin": "*",
-                                    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
-                                    "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
+                              modifyBundlerConfig(config, false);
+                            },
+                            webpack: function webpack(config, param2) {
+                              var isServer = param2.isServer;
+                              var _modernjsConfig_source;
+                              modifyBundlerConfig(config, isServer);
+                              var enableAsyncEntry = (_modernjsConfig_source = modernjsConfig.source) === null || _modernjsConfig_source === void 0 ? void 0 : _modernjsConfig_source.enableAsyncEntry;
+                              if (!enableAsyncEntry && mfConfig.async !== false) {
+                                var _config_plugins;
+                                var asyncBoundaryPluginOptions = typeof mfConfig.async === "object" ? mfConfig.async : {
+                                  eager: function(module) {
+                                    return module && /\.federation/.test((module === null || module === void 0 ? void 0 : module.request) || "");
                                   },
-                                  before: [
-                                    function(req, res, next) {
-                                      if (!enableSSR) {
-                                        next();
-                                        return;
-                                      }
-                                      try {
-                                        var _req_url, _req_url1, _req_url2;
-                                        var SERVER_PREFIX = "/".concat(MODERN_JS_SERVER_DIR);
-                                        if (((_req_url = req.url) === null || _req_url === void 0 ? void 0 : _req_url.startsWith(SERVER_PREFIX)) || ((_req_url1 = req.url) === null || _req_url1 === void 0 ? void 0 : _req_url1.includes(".json")) && !((_req_url2 = req.url) === null || _req_url2 === void 0 ? void 0 : _req_url2.includes("hot-update"))) {
-                                          var filepath = path.join(process.cwd(), "dist".concat(req.url));
-                                          fs.statSync(filepath);
-                                          res.setHeader("Access-Control-Allow-Origin", "*");
-                                          res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, PATCH, OPTIONS");
-                                          res.setHeader("Access-Control-Allow-Headers", "X-Requested-With, content-type, Authorization");
-                                          fs.createReadStream(filepath).pipe(res);
-                                        } else {
-                                          next();
-                                        }
-                                      } catch (err) {
-                                        if (process.env.FEDERATION_DEBUG) {
-                                          console.error(err);
-                                        }
-                                        next();
-                                      }
-                                    }
-                                  ]
-                                },
-                                bundlerChain: function bundlerChain(chain, param2) {
-                                  var isServer = param2.isServer;
-                                  if (isDev && !isServer) {
-                                    chain.externals({
-                                      "@module-federation/node/utils": "NOT_USED_IN_BROWSER"
-                                    });
+                                  excludeChunk: function(chunk) {
+                                    return chunk.name === mfConfig.name;
                                   }
+                                };
+                                (_config_plugins = config.plugins) === null || _config_plugins === void 0 ? void 0 : _config_plugins.push(new AsyncBoundaryPlugin(asyncBoundaryPluginOptions));
+                              }
+                              config.ignoreWarnings = config.ignoreWarnings || [];
+                              config.ignoreWarnings.push(function(warning) {
+                                if (warning.message.includes("external script")) {
+                                  return true;
                                 }
+                                return false;
+                              });
+                            },
+                            devServer: {
+                              headers: {
+                                "Access-Control-Allow-Origin": "*",
+                                "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
+                                "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
                               },
-                              source: {
-                                alias: {
-                                  "@modern-js/runtime/mf": require.resolve("@module-federation/modern-js/runtime")
-                                },
-                                define: {
-                                  FEDERATION_IPV4: JSON.stringify(ipv4)
+                              before: [
+                                function(req, res, next) {
+                                  if (!enableSSR) {
+                                    next();
+                                    return;
+                                  }
+                                  try {
+                                    var _req_url, _req_url1, _req_url2;
+                                    var SERVER_PREFIX = "/".concat(MODERN_JS_SERVER_DIR);
+                                    if (((_req_url = req.url) === null || _req_url === void 0 ? void 0 : _req_url.startsWith(SERVER_PREFIX)) || ((_req_url1 = req.url) === null || _req_url1 === void 0 ? void 0 : _req_url1.includes(".json")) && !((_req_url2 = req.url) === null || _req_url2 === void 0 ? void 0 : _req_url2.includes("hot-update"))) {
+                                      var filepath = path.join(process.cwd(), "dist".concat(req.url));
+                                      fs.statSync(filepath);
+                                      res.setHeader("Access-Control-Allow-Origin", "*");
+                                      res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, PATCH, OPTIONS");
+                                      res.setHeader("Access-Control-Allow-Headers", "X-Requested-With, content-type, Authorization");
+                                      fs.createReadStream(filepath).pipe(res);
+                                    } else {
+                                      next();
+                                    }
+                                  } catch (err) {
+                                    if (process.env.FEDERATION_DEBUG) {
+                                      console.error(err);
+                                    }
+                                    next();
+                                  }
                                 }
-                              },
-                              dev: {
-                                assetPrefix: (modernjsConfig === null || modernjsConfig === void 0 ? void 0 : (_modernjsConfig_dev = modernjsConfig.dev) === null || _modernjsConfig_dev === void 0 ? void 0 : _modernjsConfig_dev.assetPrefix) ? modernjsConfig.dev.assetPrefix : true
+                              ]
+                            },
+                            bundlerChain: function bundlerChain(chain, param2) {
+                              var isServer = param2.isServer;
+                              if (isDev && !isServer) {
+                                chain.externals({
+                                  "@module-federation/node/utils": "NOT_USED_IN_BROWSER"
+                                });
                               }
                             }
-                          ];
-                      }
+                          },
+                          source: {
+                            alias: {
+                              "@modern-js/runtime/mf": require.resolve("@module-federation/modern-js/runtime")
+                            },
+                            define: {
+                              FEDERATION_IPV4: JSON.stringify(ipv4)
+                            }
+                          },
+                          dev: {
+                            assetPrefix: (modernjsConfig === null || modernjsConfig === void 0 ? void 0 : (_modernjsConfig_dev = modernjsConfig.dev) === null || _modernjsConfig_dev === void 0 ? void 0 : _modernjsConfig_dev.assetPrefix) ? modernjsConfig.dev.assetPrefix : true
+                          }
+                        }
+                      ];
                     });
                   }),
                   modifyEntryImports: function modifyEntryImports(param2) {

package/dist/esm/cli/utils.js

@@ -7,7 +7,7 @@ import { encodeName } from "@module-federation/sdk";
 import path from "path";
 import os from "os";
 import { bundle } from "@modern-js/node-bundle-require";
-import { LOCALHOST } from "../constant";
+import { LOCALHOST, PLUGIN_IDENTIFIER } from "../constant";
 var defaultPath = path.resolve(process.cwd(), "module-federation.config.ts");
 var getMFConfig = function() {
   var _ref = _async_to_generator(function(userConfig) {
@@ -103,9 +103,10 @@ var replaceRemoteUrl = function() {
     return _ref.apply(this, arguments);
   };
 }();
-var patchMFConfig = function(mfConfig, isServer) {
-  var isDev = process.env.NODE_ENV === "development";
-  var runtimePlugins = _to_consumable_array(mfConfig.runtimePlugins || []);
+var patchDTSConfig = function(mfConfig, isServer) {
+  if (isServer) {
+    return;
+  }
   var ModernJSRuntime = "@modern-js/runtime/mf";
   if (mfConfig.dts !== false) {
     var _mfConfig_dts, _mfConfig_dts1;
@@ -133,6 +134,11 @@ var patchMFConfig = function(mfConfig, isServer) {
       }
     }
   }
+};
+var patchMFConfig = function(mfConfig, isServer) {
+  var isDev = process.env.NODE_ENV === "development";
+  var runtimePlugins = _to_consumable_array(mfConfig.runtimePlugins || []);
+  patchDTSConfig(mfConfig, isServer);
   injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/shared-strategy.js"), runtimePlugins);
   if (isDev) {
     injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/resolve-entry-ipv4.js"), runtimePlugins);
@@ -184,7 +190,7 @@ function patchWebpackConfig(options) {
   }
   if (!isServer && enableSSR && typeof ((_bundlerConfig_optimization1 = bundlerConfig.optimization) === null || _bundlerConfig_optimization1 === void 0 ? void 0 : _bundlerConfig_optimization1.splitChunks) === "object" && bundlerConfig.optimization.splitChunks.cacheGroups) {
     bundlerConfig.optimization.splitChunks.chunks = "async";
-    console.warn('[Modern.js Module Federation] splitChunks.chunks = async is not allowed with stream SSR mode, it will auto changed to "async"');
+    console.warn("".concat(PLUGIN_IDENTIFIER, ' splitChunks.chunks = async is not allowed with stream SSR mode, it will auto changed to "async"'));
   }
   if (((_bundlerConfig_output = bundlerConfig.output) === null || _bundlerConfig_output === void 0 ? void 0 : _bundlerConfig_output.publicPath) === "auto") {
     var _modernjsConfig_dev, _modernjsConfig_server1;

package/dist/esm/constant.js

@@ -1,6 +1,8 @@
 var MODERN_JS_SERVER_DIR = "bundles";
 var LOCALHOST = "localhost";
+var PLUGIN_IDENTIFIER = "[ Modern.js Module Federation ]";
 export {
   LOCALHOST,
-  MODERN_JS_SERVER_DIR
+  MODERN_JS_SERVER_DIR,
+  PLUGIN_IDENTIFIER
 };

package/dist/esm-node/cli/index.js

@@ -5,7 +5,7 @@ import { ModuleFederationPlugin as RspackModuleFederationPlugin } from "@module-
 import { StreamingTargetPlugin, EntryChunkTrackerPlugin } from "@module-federation/node";
 import { getMFConfig, getTargetEnvConfig, patchWebpackConfig, getIPV4 } from "./utils";
 import { updateStatsAndManifest } from "./manifest";
-import { MODERN_JS_SERVER_DIR } from "../constant";
+import { MODERN_JS_SERVER_DIR, PLUGIN_IDENTIFIER } from "../constant";
 const SSR_PLUGIN_IDENTIFIER = "mfPluginSSR";
 const isDev = process.env.NODE_ENV === "development";
 const moduleFederationPlugin = (userConfig = {}) => ({
@@ -53,10 +53,13 @@ const moduleFederationPlugin = (userConfig = {}) => ({
             mfConfig: envConfig
           });
         };
-        const ipv4 = await getIPV4();
+        const ipv4 = getIPV4();
         return {
           tools: {
             rspack(config) {
+              if (enableSSR) {
+                throw new Error(`${PLUGIN_IDENTIFIER} not support ssr for rspack bundler yet!`);
+              }
               modifyBundlerConfig(config, false);
             },
             webpack(config, { isServer }) {

package/dist/esm-node/cli/utils.js

@@ -2,7 +2,7 @@ import { encodeName } from "@module-federation/sdk";
 import path from "path";
 import os from "os";
 import { bundle } from "@modern-js/node-bundle-require";
-import { LOCALHOST } from "../constant";
+import { LOCALHOST, PLUGIN_IDENTIFIER } from "../constant";
 const defaultPath = path.resolve(process.cwd(), "module-federation.config.ts");
 const getMFConfig = async (userConfig) => {
   const { config, configPath } = userConfig;
@@ -53,11 +53,10 @@ const replaceRemoteUrl = async (mfConfig) => {
     handleRemoteObject(mfConfig.remotes);
   }
 };
-const patchMFConfig = (mfConfig, isServer) => {
-  const isDev = process.env.NODE_ENV === "development";
-  const runtimePlugins = [
-    ...mfConfig.runtimePlugins || []
-  ];
+const patchDTSConfig = (mfConfig, isServer) => {
+  if (isServer) {
+    return;
+  }
   const ModernJSRuntime = "@modern-js/runtime/mf";
   if (mfConfig.dts !== false) {
     var _mfConfig_dts, _mfConfig_dts1;
@@ -85,6 +84,13 @@ const patchMFConfig = (mfConfig, isServer) => {
       }
     }
   }
+};
+const patchMFConfig = (mfConfig, isServer) => {
+  const isDev = process.env.NODE_ENV === "development";
+  const runtimePlugins = [
+    ...mfConfig.runtimePlugins || []
+  ];
+  patchDTSConfig(mfConfig, isServer);
   injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/shared-strategy.js"), runtimePlugins);
   if (isDev) {
     injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/resolve-entry-ipv4.js"), runtimePlugins);
@@ -141,7 +147,7 @@ function patchWebpackConfig(options) {
   }
   if (!isServer && enableSSR && typeof ((_bundlerConfig_optimization1 = bundlerConfig.optimization) === null || _bundlerConfig_optimization1 === void 0 ? void 0 : _bundlerConfig_optimization1.splitChunks) === "object" && bundlerConfig.optimization.splitChunks.cacheGroups) {
     bundlerConfig.optimization.splitChunks.chunks = "async";
-    console.warn('[Modern.js Module Federation] splitChunks.chunks = async is not allowed with stream SSR mode, it will auto changed to "async"');
+    console.warn(`${PLUGIN_IDENTIFIER} splitChunks.chunks = async is not allowed with stream SSR mode, it will auto changed to "async"`);
   }
   if (((_bundlerConfig_output = bundlerConfig.output) === null || _bundlerConfig_output === void 0 ? void 0 : _bundlerConfig_output.publicPath) === "auto") {
     var _modernjsConfig_dev, _modernjsConfig_server1;

package/dist/esm-node/constant.js

@@ -1,6 +1,8 @@
 const MODERN_JS_SERVER_DIR = "bundles";
 const LOCALHOST = "localhost";
+const PLUGIN_IDENTIFIER = "[ Modern.js Module Federation ]";
 export {
   LOCALHOST,
-  MODERN_JS_SERVER_DIR
+  MODERN_JS_SERVER_DIR,
+  PLUGIN_IDENTIFIER
 };

package/dist/types/cli/utils.d.ts

@@ -14,6 +14,7 @@ export declare const patchMFConfig: (mfConfig: moduleFederationPlugin.ModuleFede
     runtime?: moduleFederationPlugin.EntryRuntime | undefined;
     shareScope?: string | undefined;
     shared?: moduleFederationPlugin.Shared | undefined;
+    getPublicPath?: string | undefined;
     implementation?: string | undefined;
     manifest?: boolean | moduleFederationPlugin.PluginManifestOptions | undefined;
     dev?: boolean | moduleFederationPlugin.PluginDevOptions | undefined;
@@ -31,6 +32,7 @@ export declare function getTargetEnvConfig(mfConfig: moduleFederationPlugin.Modu
     runtime?: moduleFederationPlugin.EntryRuntime | undefined;
     shareScope?: string | undefined;
     shared?: moduleFederationPlugin.Shared | undefined;
+    getPublicPath?: string | undefined;
     implementation?: string | undefined;
     manifest?: boolean | moduleFederationPlugin.PluginManifestOptions | undefined;
     dev?: boolean | moduleFederationPlugin.PluginDevOptions | undefined;

package/dist/types/constant.d.ts

@@ -1,2 +1,3 @@
 export declare const MODERN_JS_SERVER_DIR = "bundles";
 export declare const LOCALHOST = "localhost";
+export declare const PLUGIN_IDENTIFIER = "[ Modern.js Module Federation ]";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/modern-js",
-  "version": "0.0.0-next-20240624115757",
+  "version": "0.0.0-next-20240625070454",
   "files": [
     "dist/",
     "types.d.ts",
@@ -43,21 +43,21 @@
   "license": "MIT",
   "dependencies": {
     "@swc/helpers": "0.5.3",
-    "@modern-js/utils": "^2.49.2",
-    "@modern-js/node-bundle-require": "^2.49.2",
+    "@modern-js/utils": "^2.54.2",
+    "@modern-js/node-bundle-require": "^2.54.2",
     "node-fetch": "~3.3.0",
     "react-error-boundary": "4.0.13",
-    "@module-federation/sdk": "0.0.0-next-20240624115757",
-    "@module-federation/enhanced": "0.0.0-next-20240624115757",
-    "@module-federation/node": "0.0.0-next-20240624115757"
+    "@module-federation/sdk": "0.0.0-next-20240625070454",
+    "@module-federation/enhanced": "0.0.0-next-20240625070454",
+    "@module-federation/node": "0.0.0-next-20240625070454"
   },
   "devDependencies": {
-    "@modern-js/app-tools": "^2.49.2",
-    "@modern-js/core": "^2.49.2",
-    "@modern-js/runtime": "^2.49.2",
-    "@modern-js/module-tools": "^2.35.0",
-    "@modern-js/tsconfig": "^2.35.0",
-    "@module-federation/manifest": "0.0.0-next-20240624115757"
+    "@modern-js/app-tools": "^2.54.2",
+    "@modern-js/core": "^2.54.2",
+    "@modern-js/runtime": "^2.54.2",
+    "@modern-js/module-tools": "^2.54.2",
+    "@modern-js/tsconfig": "^2.54.2",
+    "@module-federation/manifest": "0.0.0-next-20240625070454"
   },
   "peerDependencies": {
     "react": ">=17",