remote-components 0.0.50 → 0.0.51

package/dist/html/host.cjs

@@ -270,6 +270,121 @@ var init_shared_modules = __esm({
   }
 });
 
+// src/shared/constants.ts
+var RC_PROTECTED_REMOTE_FETCH_PATHNAME;
+var init_constants = __esm({
+  "src/shared/constants.ts"() {
+    "use strict";
+    RC_PROTECTED_REMOTE_FETCH_PATHNAME = "/rc-fetch-protected-remote";
+  }
+});
+
+// src/shared/client/protected-rc-fallback.ts
+function generateProtectedRcFallbackSrc(url) {
+  return `${RC_PROTECTED_REMOTE_FETCH_PATHNAME}?url=${encodeURIComponent(url)}`;
+}
+var init_protected_rc_fallback = __esm({
+  "src/shared/client/protected-rc-fallback.ts"() {
+    "use strict";
+    init_constants();
+  }
+});
+
+// src/shared/client/webpack-patterns.ts
+var NEXT_BUNDLE_PATH_RE;
+var init_webpack_patterns = __esm({
+  "src/shared/client/webpack-patterns.ts"() {
+    "use strict";
+    NEXT_BUNDLE_PATH_RE = /\/_next\/\[.+\](?:%20| )/;
+  }
+});
+
+// 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_BUNDLE_PATH_RE, "/_next/"),
+          location.origin
+        ).href;
+        const loadScriptWithProtectedRcFallback = (src, isFallback = false) => {
+          const newScript = document.createElement("script");
+          newScript.onload = () => {
+            if (isFallback) {
+              logInfo(
+                "ScriptLoader",
+                `Successfully loaded <script src="${newSrc}"> using fallback.`
+              );
+            }
+            resolve();
+          };
+          newScript.onerror = () => {
+            if (!isFallback) {
+              const fallbackSrc = generateProtectedRcFallbackSrc(newSrc);
+              logWarn(
+                "ScriptLoader",
+                `Failed to load <script src="${newSrc}"> for Remote Component. Trying fallback with ${RC_PROTECTED_REMOTE_FETCH_PATHNAME} (withRemoteComponentsHost)...`
+              );
+              loadScriptWithProtectedRcFallback(fallbackSrc, true);
+            } else {
+              logError(
+                "ScriptLoader",
+                `Failed to load fallback for <script src="${newSrc}"> for Remote Component.`
+              );
+              reject(
+                new RemoteComponentsError(
+                  `Failed to load <script src="${newSrc}"> for Remote Component. Check the URL is correct.`
+                )
+              );
+            }
+          };
+          newScript.src = src;
+          newScript.async = true;
+          document.head.appendChild(newScript);
+        };
+        loadScriptWithProtectedRcFallback(newSrc);
+      });
+    })
+  );
+}
+var init_script_loader = __esm({
+  "src/shared/client/script-loader.ts"() {
+    "use strict";
+    init_constants();
+    init_error();
+    init_logger();
+    init_protected_rc_fallback();
+    init_webpack_patterns();
+  }
+});
+
+// src/shared/utils/index.ts
+function escapeString(str) {
+  return str.replace(/[^a-z0-9]/g, "_");
+}
+var init_utils = __esm({
+  "src/shared/utils/index.ts"() {
+    "use strict";
+  }
+});
+
+// src/shared/client/const.ts
+function getBundleKey(bundle) {
+  return escapeString(bundle);
+}
+var RUNTIME_WEBPACK, RUNTIME_TURBOPACK, REMOTE_COMPONENT_REGEX;
+var init_const = __esm({
+  "src/shared/client/const.ts"() {
+    "use strict";
+    init_utils();
+    RUNTIME_WEBPACK = "webpack";
+    RUNTIME_TURBOPACK = "turbopack";
+    REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
+  }
+});
+
 // src/shared/utils/abort.ts
 function isAbortError(error) {
   if (error instanceof DOMException && error.name === "AbortError") {
@@ -287,7 +402,7 @@ var init_abort = __esm({
   }
 });
 
-// src/shared/ssr/fetch-with-protected-rc-fallback.ts
+// src/shared/client/fetch-with-protected-rc-fallback.ts
 async function fetchWithProtectedRcFallback(url, init) {
   try {
     const res = await fetch(url, init);
@@ -296,16 +411,21 @@ async function fetchWithProtectedRcFallback(url, init) {
     if (isAbortError(error)) {
       throw error;
     }
-    if (typeof document === "object" && typeof document.location === "object" && document.location.origin !== new URL(url).origin) {
-      logInfo(
+    const parsedUrl = new URL(url);
+    if (typeof document === "object" && typeof document.location === "object" && document.location.origin !== parsedUrl.origin) {
+      logWarn(
         "FetchRemoteComponent",
         "Request failed due to CORS, attempting to fetch it via the withRemoteComponentsHost proxy."
       );
       const proxiedRes = await fetch(
-        `${RC_PROTECTED_REMOTE_FETCH_PATHNAME}?url=${url}`,
+        generateProtectedRcFallbackSrc(parsedUrl.href),
         init?.signal ? { signal: init.signal } : void 0
       );
       if (proxiedRes.status === 200) {
+        logInfo(
+          "FetchRemoteComponent",
+          `Successfully fetched ${parsedUrl.href} with fallback withRemoteComponentsHost proxy`
+        );
         return proxiedRes;
       } else {
         logError(
@@ -317,43 +437,17 @@ async function fetchWithProtectedRcFallback(url, init) {
     throw error;
   }
 }
-var RC_PROTECTED_REMOTE_FETCH_PATHNAME;
 var init_fetch_with_protected_rc_fallback = __esm({
-  "src/shared/ssr/fetch-with-protected-rc-fallback.ts"() {
+  "src/shared/client/fetch-with-protected-rc-fallback.ts"() {
     "use strict";
+    init_protected_rc_fallback();
     init_abort();
     init_logger();
-    RC_PROTECTED_REMOTE_FETCH_PATHNAME = "/rc-fetch-protected-remote";
-  }
-});
-
-// src/shared/utils/index.ts
-function escapeString(str) {
-  return str.replace(/[^a-z0-9]/g, "_");
-}
-var init_utils = __esm({
-  "src/shared/utils/index.ts"() {
-    "use strict";
-  }
-});
-
-// src/shared/client/const.ts
-function getBundleKey(bundle) {
-  return escapeString(bundle);
-}
-var RUNTIME_WEBPACK, RUNTIME_TURBOPACK, REMOTE_COMPONENT_REGEX;
-var init_const = __esm({
-  "src/shared/client/const.ts"() {
-    "use strict";
-    init_utils();
-    RUNTIME_WEBPACK = "webpack";
-    RUNTIME_TURBOPACK = "turbopack";
-    REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
   }
 });
 
 // src/shared/client/turbopack-patterns.ts
-var REMOTE_SHARED_MARKER_RE, REMOTE_SHARED_ASSIGNMENT_RE, ASYNC_MODULE_LOADER_RE, ASYNC_MODULE_RESOLVE_RE, ASYNC_MODULE_ALL_RE, NUMERIC_MODULE_ID_RE, TURBOPACK_GLOBAL_RE;
+var REMOTE_SHARED_MARKER_RE, REMOTE_SHARED_ASSIGNMENT_RE, ASYNC_MODULE_LOADER_RE, ASYNC_MODULE_RESOLVE_RE, ASYNC_MODULE_ALL_RE, TURBOPACK_GLOBAL_RE;
 var init_turbopack_patterns = __esm({
   "src/shared/client/turbopack-patterns.ts"() {
     "use strict";
@@ -362,7 +456,6 @@ var init_turbopack_patterns = __esm({
     ASYNC_MODULE_LOADER_RE = /(?:__turbopack_context__|e)\.A\((?<asyncSharedModuleId>[0-9]+)\)/;
     ASYNC_MODULE_RESOLVE_RE = /(?<ctx>__turbopack_context__|e)=>\{\k<ctx>\.v\((?<inner>parentImport|e)=>Promise\.resolve\(\)\.then\(\(\)=>\k<inner>\((?<sharedModuleId>[0-9]+)\)\)\)\}/;
     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]+)\)\)\)\}/;
-    NUMERIC_MODULE_ID_RE = /^[0-9]+$/;
     TURBOPACK_GLOBAL_RE = /(?:globalThis|self)\s*(?:\.TURBOPACK|\[\s*["']TURBOPACK["']\s*\])/;
   }
 });
@@ -569,9 +662,9 @@ var init_chunk_loader = __esm({
   "src/shared/client/chunk-loader.ts"() {
     "use strict";
     init_error();
-    init_fetch_with_protected_rc_fallback();
     init_logger();
     init_const();
+    init_fetch_with_protected_rc_fallback();
     init_turbopack_patterns();
   }
 });
@@ -580,10 +673,14 @@ var init_chunk_loader = __esm({
 function handleTurbopackModule(bundle, moduleId, id) {
   const self = globalThis;
   const bundleKey = getBundleKey(bundle);
-  let modules = self[`TURBOPACK_${bundleKey}`];
-  if (modules && typeof modules === "object" && "__chunks__" in modules) {
-    const chunks = modules.__chunks__;
-    modules = chunks.flat();
+  const raw = self[`TURBOPACK_${bundleKey}`];
+  let modules;
+  if (raw && typeof raw === "object" && "__chunks__" in raw) {
+    modules = raw.__chunks__.flat();
+  } else if (Array.isArray(raw)) {
+    modules = raw.flat();
+  } else {
+    modules = raw;
   }
   if (!self.__remote_components_turbopack_modules__) {
     self.__remote_components_turbopack_modules__ = {};
@@ -612,13 +709,12 @@ function handleTurbopackModule(bundle, moduleId, id) {
   if (!self.__remote_components_turbopack_global__[bundle]) {
     self.__remote_components_turbopack_global__[bundle] = {};
   }
-  const allModules = Array.isArray(modules) ? modules.flat() : modules ? Object.values(modules) : [];
   moduleInit(
     createTurbopackContext(
       bundle,
       exports,
       moduleExports,
-      allModules,
+      modules,
       moduleInit,
       id,
       self
@@ -632,46 +728,27 @@ function handleTurbopackModule(bundle, moduleId, id) {
   return moduleExports.exports;
 }
 function findModuleInit(modules, moduleId) {
-  if (modules && !Array.isArray(modules) && typeof modules === "object") {
-    const normalizedId = NUMERIC_MODULE_ID_RE.test(moduleId) ? Number(moduleId) : moduleId;
-    if (normalizedId in modules) {
-      return modules[normalizedId];
-    }
-    if (typeof normalizedId === "number" && String(normalizedId) in modules) {
-      return modules[String(normalizedId)];
-    }
-    const matchingKey = Object.keys(modules).find(
-      (key) => typeof key === "string" && key.includes(String(moduleId))
+  if (!modules || typeof modules !== "object")
+    return;
+  if (!Array.isArray(modules)) {
+    const key = moduleId in modules ? moduleId : Object.keys(modules).find((k) => k.startsWith(moduleId));
+    return key !== void 0 ? modules[key] : void 0;
+  }
+  const flat = modules.flat();
+  let idx = flat.findIndex((e) => String(e) === String(moduleId));
+  if (idx < 0) {
+    idx = flat.findIndex(
+      (e) => typeof e === "string" && e.startsWith(moduleId)
     );
-    if (matchingKey) {
-      return modules[matchingKey];
-    }
-    logError("TurbopackModule", `No match found for module ID: ${moduleId}`);
-    return void 0;
-  }
-  const allModules = modules?.flat() ?? [];
-  if (typeof allModules[1] === "string" || typeof allModules[1] === "number") {
-    const normalizedId = NUMERIC_MODULE_ID_RE.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;
+  if (idx >= 0) {
+    return flat.slice(idx + 1).find((e) => typeof e === "function");
+  }
+  return flat.find(
+    (e) => Boolean(e && typeof e === "object" && moduleId in e)
+  )?.[moduleId];
 }
-function createTurbopackContext(bundle, exports, moduleExports, allModules, moduleInit, id, self) {
+function createTurbopackContext(bundle, exports, moduleExports, modules, moduleInit, id, self) {
   return {
     // HMR not implemented for Remote Components
     k: {
@@ -792,13 +869,17 @@ function createTurbopackContext(bundle, exports, moduleExports, allModules, modu
         (parentId) => self.__webpack_require__?.(`[${bundle}] ${parentId}`)
       );
     },
+    // dynamic import tracking — no-op for remote components
+    j() {
+    },
     // chunk loader
     l(url) {
-      const moduleInitIndex = allModules.indexOf(moduleInit);
+      const flatModules = Array.isArray(modules) ? modules : [];
+      const moduleInitIndex = flatModules.indexOf(moduleInit);
       if (moduleInitIndex !== -1) {
-        const scriptIndex = allModules.slice(0, moduleInitIndex).findLastIndex((bundleEntry) => bundleEntry instanceof Element);
+        const scriptIndex = flatModules.slice(0, moduleInitIndex).findLastIndex((bundleEntry) => bundleEntry instanceof Element);
         if (scriptIndex !== -1) {
-          const script = allModules[scriptIndex];
+          const script = flatModules[scriptIndex];
           const scriptSrc = script.getAttribute("data-turbopack-src") || "";
           const nextIndex = scriptSrc.indexOf("/_next");
           const baseUrl = nextIndex !== -1 ? scriptSrc.slice(0, nextIndex) : "";
@@ -821,7 +902,6 @@ var init_turbopack_module = __esm({
     "use strict";
     init_logger();
     init_const();
-    init_turbopack_patterns();
   }
 });
 
@@ -1061,6 +1141,89 @@ var init_webpack_adapter = __esm({
 });
 
 // src/shared/client/static-loader.ts
+async function importViaProxy(absoluteSrc) {
+  const proxyUrl = new URL(
+    generateProtectedRcFallbackSrc(absoluteSrc),
+    location.href
+  ).href;
+  const response = await fetch(proxyUrl);
+  if (!response.ok)
+    throw new Error(`Proxy fetch failed: ${response.status}`);
+  logInfo(
+    "StaticLoader",
+    `Successfully loaded ${absoluteSrc} via protected RC proxy fallback.`
+  );
+  const content = (await response.text()).replace(/import\.meta\.url/g, JSON.stringify(absoluteSrc)).replace(
+    /\b(from|import)\s*(["'])(\.\.?\/[^"']+)\2/g,
+    (_, keyword, quote, relativePath) => {
+      const absoluteImportUrl = new URL(relativePath, absoluteSrc).href;
+      const absoluteProxyUrl = new URL(
+        generateProtectedRcFallbackSrc(absoluteImportUrl),
+        location.href
+      ).href;
+      return `${keyword} ${quote}${absoluteProxyUrl}${quote}`;
+    }
+  );
+  const moduleBlobUrl = URL.createObjectURL(
+    new Blob([content], { type: "text/javascript" })
+  );
+  const wrapperContent = [
+    `import*as m from${JSON.stringify(moduleBlobUrl)};`,
+    `globalThis.__rc_module_registry__=globalThis.__rc_module_registry__||{};`,
+    `globalThis.__rc_module_registry__[${JSON.stringify(absoluteSrc)}]=m;`
+  ].join("");
+  const wrapperBlobUrl = URL.createObjectURL(
+    new Blob([wrapperContent], { type: "text/javascript" })
+  );
+  const scriptEl = document.createElement("script");
+  scriptEl.type = "module";
+  scriptEl.src = wrapperBlobUrl;
+  try {
+    await new Promise((resolve, reject) => {
+      scriptEl.onload = () => resolve();
+      scriptEl.onerror = () => reject(new Error(`Failed to load module for ${absoluteSrc}`));
+      document.head.appendChild(scriptEl);
+    });
+  } finally {
+    scriptEl.remove();
+    URL.revokeObjectURL(moduleBlobUrl);
+    URL.revokeObjectURL(wrapperBlobUrl);
+  }
+  const registry = globalThis.__rc_module_registry__;
+  const mod = registry?.[absoluteSrc] ?? {};
+  if (registry)
+    delete registry[absoluteSrc];
+  return mod;
+}
+function resolveScriptSrc(script, url) {
+  const rawSrc = typeof script.getAttribute === "function" ? script.getAttribute("src") ?? script.src : script.src;
+  if (!rawSrc && script.textContent) {
+    return URL.createObjectURL(
+      new Blob(
+        [script.textContent.replace(/import\.meta\.url/g, JSON.stringify(url))],
+        { type: "text/javascript" }
+      )
+    );
+  }
+  return rawSrc;
+}
+async function importScriptMod(absoluteSrc) {
+  try {
+    return await import(
+      /* @vite-ignore */
+      /* webpackIgnore: true */
+      absoluteSrc
+    );
+  } catch (importError) {
+    if (absoluteSrc.startsWith("blob:"))
+      throw importError;
+    logWarn(
+      "StaticLoader",
+      `Direct import of ${absoluteSrc} failed, attempting via protected RC proxy fallback.`
+    );
+    return importViaProxy(absoluteSrc);
+  }
+}
 async function loadStaticRemoteComponent(scripts, url) {
   const self = globalThis;
   if (self.__remote_script_entrypoint_mount__?.[url.href]) {
@@ -1072,26 +1235,9 @@ async function loadStaticRemoteComponent(scripts, url) {
   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
-        );
+        const src = resolveScriptSrc(script, url);
+        const absoluteSrc = new URL(src, url).href;
+        const mod = await importScriptMod(absoluteSrc);
         if (src.startsWith("blob:")) {
           URL.revokeObjectURL(src);
         }
@@ -1156,6 +1302,7 @@ var init_static_loader = __esm({
   "src/shared/client/static-loader.ts"() {
     "use strict";
     init_logger();
+    init_protected_rc_fallback();
   }
 });
 
@@ -1397,35 +1544,18 @@ async function webpackRuntime(bundle, shared, remoteShared) {
     default: { createFromReadableStream }
   } = await import("react-server-dom-webpack/client.browser");
   async function preloadScripts(scripts, url, remoteBundle, _) {
-    await Promise.all(
-      scripts.map((script) => {
-        return new Promise((resolve2, reject) => {
-          const newScript = document.createElement("script");
-          newScript.onload = () => {
-            resolve2();
-            newScript.remove();
-          };
-          newScript.onerror = () => {
-            reject(
-              new RemoteComponentsError(
-                `Failed to load <script src="${script.src}"> for Remote Component. Check the URL is correct.`
-              )
-            );
-            newScript.remove();
-          };
-          const scriptSrc = script.getAttribute("src") || script.getAttribute("data-src");
-          if (scriptSrc) {
-            newScript.src = new URL(
-              scriptSrc.replace(/\/_next\/\[(?:.+)\](?:%20| )/, "/_next/"),
-              url
-            ).href;
-          }
-          newScript.async = true;
-          document.body.appendChild(newScript);
-          script.parentElement?.removeChild(script);
-        });
-      })
-    );
+    const scriptSrcs = scripts.flatMap((script) => {
+      const scriptSrc = script.getAttribute("src") || script.getAttribute("data-src");
+      script.parentElement?.removeChild(script);
+      if (!scriptSrc)
+        return [];
+      return [
+        {
+          src: new URL(scriptSrc.replace(NEXT_BUNDLE_PATH_RE, "/_next/"), url).href
+        }
+      ];
+    });
+    await loadScripts(scriptSrcs);
     const hostShared = {
       ...sharedPolyfills(shared),
       ...self.__remote_component_host_shared_modules__,
@@ -1469,6 +1599,8 @@ var init_webpack = __esm({
   "src/html/host/runtime/webpack.ts"() {
     "use strict";
     init_polyfill();
+    init_script_loader();
+    init_webpack_patterns();
     init_error();
     init_next_client_pages_loader();
     init_shared_modules();
@@ -1700,20 +1832,22 @@ function createRSCStream(rscName, data) {
   });
 }
 
-// src/shared/client/script-loader.ts
-init_error();
-
 // src/shared/client/component-loader.ts
+init_script_loader();
 init_webpack_adapter();
 
 // src/shared/client/remote-component.ts
 init_const();
+init_script_loader();
 init_static_loader();
 init_webpack_adapter();
 
 // src/html/host/index.tsx
 init_error();
 
+// src/shared/ssr/fetch-with-hooks.ts
+init_fetch_with_protected_rc_fallback();
+
 // src/shared/ssr/fetch-headers.ts
 function remoteFetchHeaders() {
   return {
@@ -1731,7 +1865,6 @@ function remoteFetchHeaders() {
 }
 
 // src/shared/ssr/fetch-with-hooks.ts
-init_fetch_with_protected_rc_fallback();
 async function fetchWithHooks(url, additionalInit, options = {}) {
   const {
     onRequest,
@@ -1897,7 +2030,6 @@ if (typeof HTMLElement !== "undefined") {
         if (this.getAttribute("src")) {
           this.load().catch((e) => {
             if (isAbortError(e)) {
-              this.isLoading = false;
               return;
             }
             logError("HtmlHost", "Error loading remote component.", e);
@@ -1923,7 +2055,6 @@ if (typeof HTMLElement !== "undefined") {
         this.root = newRoot;
         this.load().catch((e) => {
           if (isAbortError(e)) {
-            this.isLoading = false;
             return;
           }
           logError("HtmlHost", "Error reloading remote component.", e);
@@ -1946,7 +2077,14 @@ if (typeof HTMLElement !== "undefined") {
         });
       });
       if (this.isLoading) {
-        return;
+        this.abortController?.abort();
+        this.isLoading = false;
+        if (this.root && !this.reactRoot) {
+          this.root.innerHTML = "";
+          this.fouc = null;
+          this.fallbackSlot = document.createElement("slot");
+          this.root.appendChild(this.fallbackSlot);
+        }
       }
       if (!this.root) {
         this.root = this.attachShadow({
@@ -1957,28 +2095,16 @@ if (typeof HTMLElement !== "undefined") {
       }
       this.name = this.getAttribute("name") || "__vercel_remote_component";
       this.bundle = "default";
-      if (this.hasAttribute("src") || this.querySelector("div#__REMOTE_COMPONENT__") || this.hasAttribute("data-ssr")) {
-        this.load().catch((e) => {
-          if (isAbortError(e)) {
-            this.isLoading = false;
-            return;
-          }
-          logError("HtmlHost", "Error loading remote component.", e);
-          const errorEvent = new Event("error", {
-            bubbles: true,
-            composed: true
-          });
-          Object.assign(errorEvent, {
-            error: e,
-            src: this.getAttribute("src")
-          });
-          this.dispatchEvent(errorEvent);
-        });
-      }
       this.isLoading = true;
       const src = this.getAttribute("src");
       this.abortController = new AbortController();
       const signal = this.abortController.signal;
+      const isCurrentLoad = () => !signal.aborted && this.getAttribute("src") === src;
+      const abandonLoad = () => {
+        if (this.abortController?.signal === signal && this.isLoading) {
+          this.isLoading = false;
+        }
+      };
       const beforeLoadEvent = new Event("beforeload", {
         bubbles: true,
         composed: true
@@ -2001,11 +2127,19 @@ if (typeof HTMLElement !== "undefined") {
         const fetchInit = {
           credentials: this.getAttribute("credentials") || "same-origin"
         };
-        const res = await fetchWithHooks(url, fetchInit, {
-          onRequest: this.onRequest,
-          onResponse: this.onResponse,
-          abortController: this.abortController
-        });
+        let res;
+        try {
+          res = await fetchWithHooks(url, fetchInit, {
+            onRequest: this.onRequest,
+            onResponse: this.onResponse,
+            abortController: this.abortController
+          });
+        } catch (e) {
+          if (isAbortError(e)) {
+            return abandonLoad();
+          }
+          throw e;
+        }
         if (!res || !res.ok) {
           let error = failedToFetchRemoteComponentError(
             url.href,
@@ -2036,7 +2170,17 @@ if (typeof HTMLElement !== "undefined") {
           }
           throw error;
         }
-        html = await res.text();
+        try {
+          html = await res.text();
+        } catch (e) {
+          if (isAbortError(e)) {
+            return abandonLoad();
+          }
+          throw e;
+        }
+        if (!isCurrentLoad()) {
+          return abandonLoad();
+        }
       }
       const parser = new DOMParser();
       const doc = parser.parseFromString(html, "text/html");
@@ -2119,6 +2263,9 @@ if (typeof HTMLElement !== "undefined") {
                 }
               })
             );
+            if (!isCurrentLoad()) {
+              return abandonLoad();
+            }
           }
         }
         this.root.innerHTML = "";
@@ -2163,6 +2310,9 @@ if (typeof HTMLElement !== "undefined") {
           remoteComponentSrc,
           root: this.root
         });
+        if (!isCurrentLoad()) {
+          return abandonLoad();
+        }
       }
       applyOriginToNodes(doc, url ?? new URL(location.href));
       if (!this.reactRoot) {
@@ -2246,6 +2396,9 @@ if (typeof HTMLElement !== "undefined") {
         },
         remoteShared
       );
+      if (!isCurrentLoad()) {
+        return abandonLoad();
+      }
       const scripts = isRemoteComponent ? component.querySelectorAll("script") : doc.querySelectorAll(
         "script[src],script[data-src],script[data-remote-component-entrypoint]"
       );
@@ -2261,6 +2414,9 @@ if (typeof HTMLElement !== "undefined") {
         this.bundle ?? "default",
         this.name ?? "__vercel_remote_component"
       );
+      if (!isCurrentLoad()) {
+        return abandonLoad();
+      }
       if (isRemoteComponent) {
         Array.from(component.children).forEach((child) => {
           if (child.tagName === "SCRIPT") {
@@ -2321,7 +2477,9 @@ if (typeof HTMLElement !== "undefined") {
                 logError("HtmlHost", "Error attaching styles.", e);
               });
             }
-            this.isLoading = false;
+            if (isCurrentLoad()) {
+              this.isLoading = false;
+            }
             const loadEvent = new Event("load", {
               bubbles: true,
               composed: true
@@ -2374,7 +2532,9 @@ if (typeof HTMLElement !== "undefined") {
                   logError("HtmlHost", "Error attaching styles.", e);
                 });
               }
-              remoteComponent.isLoading = false;
+              if (isCurrentLoad()) {
+                remoteComponent.isLoading = false;
+              }
               const loadEvent = new Event("load", {
                 bubbles: true,
                 composed: true
@@ -2391,7 +2551,9 @@ if (typeof HTMLElement !== "undefined") {
             (0, import_react.startTransition)(() => {
               root.render(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RemoteComponentFromNext, { initial: false }));
               doCleanup();
-              this.isLoading = false;
+              if (isCurrentLoad()) {
+                this.isLoading = false;
+              }
             });
             return;
           }
@@ -2435,7 +2597,9 @@ if (typeof HTMLElement !== "undefined") {
         Object.assign(loadEvent, { src: this.getAttribute("src") });
         this.dispatchEvent(loadEvent);
       }
-      this.isLoading = false;
+      if (isCurrentLoad()) {
+        this.isLoading = false;
+      }
     }
   }
   customElements.define("remote-component", RemoteComponent);