remote-components 0.0.51 → 0.1.2

package/dist/internal/shared/client/proxy-through-host.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Intercepts client-side URL resolution for remote component resources.
+ * Called before each asset (script, stylesheet, chunk, module, image) is fetched.
+ *
+ * Return a new URL string to redirect the fetch (e.g., through a proxy),
+ * or undefined to use the original URL.
+ *
+ * @param remoteSrc - The `src` of the remote component being loaded
+ * @param url - The asset URL about to be fetched
+ *
+ * @example
+ * // Proxy all assets from the remote's origin through the host
+ * const resolveClientUrl = (remoteSrc, url) => {
+ *   const remoteOrigin = new URL(remoteSrc).origin;
+ *   const parsed = new URL(url);
+ *   if (parsed.origin !== location.origin && parsed.origin === remoteOrigin) {
+ *     return `/rc-fetch-protected-remote?url=${encodeURIComponent(url)}`;
+ *   }
+ * };
+ */
+type ResolveClientUrl = (remoteSrc: string, url: string) => string | undefined;
+/**
+ * Internal bound resolver — `ResolveClientUrl` with `remoteSrc` already applied.
+ * Used by internal loaders that don't need to know the remote src.
+ */
+type InternalResolveClientUrl = (url: string) => string | undefined;
+/**
+ * Binds a `ResolveClientUrl` to a specific `remoteSrc`, producing an
+ * `InternalResolveClientUrl` that only needs the asset URL.
+ *
+ * Only invokes the callback for URLs whose origin matches the remote
+ * component's origin. Third-party scripts (e.g. `vercel.live` toolbar)
+ * are left untouched. To proxy additional domains in the future, a
+ * field or flag can be added to the host configuration.
+ */
+declare function withRemoteSrc(resolveClientUrl: ResolveClientUrl, remoteSrc: string): InternalResolveClientUrl;
+/**
+ * A `ResolveClientUrl` that proxies cross-origin asset URLs
+ * through the host's protected remote fetch endpoint (`/rc-fetch-protected-remote`).
+ * Same-origin URLs are left unchanged.
+ *
+ * On Vercel preview deployments, deployment protection blocks direct cross-origin
+ * asset fetches. This function proxies those requests through the host so they
+ * inherit the host's authentication cookies.
+ *
+ * Requires `withRemoteComponentsHost` middleware on the host to handle the
+ * proxied requests. Configure `allowedProxyUrls` to restrict which URLs can
+ * be proxied.
+ *
+ * @example
+ * ```tsx
+ * import { RemoteComponent, proxyClientRequestsThroughHost } from 'remote-components/react';
+ *
+ * <RemoteComponent
+ *   src="https://remote-app.com/components/header"
+ *   resolveClientUrl={proxyClientRequestsThroughHost}
+ * />
+ * ```
+ */
+declare const proxyClientRequestsThroughHost: ResolveClientUrl;
+
+export { InternalResolveClientUrl, ResolveClientUrl, proxyClientRequestsThroughHost, withRemoteSrc };

package/dist/internal/shared/client/proxy-through-host.js

@@ -0,0 +1,40 @@
+import { generateProtectedRcFallbackSrc } from "./protected-rc-fallback";
+function withRemoteSrc(resolveClientUrl, remoteSrc) {
+  const remoteOrigin = parseOrigin(remoteSrc);
+  return (url) => {
+    const urlOrigin = parseOrigin(url);
+    if (remoteOrigin && urlOrigin && urlOrigin !== remoteOrigin) {
+      return void 0;
+    }
+    return resolveClientUrl(remoteSrc, url);
+  };
+}
+function parseOrigin(url) {
+  try {
+    return new URL(url).origin;
+  } catch {
+    return void 0;
+  }
+}
+const proxyClientRequestsThroughHost = (remoteSrc, url) => {
+  if (typeof location === "undefined") {
+    return void 0;
+  }
+  const remoteOrigin = new URL(remoteSrc, location.href).origin;
+  if (remoteOrigin === location.origin) {
+    return void 0;
+  }
+  try {
+    const parsed = new URL(url, location.href);
+    if (parsed.origin === remoteOrigin) {
+      return generateProtectedRcFallbackSrc(url);
+    }
+  } catch {
+  }
+  return void 0;
+};
+export {
+  proxyClientRequestsThroughHost,
+  withRemoteSrc
+};
+//# sourceMappingURL=proxy-through-host.js.map

package/dist/internal/shared/client/proxy-through-host.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/shared/client/proxy-through-host.ts"],"sourcesContent":["import { generateProtectedRcFallbackSrc } from './protected-rc-fallback';\n\n/**\n * Intercepts client-side URL resolution for remote component resources.\n * Called before each asset (script, stylesheet, chunk, module, image) is fetched.\n *\n * Return a new URL string to redirect the fetch (e.g., through a proxy),\n * or undefined to use the original URL.\n *\n * @param remoteSrc - The `src` of the remote component being loaded\n * @param url - The asset URL about to be fetched\n *\n * @example\n * // Proxy all assets from the remote's origin through the host\n * const resolveClientUrl = (remoteSrc, url) => {\n *   const remoteOrigin = new URL(remoteSrc).origin;\n *   const parsed = new URL(url);\n *   if (parsed.origin !== location.origin && parsed.origin === remoteOrigin) {\n *     return `/rc-fetch-protected-remote?url=${encodeURIComponent(url)}`;\n *   }\n * };\n */\nexport type ResolveClientUrl = (\n  remoteSrc: string,\n  url: string,\n) => string | undefined;\n\n/**\n * Internal bound resolver — `ResolveClientUrl` with `remoteSrc` already applied.\n * Used by internal loaders that don't need to know the remote src.\n */\nexport type InternalResolveClientUrl = (url: string) => string | undefined;\n\n/**\n * Binds a `ResolveClientUrl` to a specific `remoteSrc`, producing an\n * `InternalResolveClientUrl` that only needs the asset URL.\n *\n * Only invokes the callback for URLs whose origin matches the remote\n * component's origin. Third-party scripts (e.g. `vercel.live` toolbar)\n * are left untouched. To proxy additional domains in the future, a\n * field or flag can be added to the host configuration.\n */\nexport function withRemoteSrc(\n  resolveClientUrl: ResolveClientUrl,\n  remoteSrc: string,\n): InternalResolveClientUrl {\n  const remoteOrigin = parseOrigin(remoteSrc);\n  return (url) => {\n    const urlOrigin = parseOrigin(url);\n    if (remoteOrigin && urlOrigin && urlOrigin !== remoteOrigin) {\n      return undefined;\n    }\n    return resolveClientUrl(remoteSrc, url);\n  };\n}\n\nfunction parseOrigin(url: string): string | undefined {\n  try {\n    return new URL(url).origin;\n  } catch {\n    return undefined;\n  }\n}\n\n/**\n * A `ResolveClientUrl` that proxies cross-origin asset URLs\n * through the host's protected remote fetch endpoint (`/rc-fetch-protected-remote`).\n * Same-origin URLs are left unchanged.\n *\n * On Vercel preview deployments, deployment protection blocks direct cross-origin\n * asset fetches. This function proxies those requests through the host so they\n * inherit the host's authentication cookies.\n *\n * Requires `withRemoteComponentsHost` middleware on the host to handle the\n * proxied requests. Configure `allowedProxyUrls` to restrict which URLs can\n * be proxied.\n *\n * @example\n * ```tsx\n * import { RemoteComponent, proxyClientRequestsThroughHost } from 'remote-components/react';\n *\n * <RemoteComponent\n *   src=\"https://remote-app.com/components/header\"\n *   resolveClientUrl={proxyClientRequestsThroughHost}\n * />\n * ```\n */\nexport const proxyClientRequestsThroughHost: ResolveClientUrl = (\n  remoteSrc,\n  url,\n) => {\n  if (typeof location === 'undefined') {\n    return undefined;\n  }\n  const remoteOrigin = new URL(remoteSrc, location.href).origin;\n  if (remoteOrigin === location.origin) {\n    return undefined;\n  }\n  try {\n    const parsed = new URL(url, location.href);\n    if (parsed.origin === remoteOrigin) {\n      return generateProtectedRcFallbackSrc(url);\n    }\n  } catch {\n    // If URL parsing fails, return undefined to use the original\n  }\n  return undefined;\n};\n"],"mappings":"AAAA,SAAS,sCAAsC;AA0CxC,SAAS,cACd,kBACA,WAC0B;AAC1B,QAAM,eAAe,YAAY,SAAS;AAC1C,SAAO,CAAC,QAAQ;AACd,UAAM,YAAY,YAAY,GAAG;AACjC,QAAI,gBAAgB,aAAa,cAAc,cAAc;AAC3D,aAAO;AAAA,IACT;AACA,WAAO,iBAAiB,WAAW,GAAG;AAAA,EACxC;AACF;AAEA,SAAS,YAAY,KAAiC;AACpD,MAAI;AACF,WAAO,IAAI,IAAI,GAAG,EAAE;AAAA,EACtB,QAAE;AACA,WAAO;AAAA,EACT;AACF;AAyBO,MAAM,iCAAmD,CAC9D,WACA,QACG;AACH,MAAI,OAAO,aAAa,aAAa;AACnC,WAAO;AAAA,EACT;AACA,QAAM,eAAe,IAAI,IAAI,WAAW,SAAS,IAAI,EAAE;AACvD,MAAI,iBAAiB,SAAS,QAAQ;AACpC,WAAO;AAAA,EACT;AACA,MAAI;AACF,UAAM,SAAS,IAAI,IAAI,KAAK,SAAS,IAAI;AACzC,QAAI,OAAO,WAAW,cAAc;AAClC,aAAO,+BAA+B,GAAG;AAAA,IAC3C;AAAA,EACF,QAAE;AAAA,EAEF;AACA,SAAO;AACT;","names":[]}

package/dist/internal/shared/client/remote-component.cjs

@@ -42,11 +42,28 @@ __export(remote_component_exports, {
   loadRemoteComponent: () => loadRemoteComponent,
   loadScripts: () => loadScripts,
   loadStaticRemoteComponent: () => loadStaticRemoteComponent,
+  proxyClientRequestsThroughHost: () => proxyClientRequestsThroughHost,
   setAttributesFromProps: () => setAttributesFromProps,
   setupWebpackRuntime: () => setupWebpackRuntime
 });
 module.exports = __toCommonJS(remote_component_exports);
 
+// 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 generateProtectedRcFallbackSrc(url) {
+  return `${RC_PROTECTED_REMOTE_FETCH_PATHNAME}?url=${encodeURIComponent(url)}`;
+}
+function isProxiedUrl(url) {
+  try {
+    return new URL(url, location.href).pathname === RC_PROTECTED_REMOTE_FETCH_PATHNAME;
+  } catch {
+    return false;
+  }
+}
+
 // src/shared/error.ts
 var RemoteComponentsError = class extends Error {
   code = "REMOTE_COMPONENTS_ERROR";
@@ -71,9 +88,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}`);
 }
@@ -84,6 +98,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/webpack/next-client-pages-loader.ts
 function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
@@ -324,19 +351,11 @@ function createRSCStream(rscName, data) {
   });
 }
 
-// src/shared/constants.ts
-var 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)}`;
-}
-
 // 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) => {
@@ -345,42 +364,29 @@ async function loadScripts(scripts) {
           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);
+        const resolvedSrc = resolveClientUrl?.(newSrc) ?? newSrc;
+        const newScript = document.createElement("script");
+        newScript.onload = () => resolve();
+        newScript.onerror = () => {
+          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.`
+              )
+            );
+          }
         };
-        loadScriptWithProtectedRcFallback(newSrc);
+        newScript.src = resolvedSrc;
+        newScript.async = true;
+        document.head.appendChild(newScript);
       });
     })
   );
@@ -401,54 +407,6 @@ function getBundleKey(bundle) {
   return escapeString(bundle);
 }
 
-// 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/client/fetch-with-protected-rc-fallback.ts
-async function fetchWithProtectedRcFallback(url, init) {
-  try {
-    const res = await fetch(url, init);
-    return res;
-  } catch (error) {
-    if (isAbortError(error)) {
-      throw error;
-    }
-    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(
-        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(
-          "FetchRemoteComponent",
-          `Could not proxy remote: [response status ${proxiedRes.status}] ${await proxiedRes.text()}`
-        );
-      }
-    }
-    throw error;
-  }
-}
-
 // 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]+)\)/;
@@ -458,7 +416,7 @@ var ASYNC_MODULE_ALL_RE = /(?<ctx>__turbopack_context__|e)=>\{\k<ctx>\.v\((?<vCb
 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;
@@ -498,9 +456,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);
@@ -513,7 +472,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];
   };
@@ -1006,7 +977,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__ = {};
@@ -1018,7 +989,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) {
@@ -1113,7 +1084,8 @@ async function loadRemoteComponent({
   scripts = [],
   shared = Promise.resolve({}),
   remoteShared = {},
-  container
+  container,
+  resolveClientUrl
 }) {
   try {
     if (runtime === "webpack") {
@@ -1122,7 +1094,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(
@@ -1143,7 +1115,8 @@ async function loadRemoteComponent({
       url,
       bundle,
       hostShared,
-      remoteShared
+      remoteShared,
+      resolveClientUrl
     );
     if (bundle) {
       const resolve = {
@@ -1232,6 +1205,25 @@ function loadNextPagesComponent(bundle, route, nextData, name, container) {
   return { component };
 }
 
+// src/shared/client/proxy-through-host.ts
+var proxyClientRequestsThroughHost = (remoteSrc, url) => {
+  if (typeof location === "undefined") {
+    return void 0;
+  }
+  const remoteOrigin = new URL(remoteSrc, location.href).origin;
+  if (remoteOrigin === location.origin) {
+    return void 0;
+  }
+  try {
+    const parsed = new URL(url, location.href);
+    if (parsed.origin === remoteOrigin) {
+      return generateProtectedRcFallbackSrc(url);
+    }
+  } catch {
+  }
+  return void 0;
+};
+
 // src/shared/client/set-attributes-from-props.ts
 var DOMAttributeNames = {
   acceptCharset: "accept-charset",
@@ -1275,27 +1267,21 @@ function setAttributesFromProps(el, props) {
 }
 
 // src/shared/client/static-loader.ts
-async function importViaProxy(absoluteSrc) {
-  const proxyUrl = new URL(
-    generateProtectedRcFallbackSrc(absoluteSrc),
-    location.href
-  ).href;
-  const response = await fetch(proxyUrl);
+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(`Proxy fetch failed: ${response.status}`);
-  logInfo(
-    "StaticLoader",
-    `Successfully loaded ${absoluteSrc} via protected RC proxy fallback.`
-  );
+    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 absoluteProxyUrl = new URL(
-        generateProtectedRcFallbackSrc(absoluteImportUrl),
+      const resolvedImportUrl = new URL(
+        resolveClientUrl(absoluteImportUrl) ?? absoluteImportUrl,
         location.href
       ).href;
-      return `${keyword} ${quote}${absoluteProxyUrl}${quote}`;
+      return `${keyword} ${quote}${resolvedImportUrl}${quote}`;
     }
   );
   const moduleBlobUrl = URL.createObjectURL(
@@ -1329,6 +1315,20 @@ async function importViaProxy(absoluteSrc) {
     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) {
@@ -1341,24 +1341,7 @@ function resolveScriptSrc(script, url) {
   }
   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) {
+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();
@@ -1371,7 +1354,7 @@ async function loadStaticRemoteComponent(scripts, url) {
       try {
         const src = resolveScriptSrc(script, url);
         const absoluteSrc = new URL(src, url).href;
-        const mod = await importScriptMod(absoluteSrc);
+        const mod = resolveClientUrl ? await importViaCallback(absoluteSrc, resolveClientUrl) : await importDirectly(absoluteSrc);
         if (src.startsWith("blob:")) {
           URL.revokeObjectURL(src);
         }
@@ -1446,6 +1429,7 @@ async function loadStaticRemoteComponent(scripts, url) {
   loadRemoteComponent,
   loadScripts,
   loadStaticRemoteComponent,
+  proxyClientRequestsThroughHost,
   setAttributesFromProps,
   setupWebpackRuntime
 });