remote-components 0.0.33 → 0.0.35

package/dist/html/host.js

@@ -8,38 +8,6 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
-// src/shared/webpack/shared-modules.ts
-function applySharedModules(bundle, 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 ?? {}
-    );
-    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));
-      }
-      for (let id of ids) {
-        const webpackBundle = self.__remote_webpack_require__[bundle];
-        if (webpackBundle.m) {
-          if (self.__remote_webpack_module_map__?.[bundle]?.[id]) {
-            id = `${self.__remote_webpack_module_map__[bundle][id]}`;
-          }
-          webpackBundle.m[id] = (module) => {
-            module.exports = value;
-          };
-        }
-      }
-    }
-  }
-}
-var init_shared_modules = __esm({
-  "src/shared/webpack/shared-modules.ts"() {
-    "use strict";
-  }
-});
-
 // src/shared/error.ts
 function multipleRemoteComponentsError(url) {
   return new Error(
@@ -57,9 +25,9 @@ var init_error = __esm({
   "src/shared/error.ts"() {
     "use strict";
     RemoteComponentsError = class extends Error {
+      code = "REMOTE_COMPONENTS_ERROR";
       constructor(message, options) {
         super(message, options);
-        this.code = "REMOTE_COMPONENTS_ERROR";
         this.name = "RemoteComponentsError";
       }
     };
@@ -184,6 +152,38 @@ var init_next_client_pages_loader = __esm({
   }
 });
 
+// src/shared/webpack/shared-modules.ts
+function applySharedModules(bundle, 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 ?? {}
+    );
+    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));
+      }
+      for (let id of ids) {
+        const webpackBundle = self.__remote_webpack_require__[bundle];
+        if (webpackBundle.m) {
+          if (self.__remote_webpack_module_map__?.[bundle]?.[id]) {
+            id = `${self.__remote_webpack_module_map__[bundle][id]}`;
+          }
+          webpackBundle.m[id] = (module) => {
+            module.exports = value;
+          };
+        }
+      }
+    }
+  }
+}
+var init_shared_modules = __esm({
+  "src/shared/webpack/shared-modules.ts"() {
+    "use strict";
+  }
+});
+
 // src/shared/utils/index.ts
 function escapeString(str) {
   return str.replace(/[^a-z0-9]/g, "_");
@@ -372,7 +372,10 @@ async function handleTurbopackChunk(code, bundle, url) {
 function createModuleRequire(runtime) {
   return (id) => {
     const self = globalThis;
-    const { bundle, id: moduleId } = id.match(REMOTE_COMPONENT_REGEX)?.groups ?? { bundle: "default", id };
+    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;
     try {
       if (remoteRuntime === RUNTIME_WEBPACK && bundle && moduleId) {
@@ -715,6 +718,106 @@ var init_webpack_adapter = __esm({
   }
 });
 
+// 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()
+    }
+  );
+}
+var init_static_loader = __esm({
+  "src/shared/client/static-loader.ts"() {
+    "use strict";
+    init_error();
+  }
+});
+
 // src/shared/client/polyfill.tsx
 import { jsx } from "react/jsx-runtime";
 function applyBundleUrlToSrc(bundle, src) {
@@ -1024,10 +1127,10 @@ async function webpackRuntime(bundle, shared, remoteShared) {
 var init_webpack = __esm({
   "src/html/host/runtime/webpack.ts"() {
     "use strict";
+    init_polyfill();
     init_error();
-    init_shared_modules();
     init_next_client_pages_loader();
-    init_polyfill();
+    init_shared_modules();
   }
 });
 
@@ -1078,10 +1181,35 @@ async function turbopackRuntime(url, bundle, shared, remoteShared) {
 var init_turbopack = __esm({
   "src/html/host/runtime/turbopack.ts"() {
     "use strict";
-    init_shared_modules();
-    init_next_client_pages_loader();
-    init_webpack_adapter();
     init_polyfill();
+    init_webpack_adapter();
+    init_next_client_pages_loader();
+    init_shared_modules();
+  }
+});
+
+// src/html/host/runtime/script.ts
+var script_exports = {};
+__export(script_exports, {
+  scriptRuntime: () => scriptRuntime
+});
+function scriptRuntime() {
+  const self = globalThis;
+  return {
+    self,
+    createFromReadableStream: () => Promise.resolve(null),
+    applySharedModules: () => Promise.resolve(),
+    nextClientPagesLoader: () => ({
+      Component: null,
+      App: null
+    }),
+    preloadScripts: loadStaticRemoteComponent
+  };
+}
+var init_script = __esm({
+  "src/html/host/runtime/script.ts"() {
+    "use strict";
+    init_static_loader();
   }
 });
 
@@ -1089,19 +1217,75 @@ var init_turbopack = __esm({
 import { startTransition, useLayoutEffect } from "react";
 import { hydrateRoot } from "react-dom/client";
 
+// 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/remote-component.ts
+init_error();
+
 // src/shared/client/component-loader.ts
-init_shared_modules();
-init_next_client_pages_loader();
 init_error();
-init_webpack_adapter();
+init_next_client_pages_loader();
+init_shared_modules();
 import * as React from "react";
-import * as ReactDOM from "react-dom";
-import * as ReactDOMClient from "react-dom/client";
 import * as JSXDevRuntime from "react/jsx-dev-runtime";
 import * as JSXRuntime from "react/jsx-runtime";
-
-// src/shared/client/script-loader.ts
-init_error();
+import * as ReactDOM from "react-dom";
+import * as ReactDOMClient from "react-dom/client";
 
 // src/shared/client/rsc.ts
 import { ReadableStream } from "web-streams-polyfill";
@@ -1169,13 +1353,19 @@ function createRSCStream(rscName, data) {
   });
 }
 
-// src/shared/client/remote-component.ts
+// src/shared/client/script-loader.ts
+init_error();
+
+// src/shared/client/component-loader.ts
 init_webpack_adapter();
+
+// src/shared/client/remote-component.ts
 init_const();
-init_error();
+init_static_loader();
+init_webpack_adapter();
 
 // src/html/host/index.tsx
-init_utils();
+init_error();
 
 // src/shared/ssr/fetch-headers.ts
 function remoteFetchHeaders(additionalHeaders) {
@@ -1195,65 +1385,8 @@ function remoteFetchHeaders(additionalHeaders) {
   };
 }
 
-// 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/html/host/index.tsx
-init_error();
+init_utils();
 
 // src/html/host/runtime/index.ts
 init_error();
@@ -1269,9 +1402,12 @@ async function getRuntime(type, url, bundle, shared, remoteShared) {
   } else if (type === "turbopack") {
     const { turbopackRuntime: turbopackRuntime2 } = await Promise.resolve().then(() => (init_turbopack(), turbopack_exports));
     return turbopackRuntime2(url, bundle, shared, remoteShared);
+  } else if (type === "script") {
+    const { scriptRuntime: scriptRuntime2 } = await Promise.resolve().then(() => (init_script(), script_exports));
+    return scriptRuntime2();
   }
   throw new RemoteComponentsError(
-    `Remote Components runtime "${type}" is not supported. Supported runtimes are "webpack" and "turbopack".`
+    `Remote Components runtime "${type}" is not supported. Supported runtimes are "webpack", "turbopack", and "script".`
   );
 }
 
@@ -1279,13 +1415,17 @@ async function getRuntime(type, url, bundle, shared, remoteShared) {
 import { jsx as jsx2 } from "react/jsx-runtime";
 if (typeof HTMLElement !== "undefined") {
   class RemoteComponent extends HTMLElement {
-    constructor() {
-      super(...arguments);
-      this.__next = null;
-      this.fouc = null;
-      this.isLoading = false;
-      this.root = null;
-    }
+    name;
+    bundle;
+    fallbackSlot;
+    __next = null;
+    fouc = null;
+    isLoading = false;
+    prevIsRemoteComponent = false;
+    prevUrl;
+    root = null;
+    reactRoot;
+    additionalHeaders;
     static get observedAttributes() {
       return ["src", "name", "mode"];
     }
@@ -1397,23 +1537,27 @@ if (typeof HTMLElement !== "undefined") {
       }
       const parser = new DOMParser();
       const doc = parser.parseFromString(html, "text/html");
-      if (doc.querySelectorAll("div[data-bundle][data-route]").length > 1 && !doc.querySelector(`div[data-bundle][data-route][id^="${this.name}"]`)) {
+      if (doc.querySelectorAll("div[data-bundle][data-route]").length > 1 && !doc.querySelector(
+        `div[data-bundle][data-route][id^="${this.name}"]`
+      ) || doc.querySelectorAll("remote-component").length > 1 && !doc.querySelector(`remote-component[name="${this.name}"]`)) {
         throw multipleRemoteComponentsError(
           url?.href ?? (this.getAttribute("src") || "unknown")
         );
       }
       const component = doc.querySelector(`div[data-bundle][data-route][id^="${this.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
-      doc.querySelector("div#__next");
+      doc.querySelector("div#__next") ?? // fallback to a <remote-component> element
+      doc.querySelector(`remote-component[name="${this.name}"]:not([src])`) ?? doc.querySelector("remote-component:not([src])");
       const nextData = JSON.parse(
         (doc.querySelector("#__NEXT_DATA__") ?? doc.querySelector("#__REMOTE_NEXT_DATA__"))?.textContent ?? "null"
       );
+      const isRemoteComponent = component?.tagName.toLowerCase() === "remote-component";
       if (nextData && nextData.buildId === "development" && !this.reactRoot) {
         this.fouc = document.createElement("style");
         this.fouc.textContent = `:host { display: none; }`;
         this.root.appendChild(this.fouc);
       }
-      this.name = component?.getAttribute("id")?.replace(/_ssr$/, "") || (nextData ? "__next" : this.name);
+      this.name = component?.getAttribute("id")?.replace(/_ssr$/, "") || isRemoteComponent && component.getAttribute("name") || (nextData ? "__next" : this.name);
       const rsc = doc.querySelector(`#${this.name}_rsc`);
       this.bundle = component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle || this.bundle;
       if (url) {
@@ -1426,12 +1570,13 @@ if (typeof HTMLElement !== "undefined") {
       const metadata = document.createElement("script");
       metadata.type = "application/json";
       metadata.setAttribute("data-remote-component", "");
-      metadata.textContent = JSON.stringify({
+      const metadataObj = {
         name: this.name,
         bundle: this.bundle,
-        route: component?.getAttribute("data-route") ?? nextData?.page ?? "/",
-        runtime: component?.getAttribute("data-runtime") ?? nextData?.props.__REMOTE_COMPONENT__?.runtime
-      });
+        route: component?.getAttribute("data-route") ?? nextData?.page ?? url?.pathname ?? "/",
+        runtime: component?.getAttribute("data-runtime") ?? nextData?.props.__REMOTE_COMPONENT__?.runtime ?? "script"
+      };
+      metadata.textContent = JSON.stringify(metadataObj);
       if (this.previousElementSibling?.getAttribute("data-remote-component") !== null) {
         this.previousElementSibling?.remove();
       }
@@ -1446,11 +1591,38 @@ if (typeof HTMLElement !== "undefined") {
           remoteShared.__remote_components_missing_shared__
         );
       }
-      if (!component || !(rsc || nextData)) {
+      if (!component || !(rsc || nextData || isRemoteComponent)) {
         throw new RemoteComponentsError(
           `Remote Component not found on ${src}.${this.name !== "__vercel_remote_component" ? ` The name for the <RemoteComponent> is "${this.name}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
         );
       }
+      if (this.prevIsRemoteComponent) {
+        if (this.prevUrl) {
+          const prevUrl = this.prevUrl;
+          const self2 = globalThis;
+          if (self2.__remote_script_entrypoint_unmount__?.[prevUrl.href]) {
+            await Promise.all(
+              Array.from(
+                self2.__remote_script_entrypoint_unmount__[prevUrl.href] ?? []
+              ).map(async (unmount) => {
+                try {
+                  await unmount(this.root);
+                } catch (e) {
+                  console.error(
+                    new RemoteComponentsError(
+                      `Error while calling unmount() for Remote Component from ${prevUrl.href}.`,
+                      { cause: e }
+                    )
+                  );
+                }
+              })
+            );
+          }
+        }
+        this.root.innerHTML = "";
+      }
+      this.prevUrl = url ?? new URL(location.href);
+      this.prevIsRemoteComponent = isRemoteComponent;
       const removable = Array.from(this.childNodes);
       const links = doc.querySelectorAll("link[href]");
       const remoteComponentSrc = this.getAttribute("src");
@@ -1516,7 +1688,35 @@ if (typeof HTMLElement !== "undefined") {
       applyOriginToNodes(doc, url ?? new URL(location.href));
       if (!this.reactRoot) {
         Array.from(component.children).forEach((el) => {
-          this.root?.appendChild(el);
+          if (!isRemoteComponent && el.tagName.toLowerCase() === "script") {
+            const newScript = document.createElement("script");
+            for (const attr of el.attributes) {
+              if (attr.name === "src") {
+                newScript.setAttribute(
+                  attr.name,
+                  new URL(attr.value, url ?? location.origin).href
+                );
+              } else {
+                newScript.setAttribute(attr.name, attr.value);
+              }
+            }
+            newScript.textContent = el.textContent;
+            if (remoteComponentSrc) {
+              newScript.setAttribute(
+                "data-remote-component-src",
+                remoteComponentSrc
+              );
+            }
+            this.root?.appendChild(newScript);
+          } else {
+            const newEl = el.cloneNode(true);
+            for (const attr of el.attributes) {
+              if (attr.name.startsWith("on")) {
+                newEl.setAttribute(attr.name, attr.value);
+              }
+            }
+            this.root?.appendChild(newEl);
+          }
         });
       }
       for (const el of removable) {
@@ -1555,7 +1755,7 @@ if (typeof HTMLElement !== "undefined") {
         nextClientPagesLoader: nextClientPagesLoader2,
         preloadScripts
       } = await getRuntime(
-        component.getAttribute("data-runtime") ?? "webpack",
+        metadataObj.runtime,
         url ?? new URL(location.href),
         this.bundle,
         {
@@ -1567,8 +1767,8 @@ if (typeof HTMLElement !== "undefined") {
         },
         remoteShared
       );
-      const scripts = doc.querySelectorAll(
-        "script[src],script[data-src]"
+      const scripts = isRemoteComponent ? component.querySelectorAll("script") : doc.querySelectorAll(
+        "script[src],script[data-src],script[data-remote-component-entrypoint]"
       );
       if (!url) {
         url = new URL(
@@ -1582,6 +1782,13 @@ if (typeof HTMLElement !== "undefined") {
         this.bundle ?? "default",
         this.name ?? "__vercel_remote_component"
       );
+      if (isRemoteComponent) {
+        Array.from(component.children).forEach((child) => {
+          if (child.tagName === "SCRIPT") {
+            child.remove();
+          }
+        });
+      }
       const doCleanup = () => {
         if (this.root && remoteComponentSrc) {
           const selector = `[data-remote-component-src]:not([data-remote-component-src="${remoteComponentSrc}"])`;
@@ -1681,7 +1888,7 @@ if (typeof HTMLElement !== "undefined") {
                 });
               }
               remoteComponent.isLoading = false;
-            }, [initial]);
+            }, [initial, remoteComponent]);
             return NextApp ? /* @__PURE__ */ jsx2(NextApp, { Component: NextComponent, ...nextData.props }) : /* @__PURE__ */ jsx2(NextComponent, { ...nextData.props });
           })(App, Component, this);
           if (this.reactRoot) {
@@ -1703,6 +1910,23 @@ if (typeof HTMLElement !== "undefined") {
         if (this.fouc) {
           this.root.removeChild(this.fouc);
         }
+      } else if (self.__remote_script_entrypoint_mount__?.[url.href]) {
+        await Promise.all(
+          Array.from(
+            self.__remote_script_entrypoint_mount__[url.href] ?? []
+          ).map(async (mount) => {
+            try {
+              await mount(this.root);
+            } catch (e) {
+              console.error(
+                new RemoteComponentsError(
+                  `Error while calling mount() for Remote Component from ${url.href}.`,
+                  { cause: e }
+                )
+              );
+            }
+          })
+        );
       }
       this.isLoading = false;
     }