remote-components 0.0.42 → 0.0.43

package/dist/react/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,26 +17,1515 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react/index.tsx
 var react_exports = {};
 __export(react_exports, {
   RemoteComponent: () => RemoteComponent
 });
 module.exports = __toCommonJS(react_exports);
+var import_react2 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/shared/client/apply-origin.ts
+var tagNames = [
+  "img",
+  "source",
+  "video",
+  "audio",
+  "track",
+  "iframe",
+  "embed",
+  "script",
+  "link"
+];
+function applyOriginToNodes(doc, url) {
+  if (url.origin !== location.origin) {
+    const nodes = doc.querySelectorAll(
+      tagNames.map(
+        (type) => `${type}[src],${type}[srcset],${type}[href],${type}[imagesrcset]`
+      ).join(",")
+    );
+    nodes.forEach((node) => {
+      if (node.hasAttribute("src") && /^[./]+\/?/.test(node.getAttribute("src") ?? "")) {
+        node.src = new URL(node.getAttribute("src") ?? "/", url).href;
+      }
+      if (node.hasAttribute("href") && /^[./]+\/?/.test(node.getAttribute("href") ?? "")) {
+        node.setAttribute(
+          "href",
+          new URL(node.getAttribute("href") ?? "/", url).href
+        );
+      }
+      if (node.hasAttribute("srcset")) {
+        const srcSet = node.getAttribute("srcset")?.split(",").map((entry) => {
+          const [urlPart, descriptor] = entry.trim().split(/\s+/);
+          if (!urlPart)
+            return entry;
+          const absoluteUrl = new URL(urlPart, url).href;
+          return descriptor ? `${absoluteUrl} ${descriptor}` : absoluteUrl;
+        }).join(", ");
+        if (srcSet) {
+          node.setAttribute("srcset", srcSet);
+        }
+      }
+      if (node.hasAttribute("imagesrcset")) {
+        const srcSet = node.getAttribute("imagesrcset")?.split(",").map((entry) => {
+          const [urlPart, descriptor] = entry.trim().split(/\s+/);
+          if (!urlPart)
+            return entry;
+          const absoluteUrl = new URL(urlPart, url).href;
+          return descriptor ? `${absoluteUrl} ${descriptor}` : absoluteUrl;
+        }).join(", ");
+        if (srcSet) {
+          node.setAttribute("imagesrcset", srcSet);
+        }
+      }
+    });
+  }
+}
+
+// src/shared/client/polyfill.tsx
 var import_jsx_runtime = (
-  // TODO: remove wrapper div by converting HTML to RSC or React tree
+  // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
   require("react/jsx-runtime")
 );
+function applyBundleUrlToSrc(bundle, src) {
+  const self = globalThis;
+  if (self.__remote_bundle_url__?.[bundle]?.origin === location.origin) {
+    return src;
+  }
+  const { assetPrefix, path } = /^(?<assetPrefix>.*?)\/_next\/(?<path>.*)/.exec(src)?.groups ?? {};
+  if (!path) {
+    return new URL(src, self.__remote_bundle_url__?.[bundle]?.origin).href;
+  }
+  return `${self.__remote_bundle_url__?.[bundle]?.origin ?? ""}${assetPrefix}/_next/${path}`;
+}
+function applyBundleUrlToImagePropsSrc(bundle, src) {
+  if (typeof src === "string") {
+    return applyBundleUrlToSrc(bundle, src);
+  }
+  const propSrc = src;
+  return applyBundleUrlToSrc(bundle, propSrc.src);
+}
+var imageImpl = (bundle) => function RemoteImage({
+  fill: _fill,
+  loader: _loader,
+  quality: _quality,
+  priority: _priority,
+  loading: _loading,
+  placeholder: _placeholder,
+  blurDataURL: _blurDataURL,
+  unoptimized: _unoptimized,
+  overrideSrc: _overrideSrc,
+  src,
+  ...props
+}) {
+  const newSrc = applyBundleUrlToImagePropsSrc(
+    bundle,
+    typeof src === "string" ? src : src.src
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "img",
+    {
+      decoding: "async",
+      style: { color: "transparent" },
+      ...props,
+      src: newSrc,
+      suppressHydrationWarning: true
+    }
+  );
+};
+function sharedPolyfills(shared) {
+  const self = globalThis;
+  const polyfill = {
+    "next/dist/client/components/navigation": self.__remote_component_host_shared_modules__?.["next/navigation"] ?? shared?.["next/navigation"] ?? (() => Promise.resolve({
+      useRouter() {
+        return {
+          push: (routerUrl) => {
+            history.pushState({}, "", routerUrl);
+          },
+          replace: (routerUrl) => {
+            history.replaceState({}, "", routerUrl);
+          },
+          back: () => {
+            history.back();
+          }
+        };
+      },
+      usePathname() {
+        return location.pathname;
+      },
+      useParams() {
+        return {};
+      },
+      useSearchParams() {
+        return new URLSearchParams(location.search);
+      },
+      useSelectedLayoutSegment() {
+        return null;
+      },
+      useSelectedLayoutSegments() {
+        return [];
+      },
+      __esModule: true
+    })),
+    "next/dist/client/app-dir/link": self.__remote_component_host_shared_modules__?.["next/link"] ?? shared?.["next/link"] ?? (() => Promise.resolve({
+      default: ({
+        scroll: _,
+        replace,
+        prefetch,
+        onNavigate,
+        children,
+        ...props
+      }) => {
+        if (prefetch) {
+          console.warn(
+            "Next.js Link prefetch is not supported in remote components"
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "a",
+          {
+            ...props,
+            href: props.href,
+            onClick: (e) => {
+              e.preventDefault();
+              let preventDefaulted = false;
+              e.preventDefault = () => {
+                preventDefaulted = true;
+                e.defaultPrevented = true;
+              };
+              if (typeof props.onClick === "function") {
+                props.onClick(e);
+              }
+              onNavigate?.(e);
+              if (preventDefaulted) {
+                return;
+              }
+              if (replace) {
+                history.replaceState({}, "", props.href);
+              } else {
+                history.pushState({}, "", props.href);
+              }
+            },
+            suppressHydrationWarning: true,
+            children: children ?? null
+          }
+        );
+      },
+      useLinkStatus() {
+        return { pending: false };
+      },
+      __esModule: true
+    })),
+    "next/dist/client/app-dir/form": self.__remote_component_host_shared_modules__?.["next/form"] ?? shared?.["next/form"] ?? (() => Promise.resolve({
+      default: () => {
+        throw new Error("Next.js <Form> component not implemented");
+      },
+      __esModule: true
+    })),
+    "next/dist/client/image-component": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
+      Image: imageImpl(bundle),
+      __esModule: true
+    })),
+    "next/image": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
+      default: imageImpl(bundle),
+      getImageProps: (_imgProps) => {
+        throw new Error(
+          "Next.js getImageProps() is not implemented in remote components"
+        );
+      },
+      __esModule: true
+    })),
+    "next/dist/client/script": self.__remote_component_host_shared_modules__?.["next/script"] ?? shared?.["next/script"] ?? (() => Promise.resolve({
+      // TODO: implement <Script> component for non-Next.js host applications
+      // do not throw an error for now
+      default: () => null,
+      __esModule: true
+    })),
+    "next/router": self.__remote_component_host_shared_modules__?.["next/router"] ?? shared?.["next/router"] ?? (() => (
+      // TODO: incomplete implementation
+      Promise.resolve({
+        useRouter() {
+          return {
+            push: (routerUrl) => {
+              history.pushState({}, "", routerUrl);
+            },
+            replace: (routerUrl) => {
+              history.replaceState({}, "", routerUrl);
+            },
+            back: () => {
+              history.back();
+            }
+          };
+        },
+        __esModule: true
+      })
+    )),
+    "next/dist/build/polyfills/process": () => Promise.resolve({
+      default: {
+        env: {
+          NODE_ENV: "production"
+        }
+      },
+      __esModule: true
+    })
+  };
+  polyfill["next/navigation"] = polyfill["next/dist/client/components/navigation"];
+  polyfill["next/link"] = polyfill["next/dist/client/app-dir/link"];
+  polyfill["next/form"] = polyfill["next/dist/client/app-dir/form"];
+  polyfill["next/dist/api/image"] = polyfill["next/dist/client/image-component"];
+  polyfill["next/script"] = polyfill["next/dist/client/script"];
+  return polyfill;
+}
+
+// src/shared/error.ts
+var RemoteComponentsError = class extends Error {
+  code = "REMOTE_COMPONENTS_ERROR";
+  constructor(message, options) {
+    super(message, options);
+    this.name = "RemoteComponentsError";
+  }
+};
+function multipleRemoteComponentsError(url) {
+  return new RemoteComponentsError(
+    `Multiple Remote Components found at "${url}". When a page exposes multiple Remote Components you must specify the "name" prop to select which one to load.`
+  );
+}
+function failedToFetchRemoteComponentError(url, { status, statusText }, help = "Is the URL correct and accessible?") {
+  return new RemoteComponentsError(
+    `Failed to fetch Remote Component from "${url}". ${help}`,
+    { cause: new Error(`${status} ${statusText}`) }
+  );
+}
+
+// src/shared/client/component-loader.ts
+var React = __toESM(require("react"), 1);
+var JSXDevRuntime = __toESM(require("react/jsx-dev-runtime"), 1);
+var JSXRuntime = __toESM(require("react/jsx-runtime"), 1);
+var ReactDOM = __toESM(require("react-dom"), 1);
+var ReactDOMClient = __toESM(require("react-dom/client"), 1);
+
+// src/shared/utils/logger.ts
+var PREFIX = "remote-components";
+var DEBUG = typeof window !== "undefined" && localStorage.getItem("RC_DEBUG") === "true";
+function logDebug(location2, message) {
+  if (DEBUG) {
+    console.debug(`[${PREFIX}:${location2}]: ${message}`);
+  }
+}
+function logWarn(location2, message) {
+  console.warn(`[${PREFIX}:${location2}]: ${message}`);
+}
+
+// src/shared/webpack/next-client-pages-loader.ts
+function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
+  const self = globalThis;
+  const nextCssOriginal = document.querySelector(
+    `[id="__next_css__DO_NOT_USE__"]:not([data-bundle="${bundle}"][data-route="${route}"])`
+  );
+  if (nextCssOriginal) {
+    nextCssOriginal.parentNode?.removeChild(nextCssOriginal);
+  }
+  const nextCss = document.createElement("noscript");
+  nextCss.id = "__next_css__DO_NOT_USE__";
+  nextCss.setAttribute("data-bundle", bundle);
+  nextCss.setAttribute("data-route", route);
+  const nextCssEnd = document.createElement("noscript");
+  nextCssEnd.id = "__next_css__DO_NOT_USE_END__";
+  nextCssEnd.setAttribute("data-bundle", bundle);
+  nextCssEnd.setAttribute("data-route", route);
+  document.head.appendChild(nextCssEnd);
+  document.head.appendChild(nextCss);
+  const componentLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
+  ) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
+  ) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? ""] ?? -1;
+  const appLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=%2F_app`)
+  ) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=%2F_app`)
+  ) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? ""] ?? -1;
+  if (!(componentLoaderChunk && appLoaderChunk)) {
+    throw new RemoteComponentsError(
+      `Next.js client pages loader not found in bundle "${bundle}".`
+    );
+  }
+  const __NEXT_P_ORIGINAL = self.__NEXT_P;
+  const selfOriginal = self;
+  delete selfOriginal.__NEXT_P;
+  self.__remote_webpack_require__?.[bundle]?.(
+    self.__remote_webpack_require__[bundle].type !== "turbopack" ? componentLoaderChunk : `[${bundle}] ${componentLoaderChunk}`
+  );
+  if (typeof appLoaderChunk === "string" || typeof appLoaderChunk === "number" && appLoaderChunk !== -1) {
+    self.__remote_webpack_require__?.[bundle]?.(
+      self.__remote_webpack_require__[bundle].type !== "turbopack" ? appLoaderChunk : `[${bundle}] ${appLoaderChunk}`
+    );
+  }
+  if (self.__NEXT_P) {
+    const [, componentLoader] = self.__NEXT_P[0] ?? [
+      void 0,
+      () => ({ default: null })
+    ];
+    const [, appLoader] = self.__NEXT_P[2] ?? [
+      void 0,
+      () => ({
+        default: null
+      })
+    ];
+    const { default: Component } = componentLoader();
+    const { default: App } = appLoader();
+    if (!self.__remote_next_css__) {
+      self.__remote_next_css__ = {};
+    }
+    if (!self.__remote_next_css__[bundle]) {
+      const cssRE = /\.s?css$/;
+      Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).filter((id) => cssRE.test(id)).forEach((id) => {
+        self.__remote_webpack_require__?.[bundle]?.(id);
+      });
+      Object.keys(self.__remote_webpack_module_map__?.[bundle] ?? {}).filter((path) => cssRE.test(path)).forEach((path) => {
+        const id = self.__remote_webpack_module_map__?.[bundle]?.[path];
+        if (id) {
+          self.__remote_webpack_require__?.[bundle]?.(id);
+        }
+      });
+      const elements = [];
+      let node = nextCss.previousSibling;
+      while (node && node !== nextCssEnd) {
+        elements.push(node);
+        node.remove();
+        node = nextCss.previousSibling;
+      }
+      self.__remote_next_css__[bundle] = elements;
+    }
+    if (styleContainer) {
+      const elements = self.__remote_next_css__[bundle];
+      elements.forEach((el) => {
+        styleContainer.appendChild(el.cloneNode(true));
+      });
+    } else {
+      const elements = self.__remote_next_css__[bundle];
+      elements.forEach((el) => {
+        document.head.appendChild(el);
+      });
+    }
+    delete self.__NEXT_P;
+    self.__NEXT_P = __NEXT_P_ORIGINAL;
+    if (nextCssOriginal) {
+      nextCssOriginal.parentNode?.appendChild(nextCssOriginal);
+    }
+    nextCss.remove();
+    nextCssEnd.remove();
+    return { Component, App };
+  }
+  return { Component: null, App: null };
+}
+
+// src/shared/webpack/shared-modules.ts
+function applySharedModules(bundle, resolve) {
+  logDebug(
+    "SharedModules",
+    `applySharedModules called for bundle: "${bundle}"`
+  );
+  logDebug(
+    "SharedModules",
+    `Shared modules to resolve: ${Object.keys(resolve)}`
+  );
+  const self = globalThis;
+  if (self.__remote_webpack_require__?.[bundle]) {
+    const modulePaths = Object.keys(
+      self.__remote_webpack_module_map__?.[bundle] ?? self.__remote_webpack_require__[bundle].m ?? {}
+    );
+    logDebug(
+      "SharedModules",
+      `Available module paths in __remote_webpack_require__[${bundle}]: ${modulePaths}`
+    );
+    for (const [key, value] of Object.entries(resolve)) {
+      let ids = modulePaths.filter((p) => p === key);
+      if (ids.length === 0) {
+        ids = modulePaths.filter((p) => p.includes(key));
+      }
+      if (ids.length === 0) {
+        logDebug(
+          "SharedModules",
+          `No matching module path found for shared module "${key}"`
+        );
+      }
+      for (let id of ids) {
+        const webpackBundle = self.__remote_webpack_require__[bundle];
+        if (webpackBundle.m) {
+          if (self.__remote_webpack_module_map__?.[bundle]?.[id]) {
+            const mappedId = `${self.__remote_webpack_module_map__[bundle][id]}`;
+            logDebug(
+              "SharedModules",
+              `Mapped module id: "${id}" -> "${mappedId}"`
+            );
+            id = mappedId;
+          }
+          webpackBundle.m[id] = (module2) => {
+            module2.exports = value;
+          };
+        } else {
+          logWarn(
+            "SharedModules",
+            `webpackBundle.m is not available for bundle "${bundle}"`
+          );
+        }
+      }
+    }
+  } else {
+    logWarn("SharedModules", `No webpack require found for bundle "${bundle}"`);
+    logDebug(
+      "SharedModules",
+      `Available bundles: ${Object.keys(self.__remote_webpack_require__ ?? {})}`
+    );
+  }
+}
+
+// src/shared/client/rsc.ts
+var import_web_streams_polyfill = require("web-streams-polyfill");
+function fixPayload(payload) {
+  if (Array.isArray(payload)) {
+    if (payload[0] === "$") {
+      fixPayload(payload[3]);
+      if (payload.length === 4) {
+        payload.push(null, null, 1);
+      }
+    } else {
+      for (const item of payload) {
+        fixPayload(item);
+      }
+    }
+  } else if (typeof payload === "object" && payload !== null) {
+    for (const key in payload) {
+      fixPayload(payload[key]);
+    }
+  }
+}
+function createRSCStream(rscName, data) {
+  return new import_web_streams_polyfill.ReadableStream({
+    type: "bytes",
+    start(controller) {
+      const encoder = new TextEncoder();
+      const self = globalThis;
+      if (data.length > 0) {
+        data.forEach((chunk) => {
+          const lines = chunk.split("\n");
+          for (const line of lines) {
+            const match = /\.push\("(?<rsc>.*)"\);$/.exec(line);
+            if (match?.groups?.rsc) {
+              self[rscName] = self[rscName] ?? [];
+              self[rscName].push(JSON.parse(`"${match.groups.rsc}"`));
+            }
+          }
+        });
+      }
+      const allChunks = (self[rscName] ?? [`0:[null]
+`]).join("");
+      self[rscName] = null;
+      allChunks.split("\n").forEach((chunk) => {
+        if (chunk.length > 0) {
+          const { before, id, prefix, payload } = /^(?<before>[^:]*?)?(?<id>[0-9a-zA-Z]+):(?<prefix>[A-Z])?(?<payload>\[.*\])/.exec(
+            chunk
+          )?.groups ?? {};
+          if (payload) {
+            const jsonPayload = JSON.parse(payload);
+            fixPayload(jsonPayload);
+            const reconstruct = `${before ?? ""}${id}:${prefix ?? ""}${JSON.stringify(jsonPayload)}`;
+            controller.enqueue(encoder.encode(`${reconstruct}
+`));
+          } else {
+            controller.enqueue(encoder.encode(`${chunk}
+`));
+          }
+        } else {
+          controller.enqueue(encoder.encode(`${chunk}
+`));
+        }
+      });
+      controller.close();
+    }
+  });
+}
+
+// src/shared/client/script-loader.ts
+async function loadScripts(scripts) {
+  await Promise.all(
+    scripts.map((script) => {
+      return new Promise((resolve, reject) => {
+        const newSrc = new URL(
+          // remove the remote component bundle name identifier from the script src
+          script.src.replace(/\/_next\/\[.+\](?<whitespace>%20| )/, "/_next/"),
+          location.origin
+        ).href;
+        const newScript = document.createElement("script");
+        newScript.onload = () => {
+          resolve();
+        };
+        newScript.onerror = () => {
+          reject(
+            new RemoteComponentsError(
+              `Failed to load <script src="${script.src}"> for Remote Component. Check the URL is correct.`
+            )
+          );
+        };
+        newScript.src = newSrc;
+        newScript.async = true;
+        document.head.appendChild(newScript);
+      });
+    })
+  );
+}
+
+// src/shared/utils/index.ts
+function escapeString(str) {
+  return str.replace(/[^a-z0-9]/g, "_");
+}
+var attrToProp = {
+  fetchpriority: "fetchPriority",
+  crossorigin: "crossOrigin",
+  imagesrcset: "imageSrcSet",
+  imagesizes: "imageSizes",
+  srcset: "srcSet"
+};
+
+// src/shared/client/const.ts
+var DEFAULT_ROUTE = "/";
+var RUNTIME_WEBPACK = "webpack";
+var RUNTIME_TURBOPACK = "turbopack";
+var RUNTIME_SCRIPT = "script";
+var REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
+function getBundleKey(bundle) {
+  return escapeString(bundle);
+}
+
+// src/shared/client/chunk-loader.ts
+function createChunkLoader(runtime) {
+  return function __turbopack_chunk_load__(chunkId, scriptBundle) {
+    logDebug("ChunkLoader", `Loading chunk: "${chunkId}"`);
+    const self = globalThis;
+    const {
+      bundle,
+      id: path,
+      prefix
+    } = REMOTE_COMPONENT_REGEX.exec(chunkId)?.groups ?? {
+      bundle: scriptBundle ?? "",
+      id: chunkId
+    };
+    logDebug(
+      "ChunkLoader",
+      `Parsed chunk - bundle: "${bundle}", path: "${path}", prefix: "${prefix}"`
+    );
+    const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : runtime;
+    logDebug("ChunkLoader", `Remote runtime: "${remoteRuntime}"`);
+    if (remoteRuntime === RUNTIME_WEBPACK) {
+      logDebug("ChunkLoader", "Skipping chunk load - webpack runtime detected");
+      return Promise.resolve(void 0);
+    }
+    const url = new URL(
+      path ? `${prefix ?? ""}${path}`.replace(
+        /(?<char>[^:])(?<double>\/\/)/g,
+        "$1/"
+      ) : "/",
+      self.__remote_bundle_url__?.[bundle ?? "default"] ?? new URL(location.origin)
+    ).href;
+    if (url.endsWith(".css")) {
+      logDebug("ChunkLoader", `Skipping CSS file: "${url}"`);
+      return;
+    }
+    if (!self.__remote_components_turbopack_chunk_loader_promise__) {
+      self.__remote_components_turbopack_chunk_loader_promise__ = {};
+    }
+    if (self.__remote_components_turbopack_chunk_loader_promise__[url]) {
+      logDebug("ChunkLoader", `Returning cached promise for: "${url}"`);
+      return self.__remote_components_turbopack_chunk_loader_promise__[url];
+    }
+    logDebug("ChunkLoader", `Fetching chunk from: "${url}"`);
+    self.__remote_components_turbopack_chunk_loader_promise__[url] = new Promise((resolve, reject) => {
+      fetch(url).then((res) => res.text()).then((code) => {
+        if (code.includes("globalThis.TURBOPACK")) {
+          return handleTurbopackChunk(code, bundle ?? "", url);
+        }
+      }).then(resolve).catch(reject);
+    });
+    return self.__remote_components_turbopack_chunk_loader_promise__[url];
+  };
+}
+async function handleTurbopackChunk(code, bundle, url) {
+  logDebug(
+    "ChunkLoader",
+    `Handling Turbopack chunk - bundle: "${bundle}", url: "${url}"`
+  );
+  if (/importScripts\(\.\.\.self.TURBOPACK_NEXT_CHUNK_URLS/.test(code)) {
+    logDebug("ChunkLoader", `Skipping worker chunk: "${url}"`);
+    const preloadLinks = document.querySelectorAll(
+      `link[rel="preload"][href="${new URL(url).pathname}"]`
+    );
+    preloadLinks.forEach((preloadLink) => preloadLink.remove());
+    return;
+  }
+  const self = globalThis;
+  const bundleKey = getBundleKey(bundle);
+  logDebug("ChunkLoader", `Bundle key: "${bundleKey}"`);
+  const transformedCode = code.replace(/globalThis\.TURBOPACK/g, `globalThis.TURBOPACK_${bundleKey}`).replace(
+    /TURBOPACK_WORKER_LOCATION/g,
+    `TURBOPACK_WORKER_LOCATION_${bundleKey}`
+  ).replace(
+    /TURBOPACK_NEXT_CHUNK_URLS/g,
+    `TURBOPACK_NEXT_CHUNK_URLS_${bundleKey}`
+  ).replace(
+    /TURBOPACK_CHUNK_UPDATE_LISTENERS/g,
+    `TURBOPACK_CHUNK_UPDATE_LISTENERS_${bundleKey}`
+  ).replace(/__next_require__/g, `__${bundleKey}_next_require__`).replace(
+    /\/\/# sourceMappingURL=(?<name>.+)(?<optional>\._)?\.js\.map/g,
+    `//# sourceMappingURL=${new URL(
+      ".",
+      new URL(
+        url,
+        self.__remote_bundle_url__?.[bundle] ?? new URL(location.origin)
+      )
+    ).href}$1$2.js.map`
+  );
+  logDebug("ChunkLoader", `Creating blob script for: "${url}"`);
+  await new Promise((scriptResolve, scriptReject) => {
+    const blob = new Blob([transformedCode], {
+      type: "application/javascript; charset=UTF-8"
+    });
+    const scriptUrl = URL.createObjectURL(blob);
+    const script = document.createElement("script");
+    script.setAttribute("data-turbopack-src", url);
+    script.src = scriptUrl;
+    script.async = true;
+    script.onload = () => {
+      URL.revokeObjectURL(scriptUrl);
+      scriptResolve(void 0);
+      script.remove();
+    };
+    script.onerror = () => {
+      URL.revokeObjectURL(scriptUrl);
+      scriptReject(
+        new RemoteComponentsError(
+          `Failed to load <script src="${script.src}"> for Remote Component. Check the URL is correct.`
+        )
+      );
+      script.remove();
+    };
+    document.head.appendChild(script);
+  });
+  const chunkLists = self[`TURBOPACK_${bundleKey}_CHUNK_LISTS`];
+  logDebug(
+    "ChunkLoader",
+    `Processing chunk lists for bundle "${bundle}": ${chunkLists?.length ?? 0} lists`
+  );
+  const loadChunkLists = [];
+  while (chunkLists?.length) {
+    const { chunks } = chunkLists.shift() ?? { chunks: [] };
+    if (chunks.length > 0) {
+      logDebug(
+        "ChunkLoader",
+        `Loading ${chunks.length} additional chunks for bundle "${bundle}": [${chunks.join(", ")}]`
+      );
+      chunks.forEach((id) => {
+        const chunkLoadResult = self.__webpack_chunk_load__?.(
+          `[${bundle}] ${url.slice(0, url.indexOf("/_next"))}/_next/${id}`
+        );
+        if (chunkLoadResult) {
+          loadChunkLists.push(chunkLoadResult);
+        }
+      });
+    }
+  }
+  if (loadChunkLists.length > 0) {
+    logDebug(
+      "ChunkLoader",
+      `Waiting for ${loadChunkLists.length} additional chunks to load`
+    );
+    await Promise.all(loadChunkLists);
+  }
+}
+
+// src/shared/client/turbopack-module.ts
+function handleTurbopackModule(bundle, moduleId, id) {
+  const self = globalThis;
+  const bundleKey = getBundleKey(bundle);
+  const modules = self[`TURBOPACK_${bundleKey}`];
+  const moduleInit = findModuleInit(modules, moduleId);
+  const exports = {};
+  const moduleExports = { exports };
+  if (!self.__remote_components_turbopack_modules__) {
+    self.__remote_components_turbopack_modules__ = {};
+  }
+  if (!self.__remote_components_turbopack_modules__[bundle]) {
+    self.__remote_components_turbopack_modules__[bundle] = {};
+  }
+  if (self.__remote_components_turbopack_modules__[bundle][moduleId]) {
+    return self.__remote_components_turbopack_modules__[bundle][moduleId];
+  }
+  if (typeof moduleInit !== "function") {
+    throw new Error(
+      `Module ${id} not found in bundle ${bundle} with id ${moduleId}`
+    );
+  }
+  self.__remote_components_turbopack_modules__[bundle][moduleId] = moduleExports.exports;
+  if (!self.__remote_components_turbopack_global__) {
+    self.__remote_components_turbopack_global__ = {};
+  }
+  if (!self.__remote_components_turbopack_global__[bundle]) {
+    self.__remote_components_turbopack_global__[bundle] = {};
+  }
+  const allModules = modules?.flat() ?? [];
+  moduleInit(
+    createTurbopackContext(
+      bundle,
+      exports,
+      moduleExports,
+      allModules,
+      moduleInit,
+      id,
+      self
+    ),
+    moduleExports,
+    exports
+  );
+  if (self.__remote_components_turbopack_modules__[bundle][moduleId] !== moduleExports.exports) {
+    self.__remote_components_turbopack_modules__[bundle][moduleId] = moduleExports.exports;
+  }
+  return moduleExports.exports;
+}
+function findModuleInit(modules, moduleId) {
+  const allModules = modules?.flat() ?? [];
+  if (typeof allModules[1] === "string" || typeof allModules[1] === "number") {
+    const normalizedId = /^[0-9]+$/.test(moduleId) ? Number(moduleId) : moduleId;
+    let moduleIdIndex = allModules.indexOf(normalizedId);
+    if (moduleIdIndex === -1) {
+      moduleIdIndex = allModules.findIndex(
+        (bundleEntry) => typeof bundleEntry === "string" && bundleEntry.startsWith(moduleId) || bundleEntry === normalizedId
+      );
+    }
+    if (moduleIdIndex !== -1) {
+      while (typeof allModules[moduleIdIndex] !== "function" && moduleIdIndex < allModules.length) {
+        moduleIdIndex++;
+      }
+      return allModules[moduleIdIndex];
+    }
+  } else {
+    return allModules.find(
+      (bundleEntry) => typeof bundleEntry === "object" && bundleEntry !== null && moduleId in bundleEntry
+    )?.[moduleId];
+  }
+  return void 0;
+}
+function createTurbopackContext(bundle, exports, moduleExports, allModules, moduleInit, id, self) {
+  return {
+    // HMR not implemented for Remote Components
+    k: {
+      register() {
+      },
+      registerExports() {
+      },
+      signature() {
+        return (fn) => fn;
+      }
+    },
+    // ESM exports setup
+    s(bindings, esmId) {
+      let mod = exports;
+      if (typeof esmId === "string" || typeof esmId === "number") {
+        if (!self.__remote_components_turbopack_modules__) {
+          self.__remote_components_turbopack_modules__ = {};
+        }
+        if (!self.__remote_components_turbopack_modules__[bundle]) {
+          self.__remote_components_turbopack_modules__[bundle] = {};
+        }
+        if (!self.__remote_components_turbopack_modules__[bundle][esmId]) {
+          self.__remote_components_turbopack_modules__[bundle][esmId] = {};
+        }
+        mod = self.__remote_components_turbopack_modules__[bundle][esmId];
+      }
+      Object.defineProperty(mod, "__esModule", { value: true });
+      if (Array.isArray(bindings)) {
+        let i = 0;
+        while (i < bindings.length) {
+          const propName = bindings[i++];
+          const tagOrFunc = bindings[i++];
+          if (typeof tagOrFunc === "number") {
+            Object.defineProperty(mod, propName, {
+              value: bindings[i++],
+              enumerable: true,
+              writable: false
+            });
+          } else {
+            const getterFn = tagOrFunc;
+            if (typeof bindings[i] === "function") {
+              const setterFn = bindings[i++];
+              Object.defineProperty(mod, propName, {
+                get: getterFn,
+                set: setterFn,
+                enumerable: true
+              });
+            } else {
+              Object.defineProperty(mod, propName, {
+                get: getterFn,
+                enumerable: true
+              });
+            }
+          }
+        }
+      }
+    },
+    // import
+    i(importId) {
+      let mod;
+      if (typeof importId === "string") {
+        const { exportSource, exportName } = /\s+<export (?<exportSource>.*?) as (?<exportName>.*?)>$/.exec(
+          importId
+        )?.groups ?? {};
+        const normalizedId = importId.replace(
+          /\s+<export(?<specifier>.*)>$/,
+          ""
+        );
+        mod = self.__webpack_require__?.(`[${bundle}] ${normalizedId}`);
+        if (mod && exportSource && exportName && (exportSource === "*" || typeof mod[exportSource] !== "undefined") && typeof mod[exportName] === "undefined") {
+          if (exportSource === "*") {
+            mod[exportName] = mod;
+          } else {
+            mod[exportName] = mod[exportSource];
+          }
+        }
+      } else {
+        mod = self.__webpack_require__?.(`[${bundle}] ${importId}`);
+      }
+      if (typeof mod !== "object" || mod === null) {
+        mod = { default: mod };
+      } else if (!("default" in mod) && mod.toString() !== "[object Module]") {
+        try {
+          mod.default = mod;
+        } catch {
+        }
+      }
+      return mod;
+    },
+    // require
+    r(requireId) {
+      return self.__webpack_require__?.(`[${bundle}] ${requireId}`);
+    },
+    // value exports
+    v(value) {
+      if (typeof value === "function") {
+        exports.default = value((vid) => {
+          return self.__webpack_require__?.(`[${bundle}] ${vid}`);
+        });
+      } else {
+        moduleExports.exports = value;
+      }
+    },
+    // async module initializer
+    async a(mod) {
+      let result;
+      await mod(
+        () => {
+        },
+        (value) => result = value
+      );
+      exports.default = result;
+    },
+    // async module loader
+    async A(Aid) {
+      const mod = self.__webpack_require__?.(`[${bundle}] ${Aid}`);
+      return mod.default(
+        (parentId) => self.__webpack_require__?.(`[${bundle}] ${parentId}`)
+      );
+    },
+    // chunk loader
+    l(url) {
+      const moduleInitIndex = allModules.indexOf(moduleInit);
+      if (moduleInitIndex !== -1) {
+        const scriptIndex = allModules.slice(0, moduleInitIndex).findLastIndex((bundleEntry) => bundleEntry instanceof Element);
+        if (scriptIndex !== -1) {
+          const script = allModules[scriptIndex];
+          const scriptSrc = script.getAttribute("data-turbopack-src") || "";
+          const nextIndex = scriptSrc.indexOf("/_next");
+          const baseUrl = nextIndex !== -1 ? scriptSrc.slice(0, nextIndex) : "";
+          const bundleUrl = `[${bundle}] ${baseUrl}/_next/${url}`;
+          return self.__webpack_chunk_load__?.(bundleUrl, bundle);
+        }
+      }
+      throw new Error(
+        `Failed to load Turbopack chunk "${url}" for module "${id}". Check the URL is correct.`
+      );
+    },
+    // global object for this bundle
+    g: self.__remote_components_turbopack_global__?.[bundle],
+    m: moduleExports,
+    e: exports
+  };
+}
+
+// src/shared/client/turbopack-patterns.ts
+var REMOTE_SHARED_MARKER_RE = /(?:self|[a-z])\.TURBOPACK_REMOTE_SHARED/;
+var REMOTE_SHARED_ASSIGNMENT_RE = /\.TURBOPACK_REMOTE_SHARED=await (?:__turbopack_context__|e)\.A\((?<sharedModuleId>[0-9]+)\)/;
+var ASYNC_MODULE_LOADER_RE = /(?:__turbopack_context__|e)\.A\((?<asyncSharedModuleId>[0-9]+)\)/;
+var ASYNC_MODULE_RESOLVE_RE = /(?<ctx>__turbopack_context__|e)=>\{\k<ctx>\.v\((?<inner>parentImport|e)=>Promise\.resolve\(\)\.then\(\(\)=>\k<inner>\((?<sharedModuleId>[0-9]+)\)\)\)\}/;
+var ASYNC_MODULE_ALL_RE = /(?<ctx>__turbopack_context__|e)=>\{\k<ctx>\.v\((?<vCb>parentImport|t)=>Promise\.all\(\["[^"]+"\]\.map\((?<mapCb>chunk|t)=>\k<ctx>\.l\(\k<mapCb>\)\)\)\.then\(\(\)=>\k<vCb>\((?<sharedModuleId>[0-9]+)\)\)\)\}/;
+
+// src/shared/client/shared-modules.ts
+async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {}) {
+  const self = globalThis;
+  self.__remote_shared_modules__ = self.__remote_shared_modules__ ?? {};
+  if (!self.__remote_shared_modules__[bundle]) {
+    self.__remote_shared_modules__[bundle] = {};
+  }
+  const bundleKey = getBundleKey(bundle);
+  const modules = self[`TURBOPACK_${bundleKey}`];
+  let sharedModuleInitializer = null;
+  if (modules && Array.isArray(modules)) {
+    const allModules = modules.flat();
+    const sharedModuleInitializerIndex = allModules.findIndex((idOrFunc) => {
+      if (typeof idOrFunc !== "function") {
+        return false;
+      }
+      const funcCode = idOrFunc.toString();
+      return REMOTE_SHARED_MARKER_RE.test(funcCode);
+    });
+    if (sharedModuleInitializerIndex > 0) {
+      const sharedModuleInitializerCode = allModules[sharedModuleInitializerIndex].toString();
+      const sharedModuleInitializerId = allModules[sharedModuleInitializerIndex - 1];
+      const { sharedModuleId } = REMOTE_SHARED_ASSIGNMENT_RE.exec(sharedModuleInitializerCode)?.groups ?? {};
+      if (sharedModuleId) {
+        const { default: sharedModuleInitializerInstance } = handleTurbopackModule(
+          bundle,
+          sharedModuleId,
+          `[${bundle}] ${sharedModuleInitializerId}`
+        );
+        sharedModuleInitializer = sharedModuleInitializerInstance;
+      }
+    }
+    if (sharedModuleInitializer) {
+      const { shared } = await sharedModuleInitializer;
+      const sharedModuleIds = extractSharedModuleIds(
+        shared,
+        bundleKey,
+        self
+      );
+      return Promise.all(
+        Object.entries(sharedModuleIds).map(async ([id, module2]) => {
+          if (self.__remote_shared_modules__?.[bundle]) {
+            if (hostShared[module2]) {
+              self.__remote_shared_modules__[bundle][id] = await hostShared[module2](bundle);
+            }
+          }
+        })
+      );
+    }
+  }
+  return Promise.all(
+    Object.entries(remoteShared).map(async ([id, module2]) => {
+      if (self.__remote_shared_modules__?.[bundle]) {
+        if (hostShared[module2]) {
+          self.__remote_shared_modules__[bundle][id.replace("[app-ssr]", "[app-client]")] = await hostShared[module2](bundle);
+        } else {
+          console.error(`Shared module "${module2}" not found for "${bundle}".`);
+        }
+      }
+    })
+  );
+}
+function extractSharedModuleIds(shared, bundleKey, self) {
+  return Object.entries(shared).filter(([, value]) => typeof value === "function").reduce((acc, [key, value]) => {
+    const { asyncSharedModuleId } = ASYNC_MODULE_LOADER_RE.exec(value.toString())?.groups ?? {};
+    if (asyncSharedModuleId) {
+      const asyncSharedModuleIdNumber = Number(asyncSharedModuleId);
+      let asyncSharedModule;
+      const newAllModules = self[`TURBOPACK_${bundleKey}`]?.flat() ?? [];
+      const asyncSharedModuleIdIndex = newAllModules.indexOf(
+        asyncSharedModuleIdNumber
+      );
+      if (asyncSharedModuleIdIndex !== -1 && typeof newAllModules[asyncSharedModuleIdIndex + 1] === "function") {
+        asyncSharedModule = newAllModules[asyncSharedModuleIdIndex + 1];
+      }
+      if (asyncSharedModule) {
+        const asyncSharedModuleCode = asyncSharedModule.toString();
+        const { sharedModuleId } = ASYNC_MODULE_RESOLVE_RE.exec(asyncSharedModuleCode)?.groups ?? ASYNC_MODULE_ALL_RE.exec(asyncSharedModuleCode)?.groups ?? {};
+        acc[sharedModuleId ?? asyncSharedModuleId] = key.replace(
+          "__remote_shared_module_",
+          ""
+        );
+      }
+    }
+    return acc;
+  }, {});
+}
+function getSharedModule(bundle, id) {
+  const self = globalThis;
+  for (const [key, value] of Object.entries(
+    self.__remote_shared_modules__?.[bundle] ?? {}
+  )) {
+    if (typeof value !== "undefined" && (typeof id === "string" && id.includes(key) || id === key)) {
+      return value;
+    }
+  }
+  return null;
+}
+
+// src/shared/client/webpack-adapter.ts
+async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location.href), bundle, shared = {}, remoteShared = {}) {
+  const self = globalThis;
+  if (!self.__remote_bundle_url__) {
+    self.__remote_bundle_url__ = {};
+  }
+  self.__remote_bundle_url__[bundle ?? "default"] = url;
+  self.__webpack_get_script_filename__ = () => null;
+  if (typeof self.__webpack_require__ !== "function" || self.__webpack_require_type__ !== "turbopack") {
+    if (!self.__original_webpack_require__ && !self.__original_webpack_chunk_load__) {
+      self.__original_webpack_chunk_load__ = self.__webpack_chunk_load__;
+      self.__original_webpack_require__ = self.__webpack_require__;
+    }
+    self.__webpack_chunk_load__ = createChunkLoader(runtime);
+    self.__webpack_require__ = createModuleRequire(runtime);
+    self.__webpack_require_type__ = runtime;
+    if (self.__remote_webpack_require__ && runtime === RUNTIME_TURBOPACK) {
+      const remoteBundle = bundle ?? "default";
+      self.__remote_webpack_require__[remoteBundle] = self.__webpack_require__;
+      self.__remote_webpack_require__[remoteBundle].type = "turbopack";
+    }
+  }
+  if (runtime === RUNTIME_TURBOPACK) {
+    await Promise.all(
+      scripts.map((script) => {
+        if (script.src) {
+          return self.__webpack_chunk_load__?.(script.src, bundle);
+        }
+        return Promise.resolve(void 0);
+      })
+    );
+  }
+  const coreShared = {
+    react: async () => (await import("react")).default,
+    "react-dom": async () => (await import("react-dom")).default,
+    "react/jsx-dev-runtime": async () => (await import("react/jsx-dev-runtime")).default,
+    "react/jsx-runtime": async () => (await import("react/jsx-runtime")).default,
+    "react-dom/client": async () => (await import("react-dom/client")).default,
+    ...shared
+  };
+  await initializeSharedModules(
+    bundle ?? "default",
+    // include all core modules as shared
+    coreShared,
+    remoteShared
+  );
+}
+function createModuleRequire(runtime) {
+  return (id) => {
+    const self = globalThis;
+    const { bundle, id: moduleId } = id.match(REMOTE_COMPONENT_REGEX)?.groups ?? {
+      bundle: "default",
+      id
+    };
+    const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : runtime;
+    logDebug("WebpackAdapter", `remoteRuntime: "${remoteRuntime}"`);
+    try {
+      if (remoteRuntime === RUNTIME_WEBPACK && bundle && moduleId) {
+        return self.__remote_webpack_require__?.[bundle]?.(moduleId);
+      }
+      const sharedModuleId = moduleId ?? id;
+      const sharedModule = getSharedModule(bundle ?? "default", sharedModuleId);
+      if (sharedModule) {
+        return sharedModule;
+      }
+      if (bundle && moduleId) {
+        return handleTurbopackModule(bundle, moduleId, id);
+      }
+      throw new Error(`Module "${id}" not found.`);
+    } catch (requireError) {
+      logWarn(
+        "WebpackAdapter",
+        `Module require failed: ${String(requireError)}`
+      );
+      if (typeof self.__original_webpack_require__ !== "function") {
+        throw new RemoteComponentsError(
+          `Module "${id}" not found in remote component bundle "${bundle}".`,
+          {
+            cause: requireError instanceof Error ? requireError : void 0
+          }
+        );
+      }
+      try {
+        logDebug("WebpackAdapter", "Falling back to original webpack require");
+        return self.__original_webpack_require__(id);
+      } catch (originalError) {
+        throw new RemoteComponentsError(
+          `Module "${id}" not found in remote component bundle "${bundle}".`,
+          { cause: originalError instanceof Error ? originalError : void 0 }
+        );
+      }
+    }
+  };
+}
+
+// src/shared/client/component-loader.ts
+async function loadRemoteComponent({
+  url,
+  name,
+  rscName,
+  bundle,
+  route = "/",
+  runtime = "webpack",
+  data,
+  nextData,
+  scripts = [],
+  shared = Promise.resolve({}),
+  remoteShared = {},
+  container
+}) {
+  try {
+    if (runtime === "webpack") {
+      const self = globalThis;
+      if (!self.__DISABLE_WEBPACK_EXEC__) {
+        self.__DISABLE_WEBPACK_EXEC__ = {};
+      }
+      self.__DISABLE_WEBPACK_EXEC__[bundle] = true;
+      await loadScripts(scripts);
+    }
+    const hostShared = await shared;
+    logDebug(
+      "ComponentLoader",
+      `loadRemoteComponent: bundle="${bundle}", name="${name}"`
+    );
+    logDebug(
+      "ComponentLoader",
+      `Host shared modules available: ${Object.keys(hostShared)}`
+    );
+    logDebug(
+      "ComponentLoader",
+      `Remote shared modules requested: ${JSON.stringify(remoteShared)}`
+    );
+    await setupWebpackRuntime(
+      runtime,
+      scripts,
+      url,
+      bundle,
+      hostShared,
+      remoteShared
+    );
+    if (bundle) {
+      const resolve = {
+        "/react/index.js": React,
+        "/react/jsx-dev-runtime.js": JSXDevRuntime,
+        "/react/jsx-runtime.js": JSXRuntime,
+        "/react-dom/index.js": ReactDOM,
+        "/react-dom/client.js": ReactDOMClient,
+        ...Object.entries(remoteShared).reduce(
+          (acc, [key, value]) => {
+            if (typeof hostShared[value] !== "undefined") {
+              acc[key.replace(/^\(ssr\)\/(?<relative>\.\/)?/, "")] = hostShared[value];
+            } else {
+              logDebug(
+                "ComponentLoader",
+                `Remote requests "${value}" but host doesn't provide it`
+              );
+            }
+            return acc;
+          },
+          {}
+        )
+      };
+      await Promise.all(
+        Object.entries(resolve).map(async ([key, value]) => {
+          if (typeof value === "function") {
+            resolve[key] = await value(bundle);
+          }
+          return Promise.resolve(value);
+        })
+      );
+      applySharedModules(bundle, resolve);
+    } else {
+      logWarn(
+        "ComponentLoader",
+        "No bundle specified, skipping shared module setup"
+      );
+    }
+    if (data.length > 0) {
+      return await loadRSCComponent(rscName ?? name, data);
+    } else if (nextData) {
+      return loadNextPagesComponent(bundle, route, nextData, name, container);
+    }
+    return loadRSCComponent(rscName ?? name, [`0:[null]
+`]);
+  } catch (error) {
+    return {
+      component: null,
+      error: new RemoteComponentsError(
+        `Failed to load remote component "${name}".`,
+        {
+          cause: error instanceof Error ? error : new Error(String(error))
+        }
+      )
+    };
+  }
+}
+async function loadRSCComponent(rscName, data) {
+  let createFromReadableStream;
+  try {
+    const { createFromReadableStream: _createFromReadableStream } = await import("next/dist/compiled/react-server-dom-webpack/client.browser");
+    createFromReadableStream = _createFromReadableStream;
+  } catch {
+    const {
+      default: { createFromReadableStream: _createFromReadableStream }
+    } = await import("react-server-dom-webpack/client.browser");
+    createFromReadableStream = _createFromReadableStream;
+  }
+  if (typeof createFromReadableStream !== "function") {
+    throw new RemoteComponentsError(
+      'Failed to import "react-server-dom-webpack". Is Next.js installed correctly?'
+    );
+  }
+  const stream = createRSCStream(rscName, data);
+  const component = createFromReadableStream(stream);
+  return { component };
+}
+function loadNextPagesComponent(bundle, route, nextData, name, container) {
+  const { Component, App } = nextClientPagesLoader(bundle, route, container);
+  if (!Component) {
+    throw new RemoteComponentsError(
+      `Remote Component "${name}" is trying to load the component for route "${route}" but it is not available.`
+    );
+  }
+  const component = App ? React.createElement(App, { Component, ...nextData.props }) : React.createElement(Component, nextData.props);
+  return { component };
+}
+
+// src/shared/client/set-attributes-from-props.ts
+var DOMAttributeNames = {
+  acceptCharset: "accept-charset",
+  className: "class",
+  htmlFor: "for",
+  httpEquiv: "http-equiv",
+  noModule: "noModule"
+};
+var ignoreProps = [
+  "onLoad",
+  "onReady",
+  "dangerouslySetInnerHTML",
+  "children",
+  "onError",
+  "strategy",
+  "stylesheets"
+];
+function isBooleanScriptAttribute(attr) {
+  return ["async", "defer", "noModule"].includes(attr);
+}
+function setAttributesFromProps(el, props) {
+  for (const [p, value] of Object.entries(props)) {
+    if (!Object.hasOwn(props, p))
+      continue;
+    if (ignoreProps.includes(p))
+      continue;
+    if (value === void 0) {
+      continue;
+    }
+    const attr = DOMAttributeNames[p] || p.toLowerCase();
+    if (el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr)) {
+      el[attr] = Boolean(value);
+    } else {
+      el.setAttribute(attr, String(value));
+    }
+    if (value === false || el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr) && (!value || value === "false")) {
+      el.setAttribute(attr, "");
+      el.removeAttribute(attr);
+    }
+  }
+}
+
+// src/shared/client/static-loader.ts
+async function loadStaticRemoteComponent(scripts, url) {
+  const self = globalThis;
+  if (self.__remote_script_entrypoint_mount__?.[url.href]) {
+    self.__remote_script_entrypoint_mount__[url.href] = /* @__PURE__ */ new Set();
+  }
+  if (self.__remote_script_entrypoint_unmount__?.[url.href]) {
+    self.__remote_script_entrypoint_unmount__[url.href] = /* @__PURE__ */ new Set();
+  }
+  const mountUnmountSets = await Promise.all(
+    scripts.map(async (script) => {
+      try {
+        let src = typeof script.getAttribute === "function" ? script.getAttribute("src") ?? script.src : script.src;
+        if (!src && script.textContent) {
+          const blob = new Blob(
+            [
+              script.textContent.replace(
+                /import\.meta\.url/g,
+                JSON.stringify(url)
+              )
+            ],
+            {
+              type: "text/javascript"
+            }
+          );
+          src = URL.createObjectURL(blob);
+        }
+        const mod = await import(
+          /* @vite-ignore */
+          /* webpackIgnore: true */
+          new URL(src, url).href
+        );
+        if (src.startsWith("blob:")) {
+          URL.revokeObjectURL(src);
+        }
+        if (typeof mod.mount === "function" || typeof mod.default?.mount === "function") {
+          if (!self.__remote_script_entrypoint_mount__) {
+            self.__remote_script_entrypoint_mount__ = {};
+          }
+          if (!self.__remote_script_entrypoint_mount__[url.href]) {
+            self.__remote_script_entrypoint_mount__[url.href] = /* @__PURE__ */ new Set();
+          }
+          self.__remote_script_entrypoint_mount__[url.href]?.add(
+            mod.mount || mod.default?.mount || (() => {
+            })
+          );
+        }
+        if (typeof mod.unmount === "function" || typeof mod.default?.unmount === "function") {
+          if (!self.__remote_script_entrypoint_unmount__) {
+            self.__remote_script_entrypoint_unmount__ = {};
+          }
+          if (!self.__remote_script_entrypoint_unmount__[url.href]) {
+            self.__remote_script_entrypoint_unmount__[url.href] = /* @__PURE__ */ new Set();
+          }
+          self.__remote_script_entrypoint_unmount__[url.href]?.add(
+            mod.unmount || mod.default?.unmount || (() => {
+            })
+          );
+        }
+        return {
+          mount: mod.mount || mod.default?.mount,
+          unmount: mod.unmount || mod.default?.unmount
+        };
+      } catch (e) {
+        console.error(
+          new RemoteComponentsError(
+            `Error loading remote component script from "${script.src || url.href}".`,
+            { cause: e }
+          )
+        );
+        return {
+          mount: void 0,
+          unmount: void 0
+        };
+      }
+    })
+  );
+  return mountUnmountSets.reduce(
+    (acc, { mount, unmount }) => {
+      if (typeof mount === "function") {
+        acc.mount.add(mount);
+      }
+      if (typeof unmount === "function") {
+        acc.unmount.add(unmount);
+      }
+      return acc;
+    },
+    {
+      mount: /* @__PURE__ */ new Set(),
+      unmount: /* @__PURE__ */ new Set()
+    }
+  );
+}
+
+// src/shared/ssr/fetch-headers.ts
+function remoteFetchHeaders(additionalHeaders) {
+  return {
+    /**
+     * Authenticates deployment protection for the remote. Needed for SSR and SSG clients.
+     * Ensure the automation bypass secret is the same on the client and host.
+     * Otherwise, manually specify x-vercel-protection-bypass for the remote in the `additionalHeaders` parameter.
+     */
+    ...typeof process === "object" && typeof process.env === "object" && typeof process.env.VERCEL_AUTOMATION_BYPASS_SECRET === "string" ? {
+      "x-vercel-protection-bypass": process.env.VERCEL_AUTOMATION_BYPASS_SECRET
+    } : {},
+    ...Object.fromEntries(
+      additionalHeaders instanceof Headers ? additionalHeaders.entries() : Object.entries(additionalHeaders ?? {})
+    ),
+    Accept: "text/html"
+  };
+}
+
+// src/shared/ssr/get-client-or-server-url.ts
+function getClientOrServerUrl(src, serverFallback) {
+  const fallback = typeof location !== "undefined" ? location.href : serverFallback;
+  if (!src) {
+    return new URL(fallback);
+  }
+  return typeof src === "string" ? new URL(src, fallback) : src;
+}
+
+// src/react/hooks/use-shadow-root.ts
 var import_react = require("react");
-var import_react2 = require("react");
-var import_react_dom = require("react-dom");
-var import_apply_origin = require("#internal/shared/client/apply-origin");
-var import_polyfill = require("#internal/shared/client/polyfill");
-var import_remote_component = require("#internal/shared/client/remote-component");
-var import_error = require("#internal/shared/error");
-var import_fetch_headers = require("#internal/shared/ssr/fetch-headers");
-var import_get_client_or_server_url = require("#internal/shared/ssr/get-client-or-server-url");
-var import_utils = require("#internal/shared/utils");
+function useShadowRoot({
+  isolate,
+  mode,
+  keySuffix
+}) {
+  const shadowRootContainerRef = (0, import_react.useRef)(null);
+  const [shadowRoot, setShadowRoot] = (0, import_react.useState)(() => {
+    const self = globalThis;
+    const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
+    const ssrShadowRoot = typeof document !== "undefined" ? document.querySelector(
+      `[data-remote-component-id="shadowroot_${keySuffix}"]`
+    )?.shadowRoot ?? self[shadowRootKey] ?? null : null;
+    self[shadowRootKey] = null;
+    return ssrShadowRoot;
+  });
+  (0, import_react.useLayoutEffect)(() => {
+    if (isolate !== false && typeof document !== "undefined" && (!shadowRoot || !shadowRoot.isConnected)) {
+      const self = globalThis;
+      const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
+      let shadowRootElement = null;
+      const element = document.querySelector(
+        `[data-remote-component-id="shadowroot_${keySuffix}"]`
+      );
+      shadowRootElement = self[shadowRootKey] ?? element?.shadowRoot ?? null;
+      if (!shadowRootElement && element) {
+        try {
+          shadowRootElement = element.attachShadow({ mode });
+          self[shadowRootKey] = shadowRootElement;
+        } catch {
+        }
+      }
+      if (shadowRootElement) {
+        shadowRootElement.querySelectorAll("*:not(link)").forEach((node) => {
+          node.remove();
+        });
+        setShadowRoot(shadowRootElement);
+      }
+    } else if (isolate === false && shadowRoot) {
+      const self = globalThis;
+      const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
+      self[shadowRootKey] = null;
+      setShadowRoot(null);
+    }
+  }, [isolate, shadowRoot, mode, keySuffix]);
+  return { shadowRoot, shadowRootContainerRef };
+}
+
+// src/react/utils/parse-remote-html.ts
+var DUMMY_FALLBACK = "http://remote-components-dummy-fallback";
 function getRemoteComponentHtml(html) {
   if (typeof document === "undefined")
     return html;
@@ -54,7 +1545,13 @@ function getRemoteComponentHtml(html) {
   }
   return "";
 }
-const DUMMY_FALLBACK = "http://remote-components-dummy-fallback";
+
+// src/react/index.tsx
+var import_jsx_runtime2 = (
+  // TODO: remove wrapper div by converting HTML to RSC or React tree
+  require("react/jsx-runtime")
+);
+var import_react3 = require("react");
 function RemoteComponent({
   src,
   isolate,
@@ -70,6 +1567,7 @@ function RemoteComponent({
   onError,
   onChange
 }) {
+  const instanceId = (0, import_react2.useId)();
   const name = (0, import_react2.useMemo)(() => {
     if (typeof src === "string") {
       const url2 = new URL(
@@ -85,19 +1583,14 @@ function RemoteComponent({
     return nameProp;
   }, [src, nameProp]);
   const [data, setData] = (0, import_react2.useState)(null);
-  const url = (0, import_react2.useMemo)(() => (0, import_get_client_or_server_url.getClientOrServerUrl)(src, DUMMY_FALLBACK), [src]);
+  const url = (0, import_react2.useMemo)(() => getClientOrServerUrl(src, DUMMY_FALLBACK), [src]);
   const id = url.origin === (typeof location !== "undefined" ? location.origin : DUMMY_FALLBACK) ? url.pathname : url.href;
-  const keySuffix = `${(0, import_utils.escapeString)(id)}_${(0, import_utils.escapeString)(data?.name ?? name)}`;
+  const keySuffix = `${escapeString(id)}_${escapeString(data?.name ?? name)}_${escapeString(instanceId)}`;
   const [remoteComponent, setRemoteComponent] = (0, import_react2.useState)(null);
-  const shadowRootContainerRef = (0, import_react2.useRef)(null);
-  const [shadowRoot, setShadowRoot] = (0, import_react2.useState)(() => {
-    const self = globalThis;
-    const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
-    const ssrShadowRoot = typeof document !== "undefined" ? document.querySelector(
-      `[data-remote-component-id="shadowroot_${keySuffix}"]`
-    )?.shadowRoot ?? self[shadowRootKey] ?? null : null;
-    self[shadowRootKey] = null;
-    return ssrShadowRoot;
+  const { shadowRoot, shadowRootContainerRef } = useShadowRoot({
+    isolate,
+    mode,
+    keySuffix
   });
   const htmlRef = (0, import_react2.useRef)(
     typeof document !== "undefined" ? document.querySelector(
@@ -125,6 +1618,12 @@ function RemoteComponent({
   const prevRemoteComponentContainerRef = (0, import_react2.useRef)(null);
   const unmountRef = (0, import_react2.useRef)(null);
   const prevNameRef = (0, import_react2.useRef)(void 0);
+  (0, import_react2.useLayoutEffect)(() => {
+    const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
+    return () => {
+      delete globalThis[shadowRootKey];
+    };
+  }, [keySuffix]);
   (0, import_react2.useLayoutEffect)(() => {
     if (childrenRef.current.length > 0 && remoteComponent) {
       childrenRef.current.forEach((el) => {
@@ -132,29 +1631,7 @@ function RemoteComponent({
       });
       childrenRef.current = [];
     }
-    if (isolate !== false && typeof document !== "undefined" && (!shadowRoot || !shadowRoot.isConnected)) {
-      const self = globalThis;
-      const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
-      let shadowRootElement = null;
-      const element = document.querySelector(
-        `[data-remote-component-id="shadowroot_${keySuffix}"]`
-      );
-      shadowRootElement = self[shadowRootKey] ?? element?.shadowRoot ?? null;
-      if (!shadowRootElement && element) {
-        try {
-          shadowRootElement = element.attachShadow({ mode });
-          self[shadowRootKey] = shadowRootElement;
-        } catch {
-        }
-      }
-      if (shadowRootElement) {
-        shadowRootElement.querySelectorAll("*:not(link)").forEach((node) => {
-          node.remove();
-        });
-        setShadowRoot(shadowRootElement);
-      }
-    }
-  }, [isolate, shadowRoot, remoteComponent, mode, keySuffix]);
+  }, [remoteComponent]);
   (0, import_react2.useLayoutEffect)(() => {
     if (shadowRoot && remoteComponent) {
       const resetStyles = shadowRoot.querySelectorAll(
@@ -192,12 +1669,12 @@ function RemoteComponent({
           if (!html && src) {
             const fetchInit = {
               method: "GET",
-              headers: (0, import_fetch_headers.remoteFetchHeaders)(additionalHeaders),
+              headers: remoteFetchHeaders(additionalHeaders),
               credentials
             };
             const res = await fetch(url, fetchInit);
             if (!res.ok) {
-              let error = (0, import_error.failedToFetchRemoteComponentError)(
+              let error = failedToFetchRemoteComponentError(
                 url.href,
                 res
               );
@@ -215,7 +1692,7 @@ function RemoteComponent({
                   "data-next-error-stack"
                 );
                 if (errorMessage) {
-                  error = new import_remote_component.RemoteComponentsError(errorMessage);
+                  error = new RemoteComponentsError(errorMessage);
                   if (errorStack) {
                     error.stack = errorStack;
                   }
@@ -233,7 +1710,7 @@ function RemoteComponent({
           if (doc.querySelectorAll("div[data-bundle][data-route]").length > 1 && !doc.querySelector(
             `div[data-bundle][data-route][id^="${name}"]`
           ) || doc.querySelectorAll("remote-component:not([src])").length > 1 && !doc.querySelector(`remote-component[name="${name}"]`)) {
-            throw (0, import_error.multipleRemoteComponentsError)(url.href);
+            throw multipleRemoteComponentsError(url.href);
           }
           const component = doc.querySelector(`div[data-bundle][data-route][id^="${name}"]`) ?? // fallback to the first element with the data-bundle and data-route attributes when not using a named remote component
           doc.querySelector("div[data-bundle][data-route]") ?? // fallback to Next.js Pages Router
@@ -249,8 +1726,8 @@ function RemoteComponent({
           const metadata = {
             name: remoteName,
             bundle,
-            route: component?.getAttribute("data-route") ?? nextData?.page ?? (url.pathname || import_remote_component.DEFAULT_ROUTE),
-            runtime: component?.getAttribute("data-runtime") ?? (nextData?.props.__REMOTE_COMPONENT__?.runtime || import_remote_component.RUNTIME_SCRIPT)
+            route: component?.getAttribute("data-route") ?? nextData?.page ?? (url.pathname || DEFAULT_ROUTE),
+            runtime: component?.getAttribute("data-runtime") ?? (nextData?.props.__REMOTE_COMPONENT__?.runtime || RUNTIME_SCRIPT)
           };
           const remoteSharedEl = doc.querySelector(
             `#${remoteName}_shared[data-remote-components-shared]`
@@ -258,7 +1735,7 @@ function RemoteComponent({
           const remoteShared = nextData?.props.__REMOTE_COMPONENT__?.shared ?? (JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {});
           remoteSharedEl?.remove();
           if (!component || !(rsc || nextData || isRemoteComponent)) {
-            throw new import_remote_component.RemoteComponentsError(
+            throw new RemoteComponentsError(
               `Remote Component not found on ${url.href}.${remoteName !== "__vercel_remote_component" ? `The name for the <RemoteComponent> is "${remoteName}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
             );
           }
@@ -283,7 +1760,7 @@ function RemoteComponent({
           prevIsRemoteComponentRef.current = isRemoteComponent;
           prevUrlRef.current = url;
           prevNameRef.current = remoteName;
-          (0, import_apply_origin.applyOriginToNodes)(doc, url);
+          applyOriginToNodes(doc, url);
           const links = Array.from(
             doc.querySelectorAll("link[href]")
           ).filter((link) => {
@@ -292,7 +1769,7 @@ function RemoteComponent({
             href: new URL(link.getAttribute("href") ?? link.href, url).href,
             ...link.getAttributeNames().reduce((acc, key) => {
               if (key !== "href") {
-                acc[import_utils.attrToProp[key] ?? key] = link.getAttribute(key) ?? "";
+                acc[attrToProp[key] ?? key] = link.getAttribute(key) ?? "";
               }
               return acc;
             }, {})
@@ -350,16 +1827,16 @@ function RemoteComponent({
               if (typeof props.children === "string") {
                 script.textContent = props.children;
               }
-              (0, import_remote_component.setAttributesFromProps)(script, props);
+              setAttributesFromProps(script, props);
               document.head.appendChild(script);
             });
             self.__next_s = prevNextScripts;
           }
           let rscName;
           if (rsc) {
-            rscName = `__remote_component_rsc_${(0, import_utils.escapeString)(
+            rscName = `__remote_component_rsc_${escapeString(
               id
-            )}_${(0, import_utils.escapeString)(remoteName)}`;
+            )}_${escapeString(remoteName)}`;
             rsc.textContent = rsc.textContent?.replace(
               new RegExp(`self\\["${remoteName}"\\]`, "g"),
               `self["${rscName}"]`
@@ -383,7 +1860,7 @@ function RemoteComponent({
               throw e;
             });
           } else if ("__remote_components_missing_shared__" in remoteShared) {
-            throw new import_remote_component.RemoteComponentsError(
+            throw new RemoteComponentsError(
               remoteShared.__remote_components_missing_shared__
             );
           }
@@ -404,7 +1881,7 @@ function RemoteComponent({
               }
               shadowRoot.innerHTML = shadowRootHtml;
               setRemoteComponent(null);
-              const { mount, unmount } = await (0, import_remote_component.loadStaticRemoteComponent)(
+              const { mount, unmount } = await loadStaticRemoteComponent(
                 Array.from(shadowRoot.querySelectorAll("script")),
                 url
               );
@@ -415,7 +1892,7 @@ function RemoteComponent({
               onLoad?.(src);
             } else if (isolate === false) {
               setRemoteComponent(
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "div",
                   {
                     dangerouslySetInnerHTML: { __html: component.innerHTML },
@@ -423,7 +1900,7 @@ function RemoteComponent({
                   }
                 )
               );
-              const { mount, unmount } = await (0, import_remote_component.loadStaticRemoteComponent)(
+              const { mount, unmount } = await loadStaticRemoteComponent(
                 Array.from(component.querySelectorAll("script")),
                 url
               );
@@ -436,7 +1913,7 @@ function RemoteComponent({
               onLoad?.(src);
             }
           } else {
-            const result = await (0, import_remote_component.loadRemoteComponent)({
+            const result = await loadRemoteComponent({
               url,
               name: remoteName,
               rscName,
@@ -447,7 +1924,7 @@ function RemoteComponent({
               nextData,
               scripts: Array.from(scripts).map((script) => {
                 const scriptSrc = script.getAttribute("data-src") || script.getAttribute("src") || script.src;
-                const { prefix, id: path } = import_remote_component.REMOTE_COMPONENT_REGEX.exec(
+                const { prefix, id: path } = REMOTE_COMPONENT_REGEX.exec(
                   scriptSrc
                 )?.groups ?? {
                   prefix: void 0,
@@ -464,7 +1941,7 @@ function RemoteComponent({
                 };
               }),
               shared: {
-                ...(0, import_polyfill.sharedPolyfills)(userShared),
+                ...sharedPolyfills(userShared),
                 ...userShared
               },
               remoteShared,
@@ -515,14 +1992,14 @@ function RemoteComponent({
   if (remoteComponent instanceof Error) {
     throw remoteComponent;
   }
-  const metadataJson = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", { "data-remote-component": true, type: "application/json", children: JSON.stringify({
+  const metadataJson = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("script", { "data-remote-component": true, type: "application/json", children: JSON.stringify({
     name: data?.name || name,
     bundle: data?.bundle || "default",
-    route: data?.route || import_remote_component.DEFAULT_ROUTE,
-    runtime: prevIsRemoteComponentRef.current ? import_remote_component.RUNTIME_SCRIPT : data?.runtime || import_remote_component.RUNTIME_WEBPACK
+    route: data?.route || DEFAULT_ROUTE,
+    runtime: prevIsRemoteComponentRef.current ? RUNTIME_SCRIPT : data?.runtime || RUNTIME_WEBPACK
   }) });
-  const resetStyle = reset ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { "data-remote-components-reset": "react", children: `:host { all: initial; }` }) : null;
-  const linksToRender = data?.links?.map((link) => /* @__PURE__ */ (0, import_react.createElement)(
+  const resetStyle = reset ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { "data-remote-components-reset": "react", children: `:host { all: initial; }` }) : null;
+  const linksToRender = data?.links?.map((link) => /* @__PURE__ */ (0, import_react3.createElement)(
     "link",
     {
       ...link,
@@ -530,7 +2007,7 @@ function RemoteComponent({
       key: JSON.stringify(link)
     }
   )) || null;
-  const componentToRender = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  const componentToRender = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     resetStyle,
     linksToRender,
     remoteComponent ?? children
@@ -539,7 +2016,7 @@ function RemoteComponent({
     shadowRoot.innerHTML = componentHydrationHtml.current;
     componentHydrationHtml.current = null;
     if (prevIsRemoteComponentRef.current) {
-      (0, import_remote_component.loadStaticRemoteComponent)(
+      loadStaticRemoteComponent(
         Array.from(shadowRoot.querySelectorAll("script")),
         url
       ).then(({ mount }) => {
@@ -551,7 +2028,7 @@ function RemoteComponent({
           onLoad?.(src);
         }
       }).catch((e) => {
-        const error = new import_remote_component.RemoteComponentsError(
+        const error = new RemoteComponentsError(
           `Error mounting remote component from "${url.href}"`,
           {
             cause: e
@@ -567,9 +2044,9 @@ function RemoteComponent({
     if (shadowRemoteComponentHtml) {
       shadowRemoteComponentHtml.remove();
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
       metadataJson,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "div",
         {
           "data-remote-component-id": `shadowroot_${keySuffix}`,
@@ -578,8 +2055,8 @@ function RemoteComponent({
           children: [
             typeof document === "undefined" ? (
               // eslint-disable-next-line react/no-unknown-property
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("template", { shadowrootmode: mode, children: [
-                typeof document === "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("template", { shadowrootmode: mode, children: [
+                typeof document === "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "div",
                   {
                     dangerouslySetInnerHTML: {
@@ -601,12 +2078,12 @@ function RemoteComponent({
               ] })
             ) : null,
             shadowRoot && remoteComponent ? (0, import_react_dom.createPortal)(
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("template", { id: `${name}_start` }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("template", { id: `${name}_start` }),
                 resetStyle,
                 linksToRender,
                 remoteComponent,
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("template", { id: `${name}_end`, ref: endTemplateRef })
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("template", { id: `${name}_end`, ref: endTemplateRef })
               ] }),
               shadowRoot
             ) : null
@@ -616,11 +2093,11 @@ function RemoteComponent({
     ] });
   }
   htmlRef.current = null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("template", { id: `${name}_start` }),
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("template", { id: `${name}_start` }),
     metadataJson,
     componentToRender,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("template", { id: `${name}_end`, ref: endTemplateRef })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("template", { id: `${name}_end`, ref: endTemplateRef })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node: