@module-federation/modern-js 0.0.0-next-20250708121428 → 0.0.0-next-20250709032753

package/dist/esm-node/cli/server/data-fetch-server-plugin.js

@@ -1,4 +1,145 @@
-import dataFetchMiddleWare from "@module-federation/bridge-react/data-fetch-server-middleware";
+import { DATA_FETCH_QUERY, MF_DATA_FETCH_STATUS } from "../../constant";
+import logger from "../../logger";
+import { getDataFetchMap } from "../../utils";
+import { fetchData, initDataFetchMap, loadDataFetchModule } from "../../utils/dataFetch";
+import { SEPARATOR, MANIFEST_EXT } from "@module-federation/sdk";
+function wrapSetTimeout(targetPromise, delay = 2e4, id) {
+  if (targetPromise && typeof targetPromise.then === "function") {
+    return new Promise((resolve, reject) => {
+      const timeoutId = setTimeout(() => {
+        logger.warn(`Data fetch for ID ${id} timed out after 20 seconds.`);
+        reject(new Error(`Data fetch for ID ${id} timed out after 20 seconds`));
+      }, delay);
+      targetPromise.then((value) => {
+        clearTimeout(timeoutId);
+        resolve(value);
+      }).catch((err) => {
+        clearTimeout(timeoutId);
+        reject(err);
+      });
+    });
+  }
+}
+function addProtocol(url) {
+  if (url.startsWith("//")) {
+    return "https:" + url;
+  }
+  return url;
+}
+const getDecodeQuery = (url, name) => {
+  const res = url.searchParams.get(name);
+  if (!res) {
+    return null;
+  }
+  return decodeURIComponent(res);
+};
+const middleware = async (ctx, next) => {
+  var _globalThis___FEDERATION__;
+  let url;
+  let dataFetchId;
+  let params;
+  let remoteInfo;
+  try {
+    url = new URL(ctx.req.url);
+    dataFetchId = getDecodeQuery(url, DATA_FETCH_QUERY);
+    params = JSON.parse(getDecodeQuery(url, "params") || "{}");
+    const remoteInfoQuery = getDecodeQuery(url, "remoteInfo");
+    remoteInfo = remoteInfoQuery ? JSON.parse(remoteInfoQuery) : null;
+  } catch (e) {
+    logger.error("fetch data from server, error: ", e);
+    return next();
+  }
+  if (!dataFetchId) {
+    return next();
+  }
+  logger.log("fetch data from server, dataFetchId: ", dataFetchId);
+  logger.debug("fetch data from server, moduleInfo: ", (_globalThis___FEDERATION__ = globalThis.__FEDERATION__) === null || _globalThis___FEDERATION__ === void 0 ? void 0 : _globalThis___FEDERATION__.moduleInfo);
+  try {
+    var _dataFetchMap_dataFetchId, _dataFetchMap_dataFetchId1;
+    const dataFetchMap = getDataFetchMap();
+    if (!dataFetchMap) {
+      initDataFetchMap();
+    }
+    const fetchDataPromise = (_dataFetchMap_dataFetchId = dataFetchMap[dataFetchId]) === null || _dataFetchMap_dataFetchId === void 0 ? void 0 : _dataFetchMap_dataFetchId[1];
+    logger.debug("fetch data from server, fetchDataPromise: ", fetchDataPromise);
+    if (fetchDataPromise && ((_dataFetchMap_dataFetchId1 = dataFetchMap[dataFetchId]) === null || _dataFetchMap_dataFetchId1 === void 0 ? void 0 : _dataFetchMap_dataFetchId1[2]) !== MF_DATA_FETCH_STATUS.ERROR) {
+      const targetPromise = fetchDataPromise[0];
+      const wrappedPromise = wrapSetTimeout(targetPromise, 2e4, dataFetchId);
+      if (wrappedPromise) {
+        const res = await wrappedPromise;
+        logger.log("fetch data from server, fetchDataPromise res: ", res);
+        return ctx.json(res);
+      }
+      logger.error(`Expected a Promise from fetchDataPromise[0] for dataFetchId ${dataFetchId}, but received:`, targetPromise, "Will try call new dataFetch again...");
+    }
+    if (remoteInfo) {
+      try {
+        const hostInstance2 = globalThis.__FEDERATION__.__INSTANCES__[0];
+        const remoteEntry = `${addProtocol(remoteInfo.ssrPublicPath) + remoteInfo.ssrRemoteEntry}`;
+        if (!hostInstance2) {
+          throw new Error("host instance not found!");
+        }
+        const remote = hostInstance2.options.remotes.find((remote2) => remote2.name === remoteInfo.name);
+        logger.debug("find remote: ", JSON.stringify(remote));
+        if (!remote) {
+          hostInstance2.registerRemotes([
+            {
+              name: remoteInfo.name,
+              entry: remoteEntry,
+              entryGlobalName: remoteInfo.globalName
+            }
+          ]);
+        } else if (!("entry" in remote) || !remote.entry.includes(MANIFEST_EXT)) {
+          const { hostGlobalSnapshot, remoteSnapshot } = hostInstance2.snapshotHandler.getGlobalRemoteInfo(remoteInfo);
+          logger.debug("find hostGlobalSnapshot: ", JSON.stringify(hostGlobalSnapshot));
+          logger.debug("find remoteSnapshot: ", JSON.stringify(remoteSnapshot));
+          if (!hostGlobalSnapshot || !remoteSnapshot) {
+            if ("version" in remote) {
+              delete remote.version;
+            }
+            remote.entry = remoteEntry;
+            remote.entryGlobalName = remoteInfo.globalName;
+          }
+        }
+      } catch (e) {
+        ctx.status(500);
+        return ctx.text(`failed to fetch ${remoteInfo.name} data, error:
+ ${e}`);
+      }
+    }
+    const dataFetchItem = dataFetchMap[dataFetchId];
+    logger.debug("fetch data from server, dataFetchItem: ", dataFetchItem);
+    if (dataFetchItem) {
+      const callFetchDataPromise = fetchData(dataFetchId, {
+        ...params,
+        isDowngrade: !remoteInfo
+      });
+      const wrappedPromise = wrapSetTimeout(callFetchDataPromise, 2e4, dataFetchId);
+      if (wrappedPromise) {
+        const res = await wrappedPromise;
+        logger.log("fetch data from server, dataFetchItem res: ", res);
+        return ctx.json(res);
+      }
+    }
+    const remoteId = dataFetchId.split(SEPARATOR)[0];
+    const hostInstance = globalThis.__FEDERATION__.__INSTANCES__[0];
+    if (!hostInstance) {
+      throw new Error("host instance not found!");
+    }
+    const dataFetchFn = await loadDataFetchModule(hostInstance, remoteId);
+    const data = await dataFetchFn({
+      ...params,
+      isDowngrade: !remoteInfo
+    });
+    logger.log("fetch data from server, loadDataFetchModule res: ", data);
+    return ctx.json(data);
+  } catch (e) {
+    logger.error("server plugin data fetch error: ", e);
+    ctx.status(500);
+    return ctx.text(`failed to fetch ${remoteInfo.name} data, error:
+ ${e}`);
+  }
+};
 const dataFetchServePlugin = () => ({
   name: "mf-data-fetch-server-plugin",
   setup: (api) => {
@@ -7,7 +148,7 @@ const dataFetchServePlugin = () => ({
       middlewares.push({
         name: "module-federation-serve-manifest",
         // @ts-ignore type error
-        handler: dataFetchMiddleWare
+        handler: middleware
       });
     });
   }

package/dist/esm-node/constant.js

@@ -1,6 +1,42 @@
 const LOCALHOST = "localhost";
 const PLUGIN_IDENTIFIER = "[ Modern.js Module Federation ]";
+const DATA_FETCH_QUERY = "x-mf-data-fetch";
+const DATA_FETCH_ERROR_PREFIX = "caught the following error during dataFetch: ";
+const LOAD_REMOTE_ERROR_PREFIX = "caught the following error during loadRemote: ";
+const DOWNGRADE_KEY = "_mfSSRDowngrade";
+const DATA_FETCH_MAP_KEY = "__MF_DATA_FETCH_MAP__";
+const DATA_FETCH_FUNCTION = "_mfDataFetch";
+const FS_HREF = "_mfFSHref";
+const ERROR_TYPE = {
+  DATA_FETCH: 1,
+  LOAD_REMOTE: 2,
+  UNKNOWN: 3
+};
+const WRAP_DATA_FETCH_ID_IDENTIFIER = "wrap_dfip_identifier";
+var MF_DATA_FETCH_TYPE;
+(function(MF_DATA_FETCH_TYPE2) {
+  MF_DATA_FETCH_TYPE2[MF_DATA_FETCH_TYPE2["FETCH_SERVER"] = 1] = "FETCH_SERVER";
+  MF_DATA_FETCH_TYPE2[MF_DATA_FETCH_TYPE2["FETCH_CLIENT"] = 2] = "FETCH_CLIENT";
+})(MF_DATA_FETCH_TYPE || (MF_DATA_FETCH_TYPE = {}));
+var MF_DATA_FETCH_STATUS;
+(function(MF_DATA_FETCH_STATUS2) {
+  MF_DATA_FETCH_STATUS2[MF_DATA_FETCH_STATUS2["LOADED"] = 1] = "LOADED";
+  MF_DATA_FETCH_STATUS2[MF_DATA_FETCH_STATUS2["LOADING"] = 2] = "LOADING";
+  MF_DATA_FETCH_STATUS2[MF_DATA_FETCH_STATUS2["AWAIT"] = 0] = "AWAIT";
+  MF_DATA_FETCH_STATUS2[MF_DATA_FETCH_STATUS2["ERROR"] = 3] = "ERROR";
+})(MF_DATA_FETCH_STATUS || (MF_DATA_FETCH_STATUS = {}));
 export {
+  DATA_FETCH_ERROR_PREFIX,
+  DATA_FETCH_FUNCTION,
+  DATA_FETCH_MAP_KEY,
+  DATA_FETCH_QUERY,
+  DOWNGRADE_KEY,
+  ERROR_TYPE,
+  FS_HREF,
+  LOAD_REMOTE_ERROR_PREFIX,
   LOCALHOST,
-  PLUGIN_IDENTIFIER
+  MF_DATA_FETCH_STATUS,
+  MF_DATA_FETCH_TYPE,
+  PLUGIN_IDENTIFIER,
+  WRAP_DATA_FETCH_ID_IDENTIFIER
 };

package/dist/esm-node/runtime/AwaitDataFetch.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Suspense, useRef } from "react";
+import logger from "../logger";
+import { DATA_FETCH_ERROR_PREFIX, LOAD_REMOTE_ERROR_PREFIX, ERROR_TYPE, DATA_FETCH_FUNCTION } from "../constant";
+import { getDataFetchIdWithErrorMsgs, wrapDataFetchId } from "../utils";
+function isPromise(obj) {
+  return !!obj && (typeof obj === "object" || typeof obj === "function") && typeof obj.then === "function";
+}
+const AWAIT_ERROR_PREFIX = "<Await /> caught the following error during render: ";
+const transformError = (err) => {
+  const errMsg = err instanceof Error ? err.message : err;
+  const originalMsg = errMsg.replace(AWAIT_ERROR_PREFIX, "");
+  const dataFetchMapKey = getDataFetchIdWithErrorMsgs(originalMsg);
+  if (originalMsg.indexOf(DATA_FETCH_ERROR_PREFIX) === 0) {
+    return {
+      error: new Error(originalMsg.replace(DATA_FETCH_ERROR_PREFIX, "").replace(wrapDataFetchId(dataFetchMapKey), "")),
+      errorType: ERROR_TYPE.DATA_FETCH,
+      dataFetchMapKey
+    };
+  }
+  if (originalMsg.indexOf(LOAD_REMOTE_ERROR_PREFIX) === 0) {
+    return {
+      error: new Error(originalMsg.replace(LOAD_REMOTE_ERROR_PREFIX, "").replace(wrapDataFetchId(dataFetchMapKey), "")),
+      errorType: ERROR_TYPE.LOAD_REMOTE,
+      dataFetchMapKey
+    };
+  }
+  return {
+    error: new Error(originalMsg.replace(wrapDataFetchId(dataFetchMapKey), "")),
+    errorType: ERROR_TYPE.UNKNOWN,
+    dataFetchMapKey
+  };
+};
+const DefaultLoading = /* @__PURE__ */ _jsx(_Fragment, {});
+const DefaultErrorElement = (_data) => /* @__PURE__ */ _jsx("div", {
+  children: "Error"
+});
+function AwaitDataFetch({ resolve, loading = DefaultLoading, errorElement = DefaultErrorElement, children, params }) {
+  const dataRef = useRef(void 0);
+  const data = dataRef.current || resolve;
+  const getData = isPromise(data) ? fetchData(data, dataRef) : () => data;
+  return /* @__PURE__ */ _jsx(AwaitSuspense, {
+    params,
+    loading,
+    errorElement,
+    // @ts-ignore
+    resolve: getData,
+    children
+  });
+}
+function AwaitSuspense({ resolve, children, loading = DefaultLoading, errorElement = DefaultErrorElement }) {
+  return /* @__PURE__ */ _jsx(Suspense, {
+    fallback: loading,
+    children: /* @__PURE__ */ _jsx(ResolveAwait, {
+      resolve,
+      errorElement,
+      children
+    })
+  });
+}
+function ResolveAwait({ children, resolve, errorElement, params }) {
+  const data = resolve();
+  logger.debug("resolve data: ", data);
+  if (typeof data === "string" && data.indexOf(AWAIT_ERROR_PREFIX) === 0) {
+    const transformedError = transformError(data);
+    return /* @__PURE__ */ _jsx(_Fragment, {
+      children: typeof errorElement === "function" ? /* @__PURE__ */ _jsxs(_Fragment, {
+        children: [
+          globalThis.FEDERATION_SSR && /* @__PURE__ */ _jsx("script", {
+            suppressHydrationWarning: true,
+            dangerouslySetInnerHTML: {
+              __html: String.raw`
+                  globalThis['${DATA_FETCH_FUNCTION}'] = globalThis['${DATA_FETCH_FUNCTION}']  || []
+                  globalThis['${DATA_FETCH_FUNCTION}'].push([${transformedError.dataFetchMapKey ? `'${transformedError.dataFetchMapKey}'` : ""},${params ? JSON.stringify(params) : null},true]);`
+            }
+          }),
+          errorElement(transformedError)
+        ]
+      }) : errorElement
+    });
+  }
+  const toRender = typeof children === "function" ? children(data) : children;
+  return /* @__PURE__ */ _jsx(_Fragment, {
+    children: toRender
+  });
+}
+const fetchData = (promise, ref) => {
+  let data;
+  let status = "pending";
+  const suspender = promise.then((res) => {
+    status = "success";
+    data = res;
+    ref.current = res;
+  }).catch((e) => {
+    status = "success";
+    console.warn(e);
+    data = AWAIT_ERROR_PREFIX + e;
+  });
+  return () => {
+    if (status === "pending") {
+      throw suspender;
+    }
+    return data;
+  };
+};
+export {
+  AwaitDataFetch,
+  transformError
+};

package/dist/esm-node/runtime/createRemoteComponent.js

@@ -0,0 +1,291 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
+import logger from "../logger";
+import { getInstance } from "@module-federation/enhanced/runtime";
+import { AwaitDataFetch, transformError } from "./AwaitDataFetch";
+import { fetchData, getDataFetchItem, getDataFetchMapKey } from "../utils/dataFetch";
+import { getDataFetchInfo, getLoadedRemoteInfos, setDataFetchItemLoadedStatus, wrapDataFetchId } from "../utils";
+import { DATA_FETCH_ERROR_PREFIX, DATA_FETCH_FUNCTION, FS_HREF, LOAD_REMOTE_ERROR_PREFIX, MF_DATA_FETCH_TYPE } from "../constant";
+function getTargetModuleInfo(id) {
+  const instance = getInstance();
+  if (!instance) {
+    return;
+  }
+  const loadedRemoteInfo = getLoadedRemoteInfos(id, instance);
+  if (!loadedRemoteInfo) {
+    return;
+  }
+  const snapshot = loadedRemoteInfo.snapshot;
+  if (!snapshot) {
+    return;
+  }
+  const publicPath = "publicPath" in snapshot ? snapshot.publicPath : "getPublicPath" in snapshot ? new Function(snapshot.getPublicPath)() : "";
+  if (!publicPath) {
+    return;
+  }
+  const modules = "modules" in snapshot ? snapshot.modules : [];
+  const targetModule = modules.find((m) => m.modulePath === loadedRemoteInfo.expose);
+  if (!targetModule) {
+    return;
+  }
+  const remoteEntry = "remoteEntry" in snapshot ? snapshot.remoteEntry : "";
+  if (!remoteEntry) {
+    return;
+  }
+  return {
+    module: targetModule,
+    publicPath,
+    remoteEntry
+  };
+}
+function collectSSRAssets(options) {
+  const { id, injectLink = true, injectScript = false } = typeof options === "string" ? {
+    id: options
+  } : options;
+  const links = [];
+  const scripts = [];
+  const instance = getInstance();
+  if (!instance || !injectLink && !injectScript) {
+    return [
+      ...scripts,
+      ...links
+    ];
+  }
+  const moduleAndPublicPath = getTargetModuleInfo(id);
+  if (!moduleAndPublicPath) {
+    return [
+      ...scripts,
+      ...links
+    ];
+  }
+  const { module: targetModule, publicPath, remoteEntry } = moduleAndPublicPath;
+  if (injectLink) {
+    [
+      ...targetModule.assets.css.sync,
+      ...targetModule.assets.css.async
+    ].sort().forEach((file, index) => {
+      links.push(/* @__PURE__ */ _jsx("link", {
+        href: `${publicPath}${file}`,
+        rel: "stylesheet",
+        type: "text/css"
+      }, `${file.split(".")[0]}_${index}`));
+    });
+  }
+  if (injectScript) {
+    scripts.push(/* @__PURE__ */ _jsx("script", {
+      async: true,
+      src: `${publicPath}${remoteEntry}`,
+      crossOrigin: "anonymous"
+    }, remoteEntry.split(".")[0]));
+    [
+      ...targetModule.assets.js.sync
+    ].sort().forEach((file, index) => {
+      scripts.push(/* @__PURE__ */ _jsx("script", {
+        async: true,
+        src: `${publicPath}${file}`,
+        crossOrigin: "anonymous"
+      }, `${file.split(".")[0]}_${index}`));
+    });
+  }
+  return [
+    ...scripts,
+    ...links
+  ];
+}
+function getServerNeedRemoteInfo(loadedRemoteInfo, id, noSSR) {
+  if (noSSR || typeof window !== "undefined" && window.location.href !== window[FS_HREF]) {
+    var _dataFetchItem_;
+    if (!(loadedRemoteInfo === null || loadedRemoteInfo === void 0 ? void 0 : loadedRemoteInfo.version)) {
+      throw new Error(`${loadedRemoteInfo === null || loadedRemoteInfo === void 0 ? void 0 : loadedRemoteInfo.name} version is empty`);
+    }
+    const { snapshot } = loadedRemoteInfo;
+    if (!snapshot) {
+      throw new Error(`${loadedRemoteInfo === null || loadedRemoteInfo === void 0 ? void 0 : loadedRemoteInfo.name} snapshot is empty`);
+    }
+    const dataFetchItem = getDataFetchItem(id);
+    const isFetchServer = (dataFetchItem === null || dataFetchItem === void 0 ? void 0 : (_dataFetchItem_ = dataFetchItem[0]) === null || _dataFetchItem_ === void 0 ? void 0 : _dataFetchItem_[1]) === MF_DATA_FETCH_TYPE.FETCH_SERVER;
+    if (isFetchServer && (!("ssrPublicPath" in snapshot) || !snapshot.ssrPublicPath)) {
+      throw new Error(`ssrPublicPath is required while fetching ${loadedRemoteInfo === null || loadedRemoteInfo === void 0 ? void 0 : loadedRemoteInfo.name} data in SSR project!`);
+    }
+    if (isFetchServer && (!("ssrRemoteEntry" in snapshot) || !snapshot.ssrRemoteEntry)) {
+      throw new Error(`ssrRemoteEntry is required while loading ${loadedRemoteInfo === null || loadedRemoteInfo === void 0 ? void 0 : loadedRemoteInfo.name} data loader in SSR project!`);
+    }
+    return {
+      name: loadedRemoteInfo.name,
+      version: loadedRemoteInfo.version,
+      ssrPublicPath: "ssrPublicPath" in snapshot ? snapshot.ssrPublicPath || "" : "",
+      ssrRemoteEntry: "ssrRemoteEntry" in snapshot ? snapshot.ssrRemoteEntry || "" : "",
+      globalName: loadedRemoteInfo.entryGlobalName
+    };
+  }
+  return;
+}
+function createRemoteComponent(options) {
+  const exportName = (options === null || options === void 0 ? void 0 : options.export) || "default";
+  const callLoader = async () => {
+    logger.debug("callLoader start", Date.now());
+    const m = await options.loader();
+    logger.debug("callLoader end", Date.now());
+    if (!m) {
+      throw new Error("load remote failed");
+    }
+    return m;
+  };
+  const getData = async (noSSR) => {
+    let loadedRemoteInfo;
+    let moduleId;
+    const instance = getInstance();
+    try {
+      const m = await callLoader();
+      moduleId = m && m[Symbol.for("mf_module_id")];
+      if (!moduleId) {
+        throw new Error("moduleId is empty");
+      }
+      loadedRemoteInfo = getLoadedRemoteInfos(moduleId, instance);
+      if (!loadedRemoteInfo) {
+        throw new Error(`can not find loaded remote('${moduleId}') info!`);
+      }
+    } catch (e) {
+      const errMsg = `${LOAD_REMOTE_ERROR_PREFIX}${e}`;
+      logger.debug(e);
+      throw new Error(errMsg);
+    }
+    let dataFetchMapKey;
+    try {
+      dataFetchMapKey = getDataFetchMapKey(getDataFetchInfo({
+        name: loadedRemoteInfo.name,
+        alias: loadedRemoteInfo.alias,
+        id: moduleId,
+        remoteSnapshot: loadedRemoteInfo.snapshot
+      }), {
+        name: instance.name,
+        version: instance === null || instance === void 0 ? void 0 : instance.options.version
+      });
+      logger.debug("getData dataFetchMapKey: ", dataFetchMapKey);
+      if (!dataFetchMapKey) {
+        return;
+      }
+      const data = await fetchData(dataFetchMapKey, {
+        ...options.dataFetchParams,
+        isDowngrade: false
+      }, getServerNeedRemoteInfo(loadedRemoteInfo, dataFetchMapKey, noSSR));
+      setDataFetchItemLoadedStatus(dataFetchMapKey);
+      logger.debug("get data res: \n", data);
+      return data;
+    } catch (err) {
+      const errMsg = `${DATA_FETCH_ERROR_PREFIX}${wrapDataFetchId(dataFetchMapKey)}${err}`;
+      logger.debug(errMsg);
+      throw new Error(errMsg);
+    }
+  };
+  const LazyComponent = /* @__PURE__ */ React.lazy(async () => {
+    const m = await callLoader();
+    const moduleId = m && m[Symbol.for("mf_module_id")];
+    const instance = getInstance();
+    const loadedRemoteInfo = getLoadedRemoteInfos(moduleId, instance);
+    loadedRemoteInfo === null || loadedRemoteInfo === void 0 ? void 0 : loadedRemoteInfo.snapshot;
+    const dataFetchMapKey = loadedRemoteInfo ? getDataFetchMapKey(getDataFetchInfo({
+      name: loadedRemoteInfo.name,
+      alias: loadedRemoteInfo.alias,
+      id: moduleId,
+      remoteSnapshot: loadedRemoteInfo.snapshot
+    }), {
+      name: instance.name,
+      version: instance === null || instance === void 0 ? void 0 : instance.options.version
+    }) : void 0;
+    logger.debug("LazyComponent dataFetchMapKey: ", dataFetchMapKey);
+    const assets = collectSSRAssets({
+      id: moduleId
+    });
+    const Com = m[exportName];
+    if (exportName in m && typeof Com === "function") {
+      return {
+        default: (props) => /* @__PURE__ */ _jsxs(_Fragment, {
+          children: [
+            globalThis.FEDERATION_SSR && dataFetchMapKey && /* @__PURE__ */ _jsx("script", {
+              suppressHydrationWarning: true,
+              dangerouslySetInnerHTML: {
+                __html: String.raw`
+                  globalThis['${DATA_FETCH_FUNCTION}'] = globalThis['${DATA_FETCH_FUNCTION}'] || [];
+                  globalThis['${DATA_FETCH_FUNCTION}'].push(['${dataFetchMapKey}',${JSON.stringify(props.mfData)}]);
+                  `
+              }
+            }),
+            globalThis.FEDERATION_SSR && assets,
+            /* @__PURE__ */ _jsx(Com, {
+              ...props
+            })
+          ]
+        })
+      };
+    } else {
+      throw Error(`Make sure that ${moduleId} has the correct export when export is ${String(exportName)}`);
+    }
+  });
+  return (props) => {
+    const { key, ...args } = props;
+    if (globalThis.FEDERATION_SSR && !options.noSSR) {
+      const { key: key2, ...args2 } = props;
+      return /* @__PURE__ */ _jsx(AwaitDataFetch, {
+        resolve: getData(options.noSSR),
+        loading: options.loading,
+        errorElement: options.fallback,
+        children: (data) => /* @__PURE__ */ _jsx(LazyComponent, {
+          ...args2,
+          mfData: data
+        })
+      });
+    } else {
+      const [data, setData] = useState(null);
+      const [loading, setLoading] = useState(true);
+      const [error, setError] = useState(null);
+      useEffect(() => {
+        let isMounted = true;
+        const fetchDataAsync = async () => {
+          try {
+            setLoading(true);
+            const result = await getData(options.noSSR);
+            if (isMounted) {
+              setData(result);
+            }
+          } catch (e) {
+            if (isMounted) {
+              setError(transformError(e));
+            }
+          } finally {
+            if (isMounted) {
+              setLoading(false);
+            }
+          }
+        };
+        fetchDataAsync();
+        return () => {
+          isMounted = false;
+        };
+      }, []);
+      if (loading) {
+        return /* @__PURE__ */ _jsx(_Fragment, {
+          children: options.loading
+        });
+      }
+      if (error) {
+        return /* @__PURE__ */ _jsx(_Fragment, {
+          children: typeof options.fallback === "function" ? options.fallback(error) : options.fallback
+        });
+      }
+      return /* @__PURE__ */ _jsx(LazyComponent, {
+        ...args,
+        mfData: data
+      });
+    }
+  };
+}
+function createRemoteSSRComponent(options) {
+  logger.warn("createRemoteSSRComponent is deprecated, please use createRemoteComponent instead!");
+  return createRemoteComponent(options);
+}
+export {
+  collectSSRAssets,
+  createRemoteComponent,
+  createRemoteSSRComponent
+};

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

@@ -1 +1,22 @@
 export * from "@module-federation/enhanced/runtime";
+import { ERROR_TYPE } from "../constant";
+const kit = {
+  get createRemoteSSRComponent() {
+    return require("./createRemoteComponent").createRemoteSSRComponent;
+  },
+  get createRemoteComponent() {
+    return require("./createRemoteComponent").createRemoteComponent;
+  },
+  get collectSSRAssets() {
+    return require("./createRemoteComponent").collectSSRAssets;
+  },
+  get wrapNoSSR() {
+    return require("./wrapNoSSR").wrapNoSSR;
+  }
+};
+import { setSSREnv } from "../ssr-runtime/injectDataFetchFunctionPlugin";
+export {
+  ERROR_TYPE,
+  kit,
+  setSSREnv
+};

package/dist/esm-node/runtime/wrapNoSSR.js

@@ -0,0 +1,11 @@
+function wrapNoSSR(createComponentFn) {
+  return (options) => {
+    return createComponentFn({
+      ...options,
+      noSSR: true
+    });
+  };
+}
+export {
+  wrapNoSSR
+};

package/dist/esm-node/ssr-runtime/devPlugin.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { SSRLiveReload } from "./SSRLiveReload";
-import { flushDataFetch } from "@module-federation/bridge-react/lazy-utils";
+import { flushDataFetch } from "../utils";
 const mfSSRDevPlugin = () => ({
   name: "@module-federation/modern-js",
   setup: (api) => {