remote-components 0.0.50 → 0.1.0

package/dist/next/host/client/index.cjs

@@ -31,13 +31,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/next/host/client/index.tsx
 var client_exports = {};
 __export(client_exports, {
-  RemoteComponent: () => RemoteComponent2
+  RemoteComponent: () => RemoteComponent2,
+  RemoteComponentsProvider: () => import_context3.RemoteComponentsProvider
 });
 module.exports = __toCommonJS(client_exports);
 var Image = __toESM(require("next/image"), 1);
 
 // src/react/index.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/shared/client/apply-origin.ts
@@ -52,7 +53,7 @@ var tagNames = [
   "script",
   "link"
 ];
-function applyOriginToNodes(doc, url) {
+function applyOriginToNodes(doc, url, resolveClientUrl) {
   if (url.origin !== location.origin) {
     const nodes = doc.querySelectorAll(
       tagNames.map(
@@ -61,12 +62,15 @@ function applyOriginToNodes(doc, url) {
     );
     nodes.forEach((node) => {
       if (node.hasAttribute("src") && /^[./]+\/?/.test(node.getAttribute("src") ?? "")) {
-        node.src = new URL(node.getAttribute("src") ?? "/", url).href;
+        const absoluteSrc = new URL(node.getAttribute("src") ?? "/", url).href;
+        const isScript = node.tagName.toLowerCase() === "script";
+        node.src = isScript ? absoluteSrc : resolveClientUrl?.(absoluteSrc) ?? absoluteSrc;
       }
       if (node.hasAttribute("href") && /^[./]+\/?/.test(node.getAttribute("href") ?? "")) {
+        const absoluteHref = new URL(node.getAttribute("href") ?? "/", url).href;
         node.setAttribute(
           "href",
-          new URL(node.getAttribute("href") ?? "/", url).href
+          resolveClientUrl?.(absoluteHref) ?? absoluteHref
         );
       }
       if (node.hasAttribute("srcset")) {
@@ -75,7 +79,8 @@ function applyOriginToNodes(doc, url) {
           if (!urlPart)
             return entry;
           const absoluteUrl = new URL(urlPart, url).href;
-          return descriptor ? `${absoluteUrl} ${descriptor}` : absoluteUrl;
+          const resolvedUrl = resolveClientUrl?.(absoluteUrl) ?? absoluteUrl;
+          return descriptor ? `${resolvedUrl} ${descriptor}` : resolvedUrl;
         }).join(", ");
         if (srcSet) {
           node.setAttribute("srcset", srcSet);
@@ -87,7 +92,8 @@ function applyOriginToNodes(doc, url) {
           if (!urlPart)
             return entry;
           const absoluteUrl = new URL(urlPart, url).href;
-          return descriptor ? `${absoluteUrl} ${descriptor}` : absoluteUrl;
+          const resolvedUrl = resolveClientUrl?.(absoluteUrl) ?? absoluteUrl;
+          return descriptor ? `${resolvedUrl} ${descriptor}` : resolvedUrl;
         }).join(", ");
         if (srcSet) {
           node.setAttribute("imagesrcset", srcSet);
@@ -97,6 +103,31 @@ function applyOriginToNodes(doc, url) {
   }
 }
 
+// src/shared/constants.ts
+var RC_PROTECTED_REMOTE_FETCH_PATHNAME = "/rc-fetch-protected-remote";
+var CORS_DOCS_URL = "https://vercel.com/docs/remote-components/concepts/cors-external-urls#accessing-cross-site-protected-remote-components";
+
+// src/shared/client/protected-rc-fallback.ts
+function isProxiedUrl(url) {
+  try {
+    return new URL(url, location.href).pathname === RC_PROTECTED_REMOTE_FETCH_PATHNAME;
+  } catch {
+    return false;
+  }
+}
+
+// src/shared/utils/abort.ts
+function isAbortError(error) {
+  if (error instanceof DOMException && error.name === "AbortError") {
+    return true;
+  }
+  if (error !== null && typeof error === "object" && "name" in error && error.name === "AbortError" && "message" in error && typeof error.message === "string") {
+    const e = error;
+    return typeof e.code === "number" || e.constructor?.name === "DOMException";
+  }
+  return false;
+}
+
 // src/shared/error.ts
 var RemoteComponentsError = class extends Error {
   code = "REMOTE_COMPONENTS_ERROR";
@@ -116,6 +147,69 @@ function failedToFetchRemoteComponentError(url, { status, statusText }, help = "
     { cause: new Error(`${status} ${statusText}`) }
   );
 }
+async function errorFromFailedFetch(originalUrl, resolvedUrl, res) {
+  const isProxied = isProxiedUrl(resolvedUrl.href);
+  if (isProxied && res) {
+    const body = await res.text().catch(() => "");
+    return failedProxyFetchError(
+      originalUrl,
+      resolvedUrl.href,
+      res.status,
+      body
+    );
+  }
+  const fallback = failedToFetchRemoteComponentError(
+    originalUrl,
+    res ?? { status: 0, statusText: "No Response" }
+  );
+  if (!res)
+    return fallback;
+  try {
+    const body = await res.text();
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(body, "text/html");
+    const errorTemplate = doc.querySelector(
+      "template[data-next-error-message]"
+    );
+    const errorMessage = errorTemplate?.getAttribute("data-next-error-message");
+    if (errorMessage) {
+      const error = new RemoteComponentsError(errorMessage);
+      const errorStack = errorTemplate?.getAttribute("data-next-error-stack");
+      if (errorStack) {
+        error.stack = errorStack;
+      }
+      return error;
+    }
+  } catch (parseError) {
+    if (isAbortError(parseError))
+      throw parseError;
+  }
+  return fallback;
+}
+function failedProxyFetchError(originalUrl, proxyUrl, status, responseBody) {
+  if (status === 404) {
+    return new RemoteComponentsError(
+      `Could not proxy the request to "${originalUrl}" \u2014 the proxy endpoint "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" returned 404.
+
+The host server needs middleware or a route that handles "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}".
+
+Proxying requires two pieces:
+  1. resolveClientUrl={proxyClientRequestsThroughHost} on <RemoteComponent>
+  2. Middleware or a route for "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" on the host server
+
+Docs: ${CORS_DOCS_URL}`
+    );
+  }
+  if (status === 403) {
+    const detail = responseBody ? ` ${responseBody}` : "";
+    return new RemoteComponentsError(
+      `Proxied request to "${proxyUrl}" was forbidden.${detail} See: ${CORS_DOCS_URL}`
+    );
+  }
+  return new RemoteComponentsError(
+    `Proxied request for "${originalUrl}" via "${proxyUrl}" failed with status ${status}. See: ${CORS_DOCS_URL}`
+  );
+}
 
 // src/shared/utils/logger.ts
 var PREFIX = "remote-components";
@@ -125,9 +219,6 @@ function logDebug(location2, message) {
     console.debug(`[${PREFIX}:${location2}]: ${message}`);
   }
 }
-function logInfo(location2, message) {
-  console.info(`[${PREFIX}:${location2}]: ${message}`);
-}
 function logWarn(location2, message) {
   console.warn(`[${PREFIX}:${location2}]: ${message}`);
 }
@@ -138,6 +229,19 @@ function logError(location2, message, cause) {
     })
   );
 }
+function warnCrossOriginFetchError(logLocation, url) {
+  try {
+    const parsed = typeof url === "string" ? new URL(url) : url;
+    if (typeof location === "undefined" || parsed.origin === location.origin) {
+      return;
+    }
+    logWarn(
+      logLocation,
+      `Failed to fetch cross-origin resource "${parsed.href}". If this is a protected deployment, ensure withRemoteComponentsHost middleware is configured in your host and that the remote URL is included in allowedProxyUrls. See: ${CORS_DOCS_URL}`
+    );
+  } catch {
+  }
+}
 
 // src/shared/client/polyfill.tsx
 var import_jsx_runtime = (
@@ -581,28 +685,40 @@ function createRSCStream(rscName, data) {
   });
 }
 
+// src/shared/client/webpack-patterns.ts
+var NEXT_BUNDLE_PATH_RE = /\/_next\/\[.+\](?:%20| )/;
+
 // src/shared/client/script-loader.ts
-async function loadScripts(scripts) {
+async function loadScripts(scripts, resolveClientUrl) {
   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/"),
+          script.src.replace(NEXT_BUNDLE_PATH_RE, "/_next/"),
           location.origin
         ).href;
+        const resolvedSrc = resolveClientUrl?.(newSrc) ?? newSrc;
         const newScript = document.createElement("script");
-        newScript.onload = () => {
-          resolve();
-        };
+        newScript.onload = () => resolve();
         newScript.onerror = () => {
-          reject(
-            new RemoteComponentsError(
-              `Failed to load <script src="${script.src}"> for Remote Component. Check the URL is correct.`
-            )
-          );
+          const isProxied = isProxiedUrl(resolvedSrc);
+          if (isProxied) {
+            reject(
+              new RemoteComponentsError(
+                `Failed to load script "${newSrc}" via proxy "${resolvedSrc}". Ensure withRemoteComponentsHost middleware is configured and "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" is in the matcher. See: ${CORS_DOCS_URL}`
+              )
+            );
+          } else {
+            warnCrossOriginFetchError("ScriptLoader", newSrc);
+            reject(
+              new RemoteComponentsError(
+                `Failed to load <script src="${newSrc}"> for Remote Component. Check the URL is correct.`
+              )
+            );
+          }
         };
-        newScript.src = newSrc;
+        newScript.src = resolvedSrc;
         newScript.async = true;
         document.head.appendChild(newScript);
       });
@@ -610,50 +726,6 @@ async function loadScripts(scripts) {
   );
 }
 
-// src/shared/utils/abort.ts
-function isAbortError(error) {
-  if (error instanceof DOMException && error.name === "AbortError") {
-    return true;
-  }
-  if (error !== null && typeof error === "object" && "name" in error && error.name === "AbortError" && "message" in error && typeof error.message === "string") {
-    const e = error;
-    return typeof e.code === "number" || e.constructor?.name === "DOMException";
-  }
-  return false;
-}
-
-// src/shared/ssr/fetch-with-protected-rc-fallback.ts
-var RC_PROTECTED_REMOTE_FETCH_PATHNAME = "/rc-fetch-protected-remote";
-async function fetchWithProtectedRcFallback(url, init) {
-  try {
-    const res = await fetch(url, init);
-    return res;
-  } catch (error) {
-    if (isAbortError(error)) {
-      throw error;
-    }
-    if (typeof document === "object" && typeof document.location === "object" && document.location.origin !== new URL(url).origin) {
-      logInfo(
-        "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}`,
-        init?.signal ? { signal: init.signal } : void 0
-      );
-      if (proxiedRes.status === 200) {
-        return proxiedRes;
-      } else {
-        logError(
-          "FetchRemoteComponent",
-          `Could not proxy remote: [response status ${proxiedRes.status}] ${await proxiedRes.text()}`
-        );
-      }
-    }
-    throw error;
-  }
-}
-
 // src/shared/utils/index.ts
 function escapeString(str) {
   return str.replace(/[^a-z0-9]/g, "_");
@@ -682,11 +754,10 @@ var REMOTE_SHARED_ASSIGNMENT_RE = /\.TURBOPACK_REMOTE_SHARED=await (?:__turbopac
 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]+)\)\)\)\}/;
-var NUMERIC_MODULE_ID_RE = /^[0-9]+$/;
 var TURBOPACK_GLOBAL_RE = /(?:globalThis|self)\s*(?:\.TURBOPACK|\[\s*["']TURBOPACK["']\s*\])/;
 
 // src/shared/client/chunk-loader.ts
-function createChunkLoader(runtime) {
+function createChunkLoader(runtime, resolveClientUrl) {
   return function __turbopack_chunk_load__(chunkId, scriptBundle) {
     logDebug("ChunkLoader", `Loading chunk: "${chunkId}"`);
     const self = globalThis;
@@ -726,9 +797,10 @@ function createChunkLoader(runtime) {
       logDebug("ChunkLoader", `Returning cached promise for: "${url}"`);
       return self.__remote_components_turbopack_chunk_loader_promise__[url];
     }
-    logDebug("ChunkLoader", `Fetching chunk from: "${url}"`);
+    const resolvedUrl = resolveClientUrl?.(url) ?? url;
+    logDebug("ChunkLoader", `Fetching chunk from: "${resolvedUrl}"`);
     self.__remote_components_turbopack_chunk_loader_promise__[url] = new Promise((resolve, reject) => {
-      fetchWithProtectedRcFallback(url).then((res) => res.text()).then((code) => {
+      fetch(resolvedUrl).then((res) => res.text()).then((code) => {
         const hasTurbopack = TURBOPACK_GLOBAL_RE.test(code);
         if (hasTurbopack) {
           return handleTurbopackChunk(code, bundle ?? "", url);
@@ -741,7 +813,19 @@ function createChunkLoader(runtime) {
           "ChunkLoader",
           `First 500 chars of chunk: ${code.slice(0, 500)}`
         );
-      }).then(resolve).catch(reject);
+      }).then(resolve).catch((error) => {
+        const isProxied = isProxiedUrl(resolvedUrl);
+        if (isProxied) {
+          reject(
+            new RemoteComponentsError(
+              `Failed to load chunk "${url}" via proxy "${resolvedUrl}". Ensure withRemoteComponentsHost middleware is configured and "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" is in the matcher. See: ${CORS_DOCS_URL}`
+            )
+          );
+        } else {
+          warnCrossOriginFetchError("ChunkLoader", url);
+          reject(error);
+        }
+      });
     });
     return self.__remote_components_turbopack_chunk_loader_promise__[url];
   };
@@ -888,10 +972,14 @@ async function handleTurbopackChunk(code, bundle, url) {
 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__ = {};
@@ -920,13 +1008,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
@@ -940,46 +1027,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: {
@@ -1100,13 +1168,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) : "";
@@ -1246,7 +1318,7 @@ function getSharedModule(bundle, id) {
 }
 
 // src/shared/client/webpack-adapter.ts
-async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location.href), bundle, shared = {}, remoteShared = {}) {
+async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location.href), bundle, shared = {}, remoteShared = {}, resolveClientUrl) {
   const self = globalThis;
   if (!self.__remote_bundle_url__) {
     self.__remote_bundle_url__ = {};
@@ -1258,7 +1330,7 @@ async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location
       self.__original_webpack_chunk_load__ = self.__webpack_chunk_load__;
       self.__original_webpack_require__ = self.__webpack_require__;
     }
-    self.__webpack_chunk_load__ = createChunkLoader(runtime);
+    self.__webpack_chunk_load__ = createChunkLoader(runtime, resolveClientUrl);
     self.__webpack_require__ = createModuleRequire(runtime);
     self.__webpack_require_type__ = runtime;
     if (self.__remote_webpack_require__ && runtime === RUNTIME_TURBOPACK) {
@@ -1353,7 +1425,8 @@ async function loadRemoteComponent({
   scripts = [],
   shared = Promise.resolve({}),
   remoteShared = {},
-  container
+  container,
+  resolveClientUrl
 }) {
   try {
     if (runtime === "webpack") {
@@ -1362,7 +1435,7 @@ async function loadRemoteComponent({
         self.__DISABLE_WEBPACK_EXEC__ = {};
       }
       self.__DISABLE_WEBPACK_EXEC__[bundle] = true;
-      await loadScripts(scripts);
+      await loadScripts(scripts, resolveClientUrl);
     }
     const hostShared = await shared;
     logDebug(
@@ -1383,7 +1456,8 @@ async function loadRemoteComponent({
       url,
       bundle,
       hostShared,
-      remoteShared
+      remoteShared,
+      resolveClientUrl
     );
     if (bundle) {
       const resolve = {
@@ -1472,6 +1546,11 @@ function loadNextPagesComponent(bundle, route, nextData, name, container) {
   return { component };
 }
 
+// src/shared/client/proxy-through-host.ts
+function withRemoteSrc(resolveClientUrl, remoteSrc) {
+  return (url) => resolveClientUrl(remoteSrc, url);
+}
+
 // src/shared/client/set-attributes-from-props.ts
 var DOMAttributeNames = {
   acceptCharset: "accept-charset",
@@ -1515,7 +1594,81 @@ function setAttributesFromProps(el, props) {
 }
 
 // src/shared/client/static-loader.ts
-async function loadStaticRemoteComponent(scripts, url) {
+async function importViaCallback(absoluteSrc, resolveClientUrl) {
+  const resolvedUrl = resolveClientUrl(absoluteSrc) ?? absoluteSrc;
+  const fetchUrl = new URL(resolvedUrl, location.href).href;
+  const response = await fetch(fetchUrl);
+  if (!response.ok)
+    throw new Error(`Proxied fetch failed: ${response.status}`);
+  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 resolvedImportUrl = new URL(
+        resolveClientUrl(absoluteImportUrl) ?? absoluteImportUrl,
+        location.href
+      ).href;
+      return `${keyword} ${quote}${resolvedImportUrl}${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;
+}
+async function importDirectly(absoluteSrc) {
+  try {
+    return await import(
+      /* @vite-ignore */
+      /* webpackIgnore: true */
+      absoluteSrc
+    );
+  } catch (importError) {
+    if (!absoluteSrc.startsWith("blob:")) {
+      warnCrossOriginFetchError("StaticLoader", absoluteSrc);
+    }
+    throw importError;
+  }
+}
+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 loadStaticRemoteComponent(scripts, url, resolveClientUrl) {
   const self = globalThis;
   if (self.__remote_script_entrypoint_mount__?.[url.href]) {
     self.__remote_script_entrypoint_mount__[url.href] = /* @__PURE__ */ new Set();
@@ -1526,26 +1679,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 = resolveClientUrl ? await importViaCallback(absoluteSrc, resolveClientUrl) : await importDirectly(absoluteSrc);
         if (src.startsWith("blob:")) {
           URL.revokeObjectURL(src);
         }
@@ -1643,7 +1779,12 @@ async function fetchWithHooks(url, additionalInit, options = {}) {
   };
   let res = await onRequest?.(url, init, hookOptions);
   if (!res) {
-    res = await fetchWithProtectedRcFallback(url, init);
+    try {
+      res = await fetch(url, init);
+    } catch (error) {
+      warnCrossOriginFetchError("FetchRemoteComponent", url);
+      throw error;
+    }
   }
   const transformedRes = await onResponse?.(url, res, hookOptions);
   if (transformedRes) {
@@ -1661,15 +1802,34 @@ function getClientOrServerUrl(src, serverFallback) {
   return typeof src === "string" ? new URL(src, fallback) : src;
 }
 
-// src/react/hooks/use-shadow-root.ts
+// src/react/hooks/use-resolve-client-url.ts
 var import_react = require("react");
+var import_context = require("#internal/react/context");
+
+// src/shared/client/default-resolve-client-url.ts
+function bindResolveClientUrl(prop, remoteSrc) {
+  return prop ? withRemoteSrc(prop, remoteSrc) : void 0;
+}
+
+// src/react/hooks/use-resolve-client-url.ts
+function useResolveClientUrl(prop, urlHref) {
+  const { resolveClientUrl: contextValue } = (0, import_context.useRemoteComponentsContext)();
+  const resolveClientUrl = prop ?? contextValue;
+  return (0, import_react.useMemo)(
+    () => bindResolveClientUrl(resolveClientUrl, urlHref),
+    [resolveClientUrl, urlHref]
+  );
+}
+
+// src/react/hooks/use-shadow-root.ts
+var import_react2 = require("react");
 function useShadowRoot({
   isolate,
   mode,
   keySuffix
 }) {
-  const shadowRootContainerRef = (0, import_react.useRef)(null);
-  const [shadowRoot, setShadowRoot] = (0, import_react.useState)(() => {
+  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(
@@ -1678,7 +1838,7 @@ function useShadowRoot({
     self[shadowRootKey] = null;
     return ssrShadowRoot;
   });
-  (0, import_react.useLayoutEffect)(() => {
+  (0, import_react2.useLayoutEffect)(() => {
     if (isolate !== false && typeof document !== "undefined" && (!shadowRoot || !shadowRoot.isConnected)) {
       const self = globalThis;
       const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
@@ -1733,11 +1893,12 @@ function getRemoteComponentHtml(html) {
 }
 
 // src/react/index.tsx
+var import_context2 = require("#internal/react/context");
 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");
+var import_react4 = require("react");
 function RemoteComponent({
   src,
   isolate,
@@ -1752,10 +1913,11 @@ function RemoteComponent({
   onError,
   onChange,
   onRequest,
-  onResponse
+  onResponse,
+  resolveClientUrl: _resolveClientUrl
 }) {
-  const instanceId = (0, import_react2.useId)();
-  const name = (0, import_react2.useMemo)(() => {
+  const instanceId = (0, import_react3.useId)();
+  const name = (0, import_react3.useMemo)(() => {
     if (typeof src === "string") {
       const url2 = new URL(
         src,
@@ -1769,23 +1931,26 @@ function RemoteComponent({
     }
     return nameProp;
   }, [src, nameProp]);
-  const [data, setData] = (0, import_react2.useState)(null);
-  const url = (0, import_react2.useMemo)(() => getClientOrServerUrl(src, DUMMY_FALLBACK), [src]);
+  const [data, setData] = (0, import_react3.useState)(null);
+  const url = (0, import_react3.useMemo)(() => getClientOrServerUrl(src, DUMMY_FALLBACK), [src]);
+  const resolveClientUrl = useResolveClientUrl(_resolveClientUrl, url.href);
   const id = url.origin === (typeof location !== "undefined" ? location.origin : DUMMY_FALLBACK) ? url.pathname : url.href;
-  const keySuffix = `${escapeString(id)}_${escapeString(data?.name ?? name)}_${escapeString(instanceId)}`;
-  const [remoteComponent, setRemoteComponent] = (0, import_react2.useState)(null);
+  const keySuffix = `${escapeString(id)}_${escapeString(
+    data?.name ?? name
+  )}_${escapeString(instanceId)}`;
+  const [remoteComponent, setRemoteComponent] = (0, import_react3.useState)(null);
   const { shadowRoot, shadowRootContainerRef } = useShadowRoot({
     isolate,
     mode,
     keySuffix
   });
-  const htmlRef = (0, import_react2.useRef)(
+  const htmlRef = (0, import_react3.useRef)(
     typeof document !== "undefined" ? document.querySelector(
       `[data-remote-component-id="shadowroot_${keySuffix}"]`
     )?.shadowRoot?.innerHTML ?? document.getElementById(`__REMOTE_COMPONENT${name}`)?.innerHTML ?? document.querySelector(`div[data-bundle][data-route][id^="${name}"]`)?.innerHTML ?? document.querySelector("div[data-bundle][data-route]")?.innerHTML : null
   );
-  const endTemplateRef = (0, import_react2.useRef)(null);
-  const childrenRef = (0, import_react2.useRef)(
+  const endTemplateRef = (0, import_react3.useRef)(null);
+  const childrenRef = (0, import_react3.useRef)(
     typeof document !== "undefined" ? (() => {
       let el = document.querySelector(`template[id="${name}_start"]`);
       const elements = [];
@@ -1798,20 +1963,20 @@ function RemoteComponent({
       return elements;
     })() : []
   );
-  const prevSrcRef = (0, import_react2.useRef)(null);
-  const componentHydrationHtml = (0, import_react2.useRef)(null);
-  const prevIsRemoteComponentRef = (0, import_react2.useRef)(false);
-  const prevUrlRef = (0, import_react2.useRef)(null);
-  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 prevSrcRef = (0, import_react3.useRef)(null);
+  const componentHydrationHtml = (0, import_react3.useRef)(null);
+  const prevIsRemoteComponentRef = (0, import_react3.useRef)(false);
+  const prevUrlRef = (0, import_react3.useRef)(null);
+  const prevRemoteComponentContainerRef = (0, import_react3.useRef)(null);
+  const unmountRef = (0, import_react3.useRef)(null);
+  const prevNameRef = (0, import_react3.useRef)(void 0);
+  (0, import_react3.useLayoutEffect)(() => {
     const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
     return () => {
       delete globalThis[shadowRootKey];
     };
   }, [keySuffix]);
-  (0, import_react2.useLayoutEffect)(() => {
+  (0, import_react3.useLayoutEffect)(() => {
     if (childrenRef.current.length > 0 && remoteComponent) {
       childrenRef.current.forEach((el) => {
         el.remove();
@@ -1819,7 +1984,7 @@ function RemoteComponent({
       childrenRef.current = [];
     }
   }, [remoteComponent]);
-  (0, import_react2.useLayoutEffect)(() => {
+  (0, import_react3.useLayoutEffect)(() => {
     if (shadowRoot && remoteComponent) {
       const resetStyles = shadowRoot.querySelectorAll(
         "style[data-remote-components-reset]"
@@ -1842,13 +2007,16 @@ function RemoteComponent({
       }
     }
   }, [shadowRoot, remoteComponent, name]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (src && src !== prevSrcRef.current) {
       const previousSrc = prevSrcRef.current;
       const previousName = prevNameRef.current;
       prevSrcRef.current = src;
+      if (previousSrc !== null) {
+        htmlRef.current = null;
+      }
       onBeforeLoad?.(src);
-      (0, import_react2.startTransition)(async () => {
+      (0, import_react3.startTransition)(async () => {
         try {
           let html = getRemoteComponentHtml(
             htmlRef.current ?? (endTemplateRef.current?.previousElementSibling?.tagName === "div" ? endTemplateRef.current.previousElementSibling.innerHTML : "")
@@ -1857,41 +2025,18 @@ function RemoteComponent({
             const fetchInit = {
               credentials
             };
+            const resolvedUrl = new URL(
+              resolveClientUrl?.(url.href) ?? url.href,
+              location.href
+            );
             const abortController = new AbortController();
-            const res = await fetchWithHooks(url, fetchInit, {
+            const res = await fetchWithHooks(resolvedUrl, fetchInit, {
               onRequest,
               onResponse,
               abortController
             });
             if (!res || !res.ok) {
-              let error = failedToFetchRemoteComponentError(
-                url.href,
-                res ?? new Response(null, { status: 0 })
-              );
-              try {
-                const body = await res.text();
-                const parser2 = new DOMParser();
-                const doc2 = parser2.parseFromString(body, "text/html");
-                const errorTemplate = doc2.querySelector(
-                  "template[data-next-error-message]"
-                );
-                const errorMessage = errorTemplate?.getAttribute(
-                  "data-next-error-message"
-                );
-                const errorStack = errorTemplate?.getAttribute(
-                  "data-next-error-stack"
-                );
-                if (errorMessage) {
-                  error = new RemoteComponentsError(errorMessage);
-                  if (errorStack) {
-                    error.stack = errorStack;
-                  }
-                }
-              } catch (parseError) {
-                if (isAbortError(parseError))
-                  throw parseError;
-              }
-              throw error;
+              throw await errorFromFailedFetch(url.href, resolvedUrl, res);
             }
             const remoteHtml = await res.text();
             htmlRef.current = remoteHtml;
@@ -1952,7 +2097,7 @@ function RemoteComponent({
           prevIsRemoteComponentRef.current = isRemoteComponent;
           prevUrlRef.current = url;
           prevNameRef.current = remoteName;
-          applyOriginToNodes(doc, url);
+          applyOriginToNodes(doc, url, resolveClientUrl);
           const links = Array.from(
             doc.querySelectorAll("link[href]")
           ).filter((link) => {
@@ -2072,10 +2217,12 @@ function RemoteComponent({
                 shadowRootHtml = `<style data-remote-components-reset="">:host { all: initial; }</style>${shadowRootHtml}`;
               }
               shadowRoot.innerHTML = shadowRootHtml;
+              htmlRef.current = null;
               setRemoteComponent(null);
               const { mount, unmount } = await loadStaticRemoteComponent(
                 Array.from(shadowRoot.querySelectorAll("script")),
-                url
+                url,
+                resolveClientUrl
               );
               unmountRef.current = unmount;
               await Promise.all(
@@ -2092,9 +2239,11 @@ function RemoteComponent({
                   }
                 )
               );
+              htmlRef.current = null;
               const { mount, unmount } = await loadStaticRemoteComponent(
                 Array.from(component.querySelectorAll("script")),
-                url
+                url,
+                resolveClientUrl
               );
               unmountRef.current = unmount;
               await Promise.all(
@@ -2137,7 +2286,8 @@ function RemoteComponent({
                 ...userShared
               },
               remoteShared,
-              container: shadowRoot
+              container: shadowRoot,
+              resolveClientUrl
             });
             if (rsc) {
               rsc.remove();
@@ -2183,7 +2333,8 @@ function RemoteComponent({
     onError,
     onChange,
     onRequest,
-    onResponse
+    onResponse,
+    resolveClientUrl
   ]);
   if (remoteComponent instanceof Error) {
     throw remoteComponent;
@@ -2195,7 +2346,7 @@ function RemoteComponent({
     runtime: prevIsRemoteComponentRef.current ? RUNTIME_SCRIPT : data?.runtime || RUNTIME_WEBPACK
   }) });
   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)(
+  const linksToRender = data?.links?.map((link) => /* @__PURE__ */ (0, import_react4.createElement)(
     "link",
     {
       ...link,
@@ -2214,7 +2365,8 @@ function RemoteComponent({
     if (prevIsRemoteComponentRef.current) {
       loadStaticRemoteComponent(
         Array.from(shadowRoot.querySelectorAll("script")),
-        url
+        url,
+        resolveClientUrl
       ).then(({ mount }) => {
         return Promise.all(
           Array.from(mount).map((mountFn) => mountFn(shadowRoot))
@@ -2297,6 +2449,9 @@ function RemoteComponent({
   ] });
 }
 
+// src/next/host/client/index.tsx
+var import_context3 = require("#internal/react/context");
+
 // src/next/host/app-router-compat.tsx
 var import_navigation = require("next/navigation");
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -2407,6 +2562,7 @@ function RemoteComponent2(props) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  RemoteComponent
+  RemoteComponent,
+  RemoteComponentsProvider
 });
 //# sourceMappingURL=index.cjs.map