@module-federation/bridge-react 2.8.1 → 2.8.2

package/dist/base.cjs.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const createHelpers = require("./createHelpers-19BP0xtB.js");
-const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-DBTxuAYf.js");
+const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-DeTbkGlM.js");
 const lazyUtils = require("./utils-5dGErM3C.js");
 const dataFetchUtils = require("./data-fetch-utils.cjs.js");
-const prefetch = require("./prefetch-QJLnti7A.js");
+const prefetch = require("./prefetch-CfMDdqO-.js");
 const createRemoteAppComponent = createHelpers.createRemoteAppComponentFactory(createHelpers.RemoteAppWrapper);
 const createRemoteComponent = createHelpers.createDeprecatedRemoteComponentFactory(
   createRemoteAppComponent

package/dist/base.es.js

@@ -1,9 +1,9 @@
 import { c as createRemoteAppComponentFactory, a as createDeprecatedRemoteComponentFactory, R as RemoteAppWrapper } from "./createHelpers-BSHeKyd-.mjs";
 import { b } from "./createHelpers-BSHeKyd-.mjs";
-import { a, c, b as b2, l } from "./lazy-load-component-plugin-DlagtX0O.mjs";
+import { a, c, b as b2, l } from "./lazy-load-component-plugin-DQFjLSsW.mjs";
 import { C, a as a2, E, c as c2, b as b3, d, g, r, s } from "./utils-BBP3hEeV.mjs";
 import { callDataFetch } from "./data-fetch-utils.es.js";
-import { p } from "./prefetch-BzCq3MT3.mjs";
+import { p } from "./prefetch-BJZbf9LF.mjs";
 const createRemoteAppComponent = createRemoteAppComponentFactory(RemoteAppWrapper);
 const createRemoteComponent = createDeprecatedRemoteComponentFactory(
   createRemoteAppComponent

package/dist/data-fetch-utils.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const lazyUtils = require("./utils-5dGErM3C.js");
-const prefetch = require("./prefetch-QJLnti7A.js");
+const prefetch = require("./prefetch-CfMDdqO-.js");
 async function callDataFetch() {
   const dataFetch = globalThis[lazyUtils.DATA_FETCH_FUNCTION];
   if (dataFetch) {

package/dist/data-fetch-utils.es.js

@@ -1,7 +1,7 @@
 import { y as DATA_FETCH_FUNCTION } from "./utils-BBP3hEeV.mjs";
 import { C, a, c, b, d, g, r } from "./utils-BBP3hEeV.mjs";
-import { d as dataFetchFunction } from "./prefetch-BzCq3MT3.mjs";
-import { i, p } from "./prefetch-BzCq3MT3.mjs";
+import { d as dataFetchFunction } from "./prefetch-BJZbf9LF.mjs";
+import { i, p } from "./prefetch-BJZbf9LF.mjs";
 async function callDataFetch() {
   const dataFetch = globalThis[DATA_FETCH_FUNCTION];
   if (dataFetch) {

package/dist/data-fetch.cjs.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-DBTxuAYf.js");
+const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-DeTbkGlM.js");
 const lazyUtils = require("./utils-5dGErM3C.js");
 const dataFetchUtils = require("./data-fetch-utils.cjs.js");
-const prefetch = require("./prefetch-QJLnti7A.js");
+const prefetch = require("./prefetch-CfMDdqO-.js");
 exports.autoFetchDataPlugin = lazyLoadComponentPlugin.autoFetchData;
 exports.collectSSRAssets = lazyLoadComponentPlugin.collectSSRAssets;
 exports.createLazyComponent = lazyLoadComponentPlugin.createLazyComponent;

package/dist/data-fetch.es.js

@@ -1,7 +1,7 @@
-import { a, c, b, l } from "./lazy-load-component-plugin-DlagtX0O.mjs";
+import { a, c, b, l } from "./lazy-load-component-plugin-DQFjLSsW.mjs";
 import { C, a as a2, E, c as c2, b as b2, d, f, g, r, s } from "./utils-BBP3hEeV.mjs";
 import { callDataFetch } from "./data-fetch-utils.es.js";
-import { p } from "./prefetch-BzCq3MT3.mjs";
+import { p } from "./prefetch-BJZbf9LF.mjs";
 export {
   C as CacheSize,
   a2 as CacheTime,

package/dist/index.cjs.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const createHelpers = require("./createHelpers-19BP0xtB.js");
-const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-DBTxuAYf.js");
+const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-DeTbkGlM.js");
 const lazyUtils = require("./utils-5dGErM3C.js");
 const dataFetchUtils = require("./data-fetch-utils.cjs.js");
 const React = require("react");
 const ReactRouterDOM = require("react-router-dom");
 const index = require("./index-DbjGCKOr.js");
-const prefetch = require("./prefetch-QJLnti7A.js");
+const prefetch = require("./prefetch-CfMDdqO-.js");
 function _interopNamespaceDefault(e2) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e2) {

package/dist/index.es.js

@@ -1,12 +1,12 @@
 import { R as RemoteAppWrapper, c as createRemoteAppComponentFactory, a as createDeprecatedRemoteComponentFactory } from "./createHelpers-BSHeKyd-.mjs";
 import { b } from "./createHelpers-BSHeKyd-.mjs";
-import { a, c, b as b2, l } from "./lazy-load-component-plugin-DlagtX0O.mjs";
+import { a, c, b as b2, l } from "./lazy-load-component-plugin-DQFjLSsW.mjs";
 import { C, a as a2, E, c as c2, b as b3, d, g, r, s } from "./utils-BBP3hEeV.mjs";
 import { callDataFetch } from "./data-fetch-utils.es.js";
 import React__default, { forwardRef, useContext, useState, useEffect } from "react";
 import * as ReactRouterDOM from "react-router-dom";
 import { p as pathJoin, L as LoggerInstance } from "./index-Bs2NxD2z.mjs";
-import { p } from "./prefetch-BzCq3MT3.mjs";
+import { p } from "./prefetch-BJZbf9LF.mjs";
 function e() {
   const t = new PopStateEvent("popstate", { state: window.history.state });
   window.dispatchEvent(t);

package/dist/lazy/HydratedStylesheetAssets.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare function HydratedStylesheetAssets({ hrefs }: {
+    hrefs: string[];
+}): React.JSX.Element;

package/dist/lazy/createLazyComponent.d.ts

@@ -23,6 +23,6 @@ export type CreateLazyComponentOptions<T, E extends keyof T> = {
 type ReactKey = {
     key?: React.Key | null;
 };
-export declare function collectSSRAssets(options: IProps): ReactNode[];
+export declare function collectSSRAssets(options: IProps): React.ReactNode[];
 export declare function createLazyComponent<T, E extends keyof T>(options: CreateLazyComponentOptions<T, E>): (props: T[E] extends (...args: any) => any ? Parameters<T[E]>[0] extends undefined ? ReactKey : Parameters<T[E]>[0] & ReactKey : ReactKey) => React.JSX.Element;
 export {};

package/dist/{lazy-load-component-plugin-DlagtX0O.mjs → lazy-load-component-plugin-DQFjLSsW.mjs}

@@ -1,6 +1,6 @@
-import { i as injectDataFetch, p as prefetch } from "./prefetch-BzCq3MT3.mjs";
+import { i as injectDataFetch, p as prefetch } from "./prefetch-BJZbf9LF.mjs";
 import { i as initDataFetchMap, k as isDataLoaderExpose, m as getDataFetchInfo, n as getDataFetchMapKey, l as logger, o as getDataFetchItem, p as DATA_FETCH_CLIENT_SUFFIX, q as MF_DATA_FETCH_TYPE, t as isCSROnly, M as MF_DATA_FETCH_STATUS, j as loadDataFetchModule, e as getDataFetchMap, u as isServerEnv, v as getDataFetchIdWithErrorMsgs, w as DATA_FETCH_ERROR_PREFIX, E as ERROR_TYPE, x as wrapDataFetchId, L as LOAD_REMOTE_ERROR_PREFIX, y as DATA_FETCH_FUNCTION, z as getLoadedRemoteInfos, h as fetchData$1, A as setDataFetchItemLoadedStatus, F as FS_HREF } from "./utils-BBP3hEeV.mjs";
-import React__default, { useRef, useState, Suspense, useEffect } from "react";
+import React__default, { useRef, useState, useEffect, Suspense } from "react";
 const autoFetchData = () => {
   initDataFetchMap();
   injectDataFetch();
@@ -69,6 +69,142 @@ const autoFetchData = () => {
     }
   };
 };
+const EMPTY_HREFS = /* @__PURE__ */ new Set();
+const stylesheetStores = /* @__PURE__ */ new WeakMap();
+function isActiveStylesheet(link) {
+  const rel = link.rel.toLowerCase().split(/\s+/u);
+  const media = link.media.trim().toLowerCase();
+  const type = link.type.trim().toLowerCase().split(";", 1)[0].trim();
+  return rel.includes("stylesheet") && !rel.includes("alternate") && !link.disabled && !link.hasAttribute("disabled") && (!media || media === "all") && (!type || type === "text/css");
+}
+function collectHeadStylesheetHrefs(document) {
+  var _a;
+  const hrefs = /* @__PURE__ */ new Set();
+  (_a = document.head) == null ? void 0 : _a.querySelectorAll("link[href]").forEach((link) => {
+    if (isActiveStylesheet(link)) {
+      hrefs.add(link.href);
+    }
+  });
+  return hrefs;
+}
+function haveSameHrefs(current, next) {
+  if (current.size !== next.size) {
+    return false;
+  }
+  for (const href of current) {
+    if (!next.has(href)) {
+      return false;
+    }
+  }
+  return true;
+}
+function observeHead(store) {
+  store.observer.disconnect();
+  const { document, head, observer } = store;
+  if (head) {
+    observer.observe(head, {
+      attributes: true,
+      attributeFilter: ["disabled", "href", "media", "rel", "type"],
+      childList: true,
+      subtree: true
+    });
+  }
+  if (document.documentElement) {
+    observer.observe(document.documentElement, { childList: true });
+  }
+}
+function refreshHeadStylesheets(store) {
+  if (!store.subscribers.size) {
+    return;
+  }
+  const head = store.document.head;
+  if (head !== store.head) {
+    store.head = head;
+    observeHead(store);
+  }
+  const hrefs = collectHeadStylesheetHrefs(store.document);
+  if (haveSameHrefs(store.hrefs, hrefs)) {
+    return;
+  }
+  store.hrefs = hrefs;
+  store.subscribers.forEach((subscriber) => subscriber(hrefs));
+}
+function getStylesheetStore(document) {
+  var _a;
+  const current = stylesheetStores.get(document);
+  if (current) {
+    return current;
+  }
+  const MutationObserver = ((_a = document.defaultView) == null ? void 0 : _a.MutationObserver) ?? globalThis.MutationObserver;
+  let store;
+  const observer = new MutationObserver(() => refreshHeadStylesheets(store));
+  store = {
+    document,
+    head: document.head,
+    hrefs: collectHeadStylesheetHrefs(document),
+    observer,
+    subscribers: /* @__PURE__ */ new Set()
+  };
+  observeHead(store);
+  stylesheetStores.set(document, store);
+  return store;
+}
+function subscribeToHeadStylesheets(document, subscriber) {
+  const store = getStylesheetStore(document);
+  let subscribed = true;
+  store.subscribers.add(subscriber);
+  subscriber(store.hrefs);
+  return () => {
+    if (!subscribed) {
+      return;
+    }
+    subscribed = false;
+    store.subscribers.delete(subscriber);
+    if (!store.subscribers.size) {
+      store.observer.disconnect();
+      if (stylesheetStores.get(document) === store) {
+        stylesheetStores.delete(document);
+      }
+    }
+  };
+}
+function resolveHref(href, document) {
+  try {
+    return new URL(href, document.baseURI).href;
+  } catch {
+    return href;
+  }
+}
+function HydratedStylesheetAssets({ hrefs }) {
+  const firstLinkRef = useRef(null);
+  const ownerDocumentRef = useRef(null);
+  const [headHrefs, setHeadHrefs] = useState(EMPTY_HREFS);
+  useEffect(() => {
+    var _a;
+    const link = firstLinkRef.current;
+    if (!link) {
+      return;
+    }
+    const ownerDocument = link.ownerDocument;
+    ownerDocumentRef.current = ownerDocument;
+    if (link.getRootNode() !== ownerDocument || ((_a = ownerDocument.head) == null ? void 0 : _a.contains(link))) {
+      return;
+    }
+    return subscribeToHeadStylesheets(ownerDocument, setHeadHrefs);
+  }, []);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, hrefs.map(
+    (href, index) => ownerDocumentRef.current && headHrefs.has(resolveHref(href, ownerDocumentRef.current)) ? null : /* @__PURE__ */ React__default.createElement(
+      "link",
+      {
+        key: href,
+        ref: index === 0 ? firstLinkRef : void 0,
+        href,
+        rel: "stylesheet",
+        type: "text/css"
+      }
+    )
+  ));
+}
 function isPromise(obj) {
   return !!obj && (typeof obj === "object" || typeof obj === "function") && typeof obj.then === "function";
 }
@@ -235,65 +371,51 @@ function getTargetModuleInfo(id, instance) {
     remoteEntry
   };
 }
-function collectSSRAssets(options) {
+function collectSSRAssetDescriptors(options) {
   const {
     id,
     injectLink = true,
     injectScript = false
   } = typeof options === "string" ? { id: options } : options;
-  const links = [];
-  const scripts = [];
+  const stylesheetHrefs = [];
+  const scriptSrcs = [];
   const instance = options.instance;
   if (!instance || !injectLink && !injectScript) {
-    return [...scripts, ...links];
+    return { scriptSrcs, stylesheetHrefs };
   }
   const moduleAndPublicPath = getTargetModuleInfo(id, instance);
   if (!moduleAndPublicPath) {
-    return [...scripts, ...links];
+    return { scriptSrcs, stylesheetHrefs };
   }
   const { module: targetModule, publicPath, remoteEntry } = moduleAndPublicPath;
   if (injectLink) {
-    [...targetModule.assets.css.sync, ...targetModule.assets.css.async].sort().forEach((file, index) => {
-      links.push(
-        /* @__PURE__ */ React__default.createElement(
-          "link",
-          {
-            key: `${file.split(".")[0]}_${index}`,
-            href: `${publicPath}${file}`,
-            rel: "stylesheet",
-            type: "text/css"
-          }
-        )
-      );
+    const seenStylesheetHrefs = /* @__PURE__ */ new Set();
+    [...targetModule.assets.css.sync, ...targetModule.assets.css.async].sort().forEach((file) => {
+      const href = `${publicPath}${file}`;
+      if (seenStylesheetHrefs.has(href)) {
+        return;
+      }
+      seenStylesheetHrefs.add(href);
+      stylesheetHrefs.push(href);
     });
   }
   if (injectScript) {
-    scripts.push(
-      /* @__PURE__ */ React__default.createElement(
-        "script",
-        {
-          async: true,
-          key: remoteEntry.split(".")[0],
-          src: `${publicPath}${remoteEntry}`,
-          crossOrigin: "anonymous"
-        }
-      )
-    );
-    [...targetModule.assets.js.sync].sort().forEach((file, index) => {
-      scripts.push(
-        /* @__PURE__ */ React__default.createElement(
-          "script",
-          {
-            key: `${file.split(".")[0]}_${index}`,
-            async: true,
-            src: `${publicPath}${file}`,
-            crossOrigin: "anonymous"
-          }
-        )
-      );
+    scriptSrcs.push(`${publicPath}${remoteEntry}`);
+    [...targetModule.assets.js.sync].sort().forEach((file) => {
+      scriptSrcs.push(`${publicPath}${file}`);
     });
   }
-  return [...scripts, ...links];
+  return { scriptSrcs, stylesheetHrefs };
+}
+function renderScriptAssets(scriptSrcs) {
+  return scriptSrcs.map((src) => /* @__PURE__ */ React__default.createElement("script", { key: src, async: true, src, crossOrigin: "anonymous" }));
+}
+function collectSSRAssets(options) {
+  const { scriptSrcs, stylesheetHrefs } = collectSSRAssetDescriptors(options);
+  return [
+    ...renderScriptAssets(scriptSrcs),
+    ...stylesheetHrefs.map((href) => /* @__PURE__ */ React__default.createElement("link", { key: href, href, rel: "stylesheet", type: "text/css" }))
+  ];
 }
 function getServerNeedRemoteInfo(loadedRemoteInfo, id, noSSR) {
   var _a;
@@ -407,12 +529,16 @@ function createLazyComponent(options) {
       { name: instance.name, version: instance == null ? void 0 : instance.options.version }
     ) : void 0;
     logger.debug("LazyComponent dataFetchMapKey: ", dataFetchMapKey);
-    const assets = collectSSRAssets({
+    const { scriptSrcs, stylesheetHrefs } = collectSSRAssetDescriptors({
       id: moduleId,
       instance,
       injectLink,
       injectScript
     });
+    const assets = [
+      ...renderScriptAssets(scriptSrcs),
+      /* @__PURE__ */ React__default.createElement(HydratedStylesheetAssets, { key: "stylesheets", hrefs: stylesheetHrefs })
+    ];
     const Com = m[exportName];
     if (exportName in m && typeof Com === "function") {
       return {

package/dist/{lazy-load-component-plugin-DBTxuAYf.js → lazy-load-component-plugin-DeTbkGlM.js}

@@ -1,5 +1,5 @@
 "use strict";
-const prefetch = require("./prefetch-QJLnti7A.js");
+const prefetch = require("./prefetch-CfMDdqO-.js");
 const lazyUtils = require("./utils-5dGErM3C.js");
 const React = require("react");
 const autoFetchData = () => {
@@ -70,6 +70,142 @@ const autoFetchData = () => {
     }
   };
 };
+const EMPTY_HREFS = /* @__PURE__ */ new Set();
+const stylesheetStores = /* @__PURE__ */ new WeakMap();
+function isActiveStylesheet(link) {
+  const rel = link.rel.toLowerCase().split(/\s+/u);
+  const media = link.media.trim().toLowerCase();
+  const type = link.type.trim().toLowerCase().split(";", 1)[0].trim();
+  return rel.includes("stylesheet") && !rel.includes("alternate") && !link.disabled && !link.hasAttribute("disabled") && (!media || media === "all") && (!type || type === "text/css");
+}
+function collectHeadStylesheetHrefs(document) {
+  var _a;
+  const hrefs = /* @__PURE__ */ new Set();
+  (_a = document.head) == null ? void 0 : _a.querySelectorAll("link[href]").forEach((link) => {
+    if (isActiveStylesheet(link)) {
+      hrefs.add(link.href);
+    }
+  });
+  return hrefs;
+}
+function haveSameHrefs(current, next) {
+  if (current.size !== next.size) {
+    return false;
+  }
+  for (const href of current) {
+    if (!next.has(href)) {
+      return false;
+    }
+  }
+  return true;
+}
+function observeHead(store) {
+  store.observer.disconnect();
+  const { document, head, observer } = store;
+  if (head) {
+    observer.observe(head, {
+      attributes: true,
+      attributeFilter: ["disabled", "href", "media", "rel", "type"],
+      childList: true,
+      subtree: true
+    });
+  }
+  if (document.documentElement) {
+    observer.observe(document.documentElement, { childList: true });
+  }
+}
+function refreshHeadStylesheets(store) {
+  if (!store.subscribers.size) {
+    return;
+  }
+  const head = store.document.head;
+  if (head !== store.head) {
+    store.head = head;
+    observeHead(store);
+  }
+  const hrefs = collectHeadStylesheetHrefs(store.document);
+  if (haveSameHrefs(store.hrefs, hrefs)) {
+    return;
+  }
+  store.hrefs = hrefs;
+  store.subscribers.forEach((subscriber) => subscriber(hrefs));
+}
+function getStylesheetStore(document) {
+  var _a;
+  const current = stylesheetStores.get(document);
+  if (current) {
+    return current;
+  }
+  const MutationObserver = ((_a = document.defaultView) == null ? void 0 : _a.MutationObserver) ?? globalThis.MutationObserver;
+  let store;
+  const observer = new MutationObserver(() => refreshHeadStylesheets(store));
+  store = {
+    document,
+    head: document.head,
+    hrefs: collectHeadStylesheetHrefs(document),
+    observer,
+    subscribers: /* @__PURE__ */ new Set()
+  };
+  observeHead(store);
+  stylesheetStores.set(document, store);
+  return store;
+}
+function subscribeToHeadStylesheets(document, subscriber) {
+  const store = getStylesheetStore(document);
+  let subscribed = true;
+  store.subscribers.add(subscriber);
+  subscriber(store.hrefs);
+  return () => {
+    if (!subscribed) {
+      return;
+    }
+    subscribed = false;
+    store.subscribers.delete(subscriber);
+    if (!store.subscribers.size) {
+      store.observer.disconnect();
+      if (stylesheetStores.get(document) === store) {
+        stylesheetStores.delete(document);
+      }
+    }
+  };
+}
+function resolveHref(href, document) {
+  try {
+    return new URL(href, document.baseURI).href;
+  } catch {
+    return href;
+  }
+}
+function HydratedStylesheetAssets({ hrefs }) {
+  const firstLinkRef = React.useRef(null);
+  const ownerDocumentRef = React.useRef(null);
+  const [headHrefs, setHeadHrefs] = React.useState(EMPTY_HREFS);
+  React.useEffect(() => {
+    var _a;
+    const link = firstLinkRef.current;
+    if (!link) {
+      return;
+    }
+    const ownerDocument = link.ownerDocument;
+    ownerDocumentRef.current = ownerDocument;
+    if (link.getRootNode() !== ownerDocument || ((_a = ownerDocument.head) == null ? void 0 : _a.contains(link))) {
+      return;
+    }
+    return subscribeToHeadStylesheets(ownerDocument, setHeadHrefs);
+  }, []);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, hrefs.map(
+    (href, index) => ownerDocumentRef.current && headHrefs.has(resolveHref(href, ownerDocumentRef.current)) ? null : /* @__PURE__ */ React.createElement(
+      "link",
+      {
+        key: href,
+        ref: index === 0 ? firstLinkRef : void 0,
+        href,
+        rel: "stylesheet",
+        type: "text/css"
+      }
+    )
+  ));
+}
 function isPromise(obj) {
   return !!obj && (typeof obj === "object" || typeof obj === "function") && typeof obj.then === "function";
 }
@@ -236,65 +372,51 @@ function getTargetModuleInfo(id, instance) {
     remoteEntry
   };
 }
-function collectSSRAssets(options) {
+function collectSSRAssetDescriptors(options) {
   const {
     id,
     injectLink = true,
     injectScript = false
   } = typeof options === "string" ? { id: options } : options;
-  const links = [];
-  const scripts = [];
+  const stylesheetHrefs = [];
+  const scriptSrcs = [];
   const instance = options.instance;
   if (!instance || !injectLink && !injectScript) {
-    return [...scripts, ...links];
+    return { scriptSrcs, stylesheetHrefs };
   }
   const moduleAndPublicPath = getTargetModuleInfo(id, instance);
   if (!moduleAndPublicPath) {
-    return [...scripts, ...links];
+    return { scriptSrcs, stylesheetHrefs };
   }
   const { module: targetModule, publicPath, remoteEntry } = moduleAndPublicPath;
   if (injectLink) {
-    [...targetModule.assets.css.sync, ...targetModule.assets.css.async].sort().forEach((file, index) => {
-      links.push(
-        /* @__PURE__ */ React.createElement(
-          "link",
-          {
-            key: `${file.split(".")[0]}_${index}`,
-            href: `${publicPath}${file}`,
-            rel: "stylesheet",
-            type: "text/css"
-          }
-        )
-      );
+    const seenStylesheetHrefs = /* @__PURE__ */ new Set();
+    [...targetModule.assets.css.sync, ...targetModule.assets.css.async].sort().forEach((file) => {
+      const href = `${publicPath}${file}`;
+      if (seenStylesheetHrefs.has(href)) {
+        return;
+      }
+      seenStylesheetHrefs.add(href);
+      stylesheetHrefs.push(href);
     });
   }
   if (injectScript) {
-    scripts.push(
-      /* @__PURE__ */ React.createElement(
-        "script",
-        {
-          async: true,
-          key: remoteEntry.split(".")[0],
-          src: `${publicPath}${remoteEntry}`,
-          crossOrigin: "anonymous"
-        }
-      )
-    );
-    [...targetModule.assets.js.sync].sort().forEach((file, index) => {
-      scripts.push(
-        /* @__PURE__ */ React.createElement(
-          "script",
-          {
-            key: `${file.split(".")[0]}_${index}`,
-            async: true,
-            src: `${publicPath}${file}`,
-            crossOrigin: "anonymous"
-          }
-        )
-      );
+    scriptSrcs.push(`${publicPath}${remoteEntry}`);
+    [...targetModule.assets.js.sync].sort().forEach((file) => {
+      scriptSrcs.push(`${publicPath}${file}`);
     });
   }
-  return [...scripts, ...links];
+  return { scriptSrcs, stylesheetHrefs };
+}
+function renderScriptAssets(scriptSrcs) {
+  return scriptSrcs.map((src) => /* @__PURE__ */ React.createElement("script", { key: src, async: true, src, crossOrigin: "anonymous" }));
+}
+function collectSSRAssets(options) {
+  const { scriptSrcs, stylesheetHrefs } = collectSSRAssetDescriptors(options);
+  return [
+    ...renderScriptAssets(scriptSrcs),
+    ...stylesheetHrefs.map((href) => /* @__PURE__ */ React.createElement("link", { key: href, href, rel: "stylesheet", type: "text/css" }))
+  ];
 }
 function getServerNeedRemoteInfo(loadedRemoteInfo, id, noSSR) {
   var _a;
@@ -408,12 +530,16 @@ function createLazyComponent(options) {
       { name: instance.name, version: instance == null ? void 0 : instance.options.version }
     ) : void 0;
     lazyUtils.logger.debug("LazyComponent dataFetchMapKey: ", dataFetchMapKey);
-    const assets = collectSSRAssets({
+    const { scriptSrcs, stylesheetHrefs } = collectSSRAssetDescriptors({
       id: moduleId,
       instance,
       injectLink,
       injectScript
     });
+    const assets = [
+      ...renderScriptAssets(scriptSrcs),
+      /* @__PURE__ */ React.createElement(HydratedStylesheetAssets, { key: "stylesheets", hrefs: stylesheetHrefs })
+    ];
     const Com = m[exportName];
     if (exportName in m && typeof Com === "function") {
       return {

package/dist/lazy-load-component-plugin.cjs.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-DBTxuAYf.js");
-require("./prefetch-QJLnti7A.js");
+const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-DeTbkGlM.js");
+require("./prefetch-CfMDdqO-.js");
 exports.default = lazyLoadComponentPlugin.lazyLoadComponentPlugin;
 exports.lazyLoadComponentPlugin = lazyLoadComponentPlugin.lazyLoadComponentPlugin;

package/dist/lazy-load-component-plugin.es.js

@@ -1,5 +1,5 @@
-import { l, l as l2 } from "./lazy-load-component-plugin-DlagtX0O.mjs";
-import "./prefetch-BzCq3MT3.mjs";
+import { l, l as l2 } from "./lazy-load-component-plugin-DQFjLSsW.mjs";
+import "./prefetch-BJZbf9LF.mjs";
 export {
   l as default,
   l2 as lazyLoadComponentPlugin

package/dist/{prefetch-BzCq3MT3.mjs → prefetch-BJZbf9LF.mjs}

@@ -621,21 +621,46 @@ const runtimeDescMap = {
   ...runtimeDescMap
 });
 const importCallback = ".then(callbacks[0]).catch(callbacks[1])";
+const esmRemoteEntryLoadErrorMessages = [
+  "Failed to fetch dynamically imported module",
+  "Importing a module script failed",
+  "error loading dynamically imported module"
+];
+function isEsmRemoteEntryLoadError(err) {
+  if (!(err instanceof TypeError)) return false;
+  return esmRemoteEntryLoadErrorMessages.some((loadErrorMessage) => err.message.includes(loadErrorMessage));
+}
 function isEsmRemoteType(type) {
   return type === "esm" || type === "module";
 }
-async function loadEsmEntry({ entry, remoteEntryExports }) {
+async function loadEsmEntry({ entry, remoteEntryExports, name, getEntryUrl }) {
   return new Promise((resolve, reject) => {
+    const rejectEntry = (loadError) => {
+      if (isEsmRemoteEntryLoadError(loadError)) {
+        const originalMsg = loadError instanceof Error ? loadError.message : String(loadError);
+        try {
+          error(RUNTIME_008, runtimeDescMap, {
+            remoteName: name,
+            resourceUrl: url
+          }, originalMsg);
+        } catch (runtimeError) {
+          reject(runtimeError);
+          return;
+        }
+      }
+      reject(loadError);
+    };
+    const url = getEntryUrl ? getEntryUrl(entry) : entry;
     try {
-      if (!remoteEntryExports) if (typeof FEDERATION_ALLOW_NEW_FUNCTION !== "undefined") new Function("callbacks", `import("${entry}")${importCallback}`)([resolve, reject]);
+      if (!remoteEntryExports) if (typeof FEDERATION_ALLOW_NEW_FUNCTION !== "undefined") new Function("callbacks", `import("${url}")${importCallback}`)([resolve, rejectEntry]);
       else import(
         /* webpackIgnore: true */
         /* @vite-ignore */
-        entry
-      ).then(resolve).catch(reject);
+        url
+      ).then(resolve).catch(rejectEntry);
       else resolve(remoteEntryExports);
     } catch (e) {
-      error(`Failed to load ESM entry from "${entry}". ${e instanceof Error ? e.message : String(e)}`);
+      error(`Failed to load ESM entry from "${url}". ${e instanceof Error ? e.message : String(e)}`);
     }
   });
 }
@@ -693,7 +718,9 @@ async function loadEntryDom({ remoteInfo, remoteEntryExports, loaderHook, getEnt
   const { entry, entryGlobalName: globalName, name, type } = remoteInfo;
   if (isEsmRemoteType(type)) return loadEsmEntry({
     entry,
-    remoteEntryExports
+    remoteEntryExports,
+    name,
+    getEntryUrl
   });
   if (type === "system") return loadSystemJsEntry({
     entry,

package/dist/{prefetch-QJLnti7A.js → prefetch-CfMDdqO-.js}

@@ -622,21 +622,46 @@ const runtimeDescMap = {
   ...runtimeDescMap
 });
 const importCallback = ".then(callbacks[0]).catch(callbacks[1])";
+const esmRemoteEntryLoadErrorMessages = [
+  "Failed to fetch dynamically imported module",
+  "Importing a module script failed",
+  "error loading dynamically imported module"
+];
+function isEsmRemoteEntryLoadError(err) {
+  if (!(err instanceof TypeError)) return false;
+  return esmRemoteEntryLoadErrorMessages.some((loadErrorMessage) => err.message.includes(loadErrorMessage));
+}
 function isEsmRemoteType(type) {
   return type === "esm" || type === "module";
 }
-async function loadEsmEntry({ entry, remoteEntryExports }) {
+async function loadEsmEntry({ entry, remoteEntryExports, name, getEntryUrl }) {
   return new Promise((resolve, reject) => {
+    const rejectEntry = (loadError) => {
+      if (isEsmRemoteEntryLoadError(loadError)) {
+        const originalMsg = loadError instanceof Error ? loadError.message : String(loadError);
+        try {
+          error(RUNTIME_008, runtimeDescMap, {
+            remoteName: name,
+            resourceUrl: url
+          }, originalMsg);
+        } catch (runtimeError) {
+          reject(runtimeError);
+          return;
+        }
+      }
+      reject(loadError);
+    };
+    const url = getEntryUrl ? getEntryUrl(entry) : entry;
     try {
-      if (!remoteEntryExports) if (typeof FEDERATION_ALLOW_NEW_FUNCTION !== "undefined") new Function("callbacks", `import("${entry}")${importCallback}`)([resolve, reject]);
+      if (!remoteEntryExports) if (typeof FEDERATION_ALLOW_NEW_FUNCTION !== "undefined") new Function("callbacks", `import("${url}")${importCallback}`)([resolve, rejectEntry]);
       else import(
         /* webpackIgnore: true */
         /* @vite-ignore */
-        entry
-      ).then(resolve).catch(reject);
+        url
+      ).then(resolve).catch(rejectEntry);
       else resolve(remoteEntryExports);
     } catch (e) {
-      error(`Failed to load ESM entry from "${entry}". ${e instanceof Error ? e.message : String(e)}`);
+      error(`Failed to load ESM entry from "${url}". ${e instanceof Error ? e.message : String(e)}`);
     }
   });
 }
@@ -694,7 +719,9 @@ async function loadEntryDom({ remoteInfo, remoteEntryExports, loaderHook, getEnt
   const { entry, entryGlobalName: globalName, name, type } = remoteInfo;
   if (isEsmRemoteType(type)) return loadEsmEntry({
     entry,
-    remoteEntryExports
+    remoteEntryExports,
+    name,
+    getEntryUrl
   });
   if (type === "system") return loadSystemJsEntry({
     entry,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "2.8.1",
+  "version": "2.8.2",
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
@@ -147,7 +147,7 @@
     }
   },
   "dependencies": {
-    "@module-federation/sdk": "2.8.1"
+    "@module-federation/sdk": "2.8.2"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -179,9 +179,9 @@
     "typescript": "7.0.2",
     "vite": "^5.4.21",
     "hono": "4.12.26",
-    "@module-federation/runtime": "2.8.1",
-    "@module-federation/bridge-shared": "2.8.1",
-    "@module-federation/runtime-core": "2.8.1"
+    "@module-federation/runtime": "2.8.2",
+    "@module-federation/bridge-shared": "2.8.2",
+    "@module-federation/runtime-core": "2.8.2"
   },
   "scripts": {
     "dev": "vite",