remote-components 0.2.0 → 0.2.2

package/dist/host/nextjs/pages.cjs

@@ -44,7 +44,6 @@ var import_react2 = require("remote-components/host/react");
 var import_image_impl = require("#internal/host/nextjs/image-impl");
 var import_image_shared = require("#internal/host/nextjs/image-shared");
 var import_fetch_remote_component = require("#internal/host/server/fetch-remote-component");
-var import_default_resolve_client_url = require("#internal/runtime/url/default-resolve-client-url");
 var import_error = require("#internal/utils/error");
 var import_pages = require("#remote-components/host/defaults/pages");
 const navigationImpl = {
@@ -117,9 +116,10 @@ function ConsumeRemoteComponent(props) {
       props[REMOTE_COMPONENT_KEY] ?? "__vercel_remote_component"
     )
   );
-  const src = typeof props.src === "string" ? props.src : props.src.href;
-  const resolveClientUrl = props.resolveClientUrl ? (0, import_default_resolve_client_url.bindResolveClientUrl)(props.resolveClientUrl, src) : void 0;
-  const sharedResult = shared(props.bundle ?? "default", resolveClientUrl);
+  const sharedResult = shared(
+    props.bundle ?? "default",
+    props.resolveClientUrl
+  );
   (0, import_react.useEffect)(() => {
     const clientSelf = globalThis;
     clientSelf.__remote_component_shared__ = sharedResult;

package/dist/host/nextjs/pages.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/host/nextjs/pages.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport * as Form from 'next/form';\nimport * as Image from 'next/image';\nimport * as Link from 'next/link';\nimport * as Router from 'next/router';\nimport * as Script from 'next/script';\nimport { useEffect } from 'react';\nimport { ConsumeRemoteComponent as ConsumeRemoteComponentReact } from 'remote-components/host/react';\nimport { imageImpl } from '#internal/host/nextjs/image-impl';\nimport { createNextImageSharedEntries } from '#internal/host/nextjs/image-shared';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ConsumeRemoteComponentConfig } from '#internal/host/shared/config';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport { bindResolveClientUrl } from '#internal/runtime/url/default-resolve-client-url';\nimport type { InternalResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\nimport { RemoteComponentsError } from '#internal/utils/error';\nimport { shared as _shared } from '#remote-components/host/defaults/pages';\n\nconst navigationImpl = {\n  useRouter: () => Router.useRouter(),\n  useSearchParams: () => {\n    const router = Router.useRouter();\n    return {\n      get: (key: string) => router.query[key],\n      has: (key: string) => key in router.query,\n    };\n  },\n};\n\nconst sharedCache = new Map<string, Record<string, () => Promise<unknown>>>();\nconst shared = (\n  bundle: string,\n  resolveClientUrl?: InternalResolveClientUrl,\n) => {\n  // Skip cache when resolveClientUrl is provided — different resolver instances\n  // must not share a cache entry, since imageImpl closes over the resolver.\n  if (!resolveClientUrl) {\n    if (sharedCache.has(bundle)) {\n      return sharedCache.get(bundle);\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const ImageComponent: typeof Image.default =\n    (Image.default as any).default ?? Image.default;\n  const result = {\n    // polyfill Next.js App Router client API (minimal)\n    // some API methods are not available when using a Next.js Pages Router application as host\n    'next/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/components/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/app-dir/link': () =>\n      Promise.resolve(Link.default) as Promise<unknown>,\n    'next/link': () => Promise.resolve(Link.default) as Promise<unknown>,\n    'next/dist/client/app-dir/form': () =>\n      Promise.resolve(Form.default) as Promise<unknown>,\n    'next/form': () => Promise.resolve(Form.default) as Promise<unknown>,\n    'next/dist/client/script': () =>\n      Promise.resolve(Script.default) as Promise<unknown>,\n    'next/script': () => Promise.resolve(Script.default) as Promise<unknown>,\n    'next/router': () => Promise.resolve(Router) as Promise<unknown>,\n    ..._shared,\n    // Always override Next.js image modules to use the bundle URL rewriter.\n    ...createNextImageSharedEntries(\n      () => imageImpl(ImageComponent, bundle, resolveClientUrl, true),\n      { getImageProps: Image.getImageProps },\n    ),\n  };\n\n  if (!resolveClientUrl) {\n    sharedCache.set(bundle, result);\n  }\n\n  return result;\n};\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, React.ReactNode>;\n};\n\nfunction getKey({\n  bundle,\n  route,\n  name,\n}: {\n  bundle?: string;\n  route?: string;\n  name?: string;\n}): string {\n  return `${bundle ?? '__next'}:${route ?? '/'}:${\n    name ?? '__vercel_remote_component'\n  }__${crypto.randomUUID()}`;\n}\n\nfunction setComponent(key: string, component: React.ReactNode): void {\n  if (!self[REMOTE_COMPONENT_STORE]) {\n    self[REMOTE_COMPONENT_STORE] = new Map();\n  }\n  self[REMOTE_COMPONENT_STORE].set(key, component);\n}\n\nfunction getComponent(key: string): React.ReactNode | undefined {\n  const component = self[REMOTE_COMPONENT_STORE]?.get(key);\n  // remove the component from the store after retrieving it to prevent memory leaks\n  // storing the HTML in the global store is only needed for SSR and it's temporary only used for a single render\n  self[REMOTE_COMPONENT_STORE]?.delete(key);\n  return component;\n}\n\n/**\n * Props for the Next.js Pages Router remote component host.\n *\n * Extends {@link ConsumeRemoteComponentConfig} with Pages Router–specific `bundle` and\n * `route` props used for SSR hydration.\n */\nexport interface ConsumeRemoteComponentProps\n  extends ConsumeRemoteComponentConfig {\n  /** The source URL of the remote component. Required for server rendering. */\n  src: string | URL;\n  /** The Webpack bundle name for the remote component. */\n  bundle?: string;\n  /** The page route of the remote component. */\n  route?: string;\n  /** Loading fallback content displayed while the remote component is being fetched. */\n  children?: React.ReactNode;\n  [REMOTE_COMPONENT_KEY]?: string;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function ConsumeRemoteComponent(props: ConsumeRemoteComponentProps) {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(\n          props[REMOTE_COMPONENT_KEY] ?? '__vercel_remote_component',\n        );\n\n  const src =\n    typeof props.src === 'string' ? props.src : (props.src as URL).href;\n  const resolveClientUrl = props.resolveClientUrl\n    ? bindResolveClientUrl(props.resolveClientUrl, src)\n    : undefined;\n  const sharedResult = shared(props.bundle ?? 'default', resolveClientUrl);\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = sharedResult;\n  }, [sharedResult]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <ConsumeRemoteComponentReact\n        isolate={props.isolate}\n        mode={props.mode}\n        name={props.name}\n        onBeforeLoad={props.onBeforeLoad}\n        onChange={props.onChange}\n        onError={props.onError}\n        onLoad={props.onLoad}\n        onRequest={props.onRequest}\n        onResponse={props.onResponse}\n        resolveClientUrl={props.resolveClientUrl}\n        reset={props.reset}\n        shared={sharedResult}\n        src={props.src}\n      >\n        {props.children}\n      </ConsumeRemoteComponentReact>\n    );\n  }\n\n  return (\n    <ConsumeRemoteComponentReact\n      isolate={props.isolate}\n      mode={props.mode}\n      name={props.name}\n      onBeforeLoad={props.onBeforeLoad}\n      onChange={props.onChange}\n      onError={props.onError}\n      onLoad={props.onLoad}\n      onRequest={props.onRequest}\n      onResponse={props.onResponse}\n      resolveClientUrl={props.resolveClientUrl}\n      reset={props.reset}\n      shared={sharedResult}\n      src={props.src}\n    >\n      {remoteComponent}\n    </ConsumeRemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<ConsumeRemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getConsumeRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getConsumeRemoteComponentProps(\n  src: string,\n  options?: {\n    /**\n     * Called when a fetch request is made to retrieve the remote component payload.\n     * Can be used to intercept requests, modify headers, or provide a custom response.\n     */\n    onRequest?: OnRequestHook;\n    /**\n     * Called after a fetch completes to retrieve the remote component payload.\n     * Can be used to inspect the response (e.g., check for redirects) or transform it.\n     */\n    onResponse?: OnResponseHook;\n    /**\n     * The name of the exposed remote component. Used to identify the remote component\n     * when multiple remote components are exposed on a page.\n     */\n    name?: string;\n  },\n): Promise<ConsumeRemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new RemoteComponentsError(\n      '`getConsumeRemoteComponentProps()` can only be used on the server side.',\n    );\n  }\n\n  const {\n    metadata: { bundle, route },\n    name,\n    links,\n    component,\n    nextData,\n    remoteShared,\n  } = await fetchRemoteComponent(src, {\n    rsc: true,\n    ...options,\n  });\n\n  const props: ConsumeRemoteComponentProps = {\n    src,\n    bundle,\n    name,\n    route,\n  };\n\n  const key = getKey(props);\n\n  // do not render the HTML in development mode when remote is using Next.js Pages Router\n  // this behavior is emulating the Next.js Pages Router FOUC as the styles are only applied on the client when running in development mode\n  if (nextData?.buildId !== 'development') {\n    // store the HTML in a global store\n    setComponent(\n      key,\n      <>\n        <script\n          data-remote-components-shared=\"\"\n          id={`${name}_shared`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(remoteShared)}\n        </script>\n        {links.map((link) => (\n          <link\n            key={`${link.as}_${link.href}`}\n            {...link}\n            precedence={undefined}\n          />\n        ))}\n        {component}\n      </>,\n    );\n  }\n\n  return {\n    ...props,\n    // add remote component key to the props\n    [REMOTE_COMPONENT_KEY]: key,\n  };\n}\n"],"mappings":"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","names":["import_react","_shared","ConsumeRemoteComponentReact"]}
+{"version":3,"sources":["../../../src/host/nextjs/pages.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport * as Form from 'next/form';\nimport * as Image from 'next/image';\nimport * as Link from 'next/link';\nimport * as Router from 'next/router';\nimport * as Script from 'next/script';\nimport { useEffect } from 'react';\nimport { ConsumeRemoteComponent as ConsumeRemoteComponentReact } from 'remote-components/host/react';\nimport { imageImpl } from '#internal/host/nextjs/image-impl';\nimport { createNextImageSharedEntries } from '#internal/host/nextjs/image-shared';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ConsumeRemoteComponentConfig } from '#internal/host/shared/config';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\nimport { RemoteComponentsError } from '#internal/utils/error';\nimport { shared as _shared } from '#remote-components/host/defaults/pages';\n\nconst navigationImpl = {\n  useRouter: () => Router.useRouter(),\n  useSearchParams: () => {\n    const router = Router.useRouter();\n    return {\n      get: (key: string) => router.query[key],\n      has: (key: string) => key in router.query,\n    };\n  },\n};\n\nconst sharedCache = new Map<string, Record<string, () => Promise<unknown>>>();\nconst shared = (bundle: string, resolveClientUrl?: ResolveClientUrl) => {\n  // Skip cache when resolveClientUrl is provided — different resolver instances\n  // must not share a cache entry, since imageImpl closes over the resolver.\n  if (!resolveClientUrl) {\n    if (sharedCache.has(bundle)) {\n      return sharedCache.get(bundle);\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const ImageComponent: typeof Image.default =\n    (Image.default as any).default ?? Image.default;\n  const result = {\n    // polyfill Next.js App Router client API (minimal)\n    // some API methods are not available when using a Next.js Pages Router application as host\n    'next/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/components/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/app-dir/link': () =>\n      Promise.resolve(Link.default) as Promise<unknown>,\n    'next/link': () => Promise.resolve(Link.default) as Promise<unknown>,\n    'next/dist/client/app-dir/form': () =>\n      Promise.resolve(Form.default) as Promise<unknown>,\n    'next/form': () => Promise.resolve(Form.default) as Promise<unknown>,\n    'next/dist/client/script': () =>\n      Promise.resolve(Script.default) as Promise<unknown>,\n    'next/script': () => Promise.resolve(Script.default) as Promise<unknown>,\n    'next/router': () => Promise.resolve(Router) as Promise<unknown>,\n    ..._shared,\n    // Always override Next.js image modules to use the bundle URL rewriter.\n    ...createNextImageSharedEntries(\n      () => imageImpl(ImageComponent, bundle, resolveClientUrl, true),\n      { getImageProps: Image.getImageProps },\n    ),\n  };\n\n  if (!resolveClientUrl) {\n    sharedCache.set(bundle, result);\n  }\n\n  return result;\n};\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, React.ReactNode>;\n};\n\nfunction getKey({\n  bundle,\n  route,\n  name,\n}: {\n  bundle?: string;\n  route?: string;\n  name?: string;\n}): string {\n  return `${bundle ?? '__next'}:${route ?? '/'}:${\n    name ?? '__vercel_remote_component'\n  }__${crypto.randomUUID()}`;\n}\n\nfunction setComponent(key: string, component: React.ReactNode): void {\n  if (!self[REMOTE_COMPONENT_STORE]) {\n    self[REMOTE_COMPONENT_STORE] = new Map();\n  }\n  self[REMOTE_COMPONENT_STORE].set(key, component);\n}\n\nfunction getComponent(key: string): React.ReactNode | undefined {\n  const component = self[REMOTE_COMPONENT_STORE]?.get(key);\n  // remove the component from the store after retrieving it to prevent memory leaks\n  // storing the HTML in the global store is only needed for SSR and it's temporary only used for a single render\n  self[REMOTE_COMPONENT_STORE]?.delete(key);\n  return component;\n}\n\n/**\n * Props for the Next.js Pages Router remote component host.\n *\n * Extends {@link ConsumeRemoteComponentConfig} with Pages Router–specific `bundle` and\n * `route` props used for SSR hydration.\n */\nexport interface ConsumeRemoteComponentProps\n  extends ConsumeRemoteComponentConfig {\n  /** The source URL of the remote component. Required for server rendering. */\n  src: string | URL;\n  /** The Webpack bundle name for the remote component. */\n  bundle?: string;\n  /** The page route of the remote component. */\n  route?: string;\n  /** Loading fallback content displayed while the remote component is being fetched. */\n  children?: React.ReactNode;\n  [REMOTE_COMPONENT_KEY]?: string;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function ConsumeRemoteComponent(props: ConsumeRemoteComponentProps) {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(\n          props[REMOTE_COMPONENT_KEY] ?? '__vercel_remote_component',\n        );\n\n  const sharedResult = shared(\n    props.bundle ?? 'default',\n    props.resolveClientUrl,\n  );\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = sharedResult;\n  }, [sharedResult]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <ConsumeRemoteComponentReact\n        isolate={props.isolate}\n        mode={props.mode}\n        name={props.name}\n        onBeforeLoad={props.onBeforeLoad}\n        onChange={props.onChange}\n        onError={props.onError}\n        onLoad={props.onLoad}\n        onRequest={props.onRequest}\n        onResponse={props.onResponse}\n        resolveClientUrl={props.resolveClientUrl}\n        reset={props.reset}\n        shared={sharedResult}\n        src={props.src}\n      >\n        {props.children}\n      </ConsumeRemoteComponentReact>\n    );\n  }\n\n  return (\n    <ConsumeRemoteComponentReact\n      isolate={props.isolate}\n      mode={props.mode}\n      name={props.name}\n      onBeforeLoad={props.onBeforeLoad}\n      onChange={props.onChange}\n      onError={props.onError}\n      onLoad={props.onLoad}\n      onRequest={props.onRequest}\n      onResponse={props.onResponse}\n      resolveClientUrl={props.resolveClientUrl}\n      reset={props.reset}\n      shared={sharedResult}\n      src={props.src}\n    >\n      {remoteComponent}\n    </ConsumeRemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<ConsumeRemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getConsumeRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getConsumeRemoteComponentProps(\n  src: string,\n  options?: {\n    /**\n     * Called when a fetch request is made to retrieve the remote component payload.\n     * Can be used to intercept requests, modify headers, or provide a custom response.\n     */\n    onRequest?: OnRequestHook;\n    /**\n     * Called after a fetch completes to retrieve the remote component payload.\n     * Can be used to inspect the response (e.g., check for redirects) or transform it.\n     */\n    onResponse?: OnResponseHook;\n    /**\n     * The name of the exposed remote component. Used to identify the remote component\n     * when multiple remote components are exposed on a page.\n     */\n    name?: string;\n  },\n): Promise<ConsumeRemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new RemoteComponentsError(\n      '`getConsumeRemoteComponentProps()` can only be used on the server side.',\n    );\n  }\n\n  const {\n    metadata: { bundle, route },\n    name,\n    links,\n    component,\n    nextData,\n    remoteShared,\n  } = await fetchRemoteComponent(src, {\n    rsc: true,\n    ...options,\n  });\n\n  const props: ConsumeRemoteComponentProps = {\n    src,\n    bundle,\n    name,\n    route,\n  };\n\n  const key = getKey(props);\n\n  // do not render the HTML in development mode when remote is using Next.js Pages Router\n  // this behavior is emulating the Next.js Pages Router FOUC as the styles are only applied on the client when running in development mode\n  if (nextData?.buildId !== 'development') {\n    // store the HTML in a global store\n    setComponent(\n      key,\n      <>\n        <script\n          data-remote-components-shared=\"\"\n          id={`${name}_shared`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(remoteShared)}\n        </script>\n        {links.map((link) => (\n          <link\n            key={`${link.as}_${link.href}`}\n            {...link}\n            precedence={undefined}\n          />\n        ))}\n        {component}\n      </>,\n    );\n  }\n\n  return {\n    ...props,\n    // add remote component key to the props\n    [REMOTE_COMPONENT_KEY]: key,\n  };\n}\n"],"mappings":"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","names":["import_react","_shared","ConsumeRemoteComponentReact"]}

package/dist/host/nextjs/pages.js

@@ -10,7 +10,6 @@ import { ConsumeRemoteComponent as ConsumeRemoteComponentReact } from "remote-co
 import { imageImpl } from "#internal/host/nextjs/image-impl";
 import { createNextImageSharedEntries } from "#internal/host/nextjs/image-shared";
 import { fetchRemoteComponent } from "#internal/host/server/fetch-remote-component";
-import { bindResolveClientUrl } from "#internal/runtime/url/default-resolve-client-url";
 import { RemoteComponentsError } from "#internal/utils/error";
 import { shared as _shared } from "#remote-components/host/defaults/pages";
 const navigationImpl = {
@@ -83,9 +82,10 @@ function ConsumeRemoteComponent(props) {
       props[REMOTE_COMPONENT_KEY] ?? "__vercel_remote_component"
     )
   );
-  const src = typeof props.src === "string" ? props.src : props.src.href;
-  const resolveClientUrl = props.resolveClientUrl ? bindResolveClientUrl(props.resolveClientUrl, src) : void 0;
-  const sharedResult = shared(props.bundle ?? "default", resolveClientUrl);
+  const sharedResult = shared(
+    props.bundle ?? "default",
+    props.resolveClientUrl
+  );
   useEffect(() => {
     const clientSelf = globalThis;
     clientSelf.__remote_component_shared__ = sharedResult;

package/dist/host/nextjs/pages.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/host/nextjs/pages.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport * as Form from 'next/form';\nimport * as Image from 'next/image';\nimport * as Link from 'next/link';\nimport * as Router from 'next/router';\nimport * as Script from 'next/script';\nimport { useEffect } from 'react';\nimport { ConsumeRemoteComponent as ConsumeRemoteComponentReact } from 'remote-components/host/react';\nimport { imageImpl } from '#internal/host/nextjs/image-impl';\nimport { createNextImageSharedEntries } from '#internal/host/nextjs/image-shared';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ConsumeRemoteComponentConfig } from '#internal/host/shared/config';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport { bindResolveClientUrl } from '#internal/runtime/url/default-resolve-client-url';\nimport type { InternalResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\nimport { RemoteComponentsError } from '#internal/utils/error';\nimport { shared as _shared } from '#remote-components/host/defaults/pages';\n\nconst navigationImpl = {\n  useRouter: () => Router.useRouter(),\n  useSearchParams: () => {\n    const router = Router.useRouter();\n    return {\n      get: (key: string) => router.query[key],\n      has: (key: string) => key in router.query,\n    };\n  },\n};\n\nconst sharedCache = new Map<string, Record<string, () => Promise<unknown>>>();\nconst shared = (\n  bundle: string,\n  resolveClientUrl?: InternalResolveClientUrl,\n) => {\n  // Skip cache when resolveClientUrl is provided — different resolver instances\n  // must not share a cache entry, since imageImpl closes over the resolver.\n  if (!resolveClientUrl) {\n    if (sharedCache.has(bundle)) {\n      return sharedCache.get(bundle);\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const ImageComponent: typeof Image.default =\n    (Image.default as any).default ?? Image.default;\n  const result = {\n    // polyfill Next.js App Router client API (minimal)\n    // some API methods are not available when using a Next.js Pages Router application as host\n    'next/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/components/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/app-dir/link': () =>\n      Promise.resolve(Link.default) as Promise<unknown>,\n    'next/link': () => Promise.resolve(Link.default) as Promise<unknown>,\n    'next/dist/client/app-dir/form': () =>\n      Promise.resolve(Form.default) as Promise<unknown>,\n    'next/form': () => Promise.resolve(Form.default) as Promise<unknown>,\n    'next/dist/client/script': () =>\n      Promise.resolve(Script.default) as Promise<unknown>,\n    'next/script': () => Promise.resolve(Script.default) as Promise<unknown>,\n    'next/router': () => Promise.resolve(Router) as Promise<unknown>,\n    ..._shared,\n    // Always override Next.js image modules to use the bundle URL rewriter.\n    ...createNextImageSharedEntries(\n      () => imageImpl(ImageComponent, bundle, resolveClientUrl, true),\n      { getImageProps: Image.getImageProps },\n    ),\n  };\n\n  if (!resolveClientUrl) {\n    sharedCache.set(bundle, result);\n  }\n\n  return result;\n};\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, React.ReactNode>;\n};\n\nfunction getKey({\n  bundle,\n  route,\n  name,\n}: {\n  bundle?: string;\n  route?: string;\n  name?: string;\n}): string {\n  return `${bundle ?? '__next'}:${route ?? '/'}:${\n    name ?? '__vercel_remote_component'\n  }__${crypto.randomUUID()}`;\n}\n\nfunction setComponent(key: string, component: React.ReactNode): void {\n  if (!self[REMOTE_COMPONENT_STORE]) {\n    self[REMOTE_COMPONENT_STORE] = new Map();\n  }\n  self[REMOTE_COMPONENT_STORE].set(key, component);\n}\n\nfunction getComponent(key: string): React.ReactNode | undefined {\n  const component = self[REMOTE_COMPONENT_STORE]?.get(key);\n  // remove the component from the store after retrieving it to prevent memory leaks\n  // storing the HTML in the global store is only needed for SSR and it's temporary only used for a single render\n  self[REMOTE_COMPONENT_STORE]?.delete(key);\n  return component;\n}\n\n/**\n * Props for the Next.js Pages Router remote component host.\n *\n * Extends {@link ConsumeRemoteComponentConfig} with Pages Router–specific `bundle` and\n * `route` props used for SSR hydration.\n */\nexport interface ConsumeRemoteComponentProps\n  extends ConsumeRemoteComponentConfig {\n  /** The source URL of the remote component. Required for server rendering. */\n  src: string | URL;\n  /** The Webpack bundle name for the remote component. */\n  bundle?: string;\n  /** The page route of the remote component. */\n  route?: string;\n  /** Loading fallback content displayed while the remote component is being fetched. */\n  children?: React.ReactNode;\n  [REMOTE_COMPONENT_KEY]?: string;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function ConsumeRemoteComponent(props: ConsumeRemoteComponentProps) {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(\n          props[REMOTE_COMPONENT_KEY] ?? '__vercel_remote_component',\n        );\n\n  const src =\n    typeof props.src === 'string' ? props.src : (props.src as URL).href;\n  const resolveClientUrl = props.resolveClientUrl\n    ? bindResolveClientUrl(props.resolveClientUrl, src)\n    : undefined;\n  const sharedResult = shared(props.bundle ?? 'default', resolveClientUrl);\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = sharedResult;\n  }, [sharedResult]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <ConsumeRemoteComponentReact\n        isolate={props.isolate}\n        mode={props.mode}\n        name={props.name}\n        onBeforeLoad={props.onBeforeLoad}\n        onChange={props.onChange}\n        onError={props.onError}\n        onLoad={props.onLoad}\n        onRequest={props.onRequest}\n        onResponse={props.onResponse}\n        resolveClientUrl={props.resolveClientUrl}\n        reset={props.reset}\n        shared={sharedResult}\n        src={props.src}\n      >\n        {props.children}\n      </ConsumeRemoteComponentReact>\n    );\n  }\n\n  return (\n    <ConsumeRemoteComponentReact\n      isolate={props.isolate}\n      mode={props.mode}\n      name={props.name}\n      onBeforeLoad={props.onBeforeLoad}\n      onChange={props.onChange}\n      onError={props.onError}\n      onLoad={props.onLoad}\n      onRequest={props.onRequest}\n      onResponse={props.onResponse}\n      resolveClientUrl={props.resolveClientUrl}\n      reset={props.reset}\n      shared={sharedResult}\n      src={props.src}\n    >\n      {remoteComponent}\n    </ConsumeRemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<ConsumeRemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getConsumeRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getConsumeRemoteComponentProps(\n  src: string,\n  options?: {\n    /**\n     * Called when a fetch request is made to retrieve the remote component payload.\n     * Can be used to intercept requests, modify headers, or provide a custom response.\n     */\n    onRequest?: OnRequestHook;\n    /**\n     * Called after a fetch completes to retrieve the remote component payload.\n     * Can be used to inspect the response (e.g., check for redirects) or transform it.\n     */\n    onResponse?: OnResponseHook;\n    /**\n     * The name of the exposed remote component. Used to identify the remote component\n     * when multiple remote components are exposed on a page.\n     */\n    name?: string;\n  },\n): Promise<ConsumeRemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new RemoteComponentsError(\n      '`getConsumeRemoteComponentProps()` can only be used on the server side.',\n    );\n  }\n\n  const {\n    metadata: { bundle, route },\n    name,\n    links,\n    component,\n    nextData,\n    remoteShared,\n  } = await fetchRemoteComponent(src, {\n    rsc: true,\n    ...options,\n  });\n\n  const props: ConsumeRemoteComponentProps = {\n    src,\n    bundle,\n    name,\n    route,\n  };\n\n  const key = getKey(props);\n\n  // do not render the HTML in development mode when remote is using Next.js Pages Router\n  // this behavior is emulating the Next.js Pages Router FOUC as the styles are only applied on the client when running in development mode\n  if (nextData?.buildId !== 'development') {\n    // store the HTML in a global store\n    setComponent(\n      key,\n      <>\n        <script\n          data-remote-components-shared=\"\"\n          id={`${name}_shared`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(remoteShared)}\n        </script>\n        {links.map((link) => (\n          <link\n            key={`${link.as}_${link.href}`}\n            {...link}\n            precedence={undefined}\n          />\n        ))}\n        {component}\n      </>,\n    );\n  }\n\n  return {\n    ...props,\n    // add remote component key to the props\n    [REMOTE_COMPONENT_KEY]: key,\n  };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/host/nextjs/pages.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport * as Form from 'next/form';\nimport * as Image from 'next/image';\nimport * as Link from 'next/link';\nimport * as Router from 'next/router';\nimport * as Script from 'next/script';\nimport { useEffect } from 'react';\nimport { ConsumeRemoteComponent as ConsumeRemoteComponentReact } from 'remote-components/host/react';\nimport { imageImpl } from '#internal/host/nextjs/image-impl';\nimport { createNextImageSharedEntries } from '#internal/host/nextjs/image-shared';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ConsumeRemoteComponentConfig } from '#internal/host/shared/config';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\nimport { RemoteComponentsError } from '#internal/utils/error';\nimport { shared as _shared } from '#remote-components/host/defaults/pages';\n\nconst navigationImpl = {\n  useRouter: () => Router.useRouter(),\n  useSearchParams: () => {\n    const router = Router.useRouter();\n    return {\n      get: (key: string) => router.query[key],\n      has: (key: string) => key in router.query,\n    };\n  },\n};\n\nconst sharedCache = new Map<string, Record<string, () => Promise<unknown>>>();\nconst shared = (bundle: string, resolveClientUrl?: ResolveClientUrl) => {\n  // Skip cache when resolveClientUrl is provided — different resolver instances\n  // must not share a cache entry, since imageImpl closes over the resolver.\n  if (!resolveClientUrl) {\n    if (sharedCache.has(bundle)) {\n      return sharedCache.get(bundle);\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const ImageComponent: typeof Image.default =\n    (Image.default as any).default ?? Image.default;\n  const result = {\n    // polyfill Next.js App Router client API (minimal)\n    // some API methods are not available when using a Next.js Pages Router application as host\n    'next/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/components/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/app-dir/link': () =>\n      Promise.resolve(Link.default) as Promise<unknown>,\n    'next/link': () => Promise.resolve(Link.default) as Promise<unknown>,\n    'next/dist/client/app-dir/form': () =>\n      Promise.resolve(Form.default) as Promise<unknown>,\n    'next/form': () => Promise.resolve(Form.default) as Promise<unknown>,\n    'next/dist/client/script': () =>\n      Promise.resolve(Script.default) as Promise<unknown>,\n    'next/script': () => Promise.resolve(Script.default) as Promise<unknown>,\n    'next/router': () => Promise.resolve(Router) as Promise<unknown>,\n    ..._shared,\n    // Always override Next.js image modules to use the bundle URL rewriter.\n    ...createNextImageSharedEntries(\n      () => imageImpl(ImageComponent, bundle, resolveClientUrl, true),\n      { getImageProps: Image.getImageProps },\n    ),\n  };\n\n  if (!resolveClientUrl) {\n    sharedCache.set(bundle, result);\n  }\n\n  return result;\n};\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, React.ReactNode>;\n};\n\nfunction getKey({\n  bundle,\n  route,\n  name,\n}: {\n  bundle?: string;\n  route?: string;\n  name?: string;\n}): string {\n  return `${bundle ?? '__next'}:${route ?? '/'}:${\n    name ?? '__vercel_remote_component'\n  }__${crypto.randomUUID()}`;\n}\n\nfunction setComponent(key: string, component: React.ReactNode): void {\n  if (!self[REMOTE_COMPONENT_STORE]) {\n    self[REMOTE_COMPONENT_STORE] = new Map();\n  }\n  self[REMOTE_COMPONENT_STORE].set(key, component);\n}\n\nfunction getComponent(key: string): React.ReactNode | undefined {\n  const component = self[REMOTE_COMPONENT_STORE]?.get(key);\n  // remove the component from the store after retrieving it to prevent memory leaks\n  // storing the HTML in the global store is only needed for SSR and it's temporary only used for a single render\n  self[REMOTE_COMPONENT_STORE]?.delete(key);\n  return component;\n}\n\n/**\n * Props for the Next.js Pages Router remote component host.\n *\n * Extends {@link ConsumeRemoteComponentConfig} with Pages Router–specific `bundle` and\n * `route` props used for SSR hydration.\n */\nexport interface ConsumeRemoteComponentProps\n  extends ConsumeRemoteComponentConfig {\n  /** The source URL of the remote component. Required for server rendering. */\n  src: string | URL;\n  /** The Webpack bundle name for the remote component. */\n  bundle?: string;\n  /** The page route of the remote component. */\n  route?: string;\n  /** Loading fallback content displayed while the remote component is being fetched. */\n  children?: React.ReactNode;\n  [REMOTE_COMPONENT_KEY]?: string;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function ConsumeRemoteComponent(props: ConsumeRemoteComponentProps) {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(\n          props[REMOTE_COMPONENT_KEY] ?? '__vercel_remote_component',\n        );\n\n  const sharedResult = shared(\n    props.bundle ?? 'default',\n    props.resolveClientUrl,\n  );\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = sharedResult;\n  }, [sharedResult]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <ConsumeRemoteComponentReact\n        isolate={props.isolate}\n        mode={props.mode}\n        name={props.name}\n        onBeforeLoad={props.onBeforeLoad}\n        onChange={props.onChange}\n        onError={props.onError}\n        onLoad={props.onLoad}\n        onRequest={props.onRequest}\n        onResponse={props.onResponse}\n        resolveClientUrl={props.resolveClientUrl}\n        reset={props.reset}\n        shared={sharedResult}\n        src={props.src}\n      >\n        {props.children}\n      </ConsumeRemoteComponentReact>\n    );\n  }\n\n  return (\n    <ConsumeRemoteComponentReact\n      isolate={props.isolate}\n      mode={props.mode}\n      name={props.name}\n      onBeforeLoad={props.onBeforeLoad}\n      onChange={props.onChange}\n      onError={props.onError}\n      onLoad={props.onLoad}\n      onRequest={props.onRequest}\n      onResponse={props.onResponse}\n      resolveClientUrl={props.resolveClientUrl}\n      reset={props.reset}\n      shared={sharedResult}\n      src={props.src}\n    >\n      {remoteComponent}\n    </ConsumeRemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<ConsumeRemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getConsumeRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getConsumeRemoteComponentProps(\n  src: string,\n  options?: {\n    /**\n     * Called when a fetch request is made to retrieve the remote component payload.\n     * Can be used to intercept requests, modify headers, or provide a custom response.\n     */\n    onRequest?: OnRequestHook;\n    /**\n     * Called after a fetch completes to retrieve the remote component payload.\n     * Can be used to inspect the response (e.g., check for redirects) or transform it.\n     */\n    onResponse?: OnResponseHook;\n    /**\n     * The name of the exposed remote component. Used to identify the remote component\n     * when multiple remote components are exposed on a page.\n     */\n    name?: string;\n  },\n): Promise<ConsumeRemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new RemoteComponentsError(\n      '`getConsumeRemoteComponentProps()` can only be used on the server side.',\n    );\n  }\n\n  const {\n    metadata: { bundle, route },\n    name,\n    links,\n    component,\n    nextData,\n    remoteShared,\n  } = await fetchRemoteComponent(src, {\n    rsc: true,\n    ...options,\n  });\n\n  const props: ConsumeRemoteComponentProps = {\n    src,\n    bundle,\n    name,\n    route,\n  };\n\n  const key = getKey(props);\n\n  // do not render the HTML in development mode when remote is using Next.js Pages Router\n  // this behavior is emulating the Next.js Pages Router FOUC as the styles are only applied on the client when running in development mode\n  if (nextData?.buildId !== 'development') {\n    // store the HTML in a global store\n    setComponent(\n      key,\n      <>\n        <script\n          data-remote-components-shared=\"\"\n          id={`${name}_shared`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(remoteShared)}\n        </script>\n        {links.map((link) => (\n          <link\n            key={`${link.as}_${link.href}`}\n            {...link}\n            precedence={undefined}\n          />\n        ))}\n        {component}\n      </>,\n    );\n  }\n\n  return {\n    ...props,\n    // add remote component key to the props\n    [REMOTE_COMPONENT_KEY]: key,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/host/react.cjs

@@ -35,6 +35,7 @@ __export(react_exports, {
 module.exports = __toCommonJS(react_exports);
 var import_react3 = require("react");
 var import_react_dom = require("react-dom");
+var import_context2 = require("#internal/host/react/context");
 
 // src/utils/constants.ts
 var RC_PROTECTED_REMOTE_FETCH_PATHNAME = "/rc-fetch-protected-remote";
@@ -119,6 +120,11 @@ async function errorFromFailedFetch(originalUrl, resolvedUrl, res) {
   }
   return fallback;
 }
+function failedProxiedAssetError(kind, url, resolvedUrl) {
+  return new RemoteComponentsError(
+    `Failed to load ${kind} "${url}" via proxy "${resolvedUrl}". Ensure withRemoteComponentsHostProxy middleware is configured, "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" is in the matcher, and the remote URL is included in allowedProxyUrls. See: ${CORS_DOCS_URL}`
+  );
+}
 function failedProxyFetchError(originalUrl, proxyUrl, status, responseBody) {
   if (status === 404) {
     return new RemoteComponentsError(
@@ -170,7 +176,7 @@ function warnCrossOriginFetchError(logLocation, url) {
     }
     logWarn(
       logLocation,
-      `Failed to fetch cross-origin resource "${parsed.href}". If this is a protected deployment, ensure withRemoteComponentsHostProxy middleware is configured in your host and that the remote URL is included in allowedProxyUrls. See: ${CORS_DOCS_URL}`
+      `Failed to fetch cross-origin resource "${parsed.href}". To load assets from a protected deployment, two steps are required: (1) configure withRemoteComponentsHostProxy middleware in your host with the remote URL in allowedProxyUrls, and (2) provide a resolveClientUrl prop that rewrites cross-origin asset URLs to go through the proxy. See: ${CORS_DOCS_URL}`
     );
   } catch {
   }
@@ -683,6 +689,7 @@ var ReactDOM = __toESM(require("react-dom"), 1);
 var ReactDOMClient = __toESM(require("react-dom/client"), 1);
 
 // src/config/webpack/apply-shared-modules.ts
+var DEDUPLICATION_SKIPPED = "shared module deduplication skipped. The remote may load its own copy of shared dependencies.";
 function applySharedModules(bundle, resolve) {
   logDebug(
     "SharedModules",
@@ -726,13 +733,16 @@ function applySharedModules(bundle, resolve) {
         } else {
           logWarn(
             "SharedModules",
-            `webpackBundle.m is not available for bundle "${bundle}"`
+            `webpackBundle.m is not available for bundle "${bundle}" \u2014 ${DEDUPLICATION_SKIPPED}`
           );
         }
       }
     }
   } else {
-    logWarn("SharedModules", `No webpack require found for bundle "${bundle}"`);
+    logWarn(
+      "SharedModules",
+      `No webpack require found for bundle "${bundle}" \u2014 ${DEDUPLICATION_SKIPPED}`
+    );
     logDebug(
       "SharedModules",
       `Available bundles: ${Object.keys(self.__remote_webpack_require__ ?? {})}`
@@ -986,11 +996,7 @@ function createChunkLoader(runtime, resolveClientUrl) {
       }).then(resolve).catch((error) => {
         const isProxied = isProxiedUrl(resolvedUrl);
         if (isProxied) {
-          reject(
-            new RemoteComponentsError(
-              `Failed to load chunk "${url}" via proxy "${resolvedUrl}". Ensure withRemoteComponentsHostProxy middleware is configured and "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" is in the matcher. See: ${CORS_DOCS_URL}`
-            )
-          );
+          reject(failedProxiedAssetError("chunk", url, resolvedUrl));
         } else {
           warnCrossOriginFetchError("ChunkLoader", url);
           reject(error);
@@ -1368,6 +1374,7 @@ function createTurbopackContext(bundle, exports, moduleExports, modules, moduleI
 }
 
 // src/runtime/turbopack/shared-modules.ts
+var DEDUPLICATION_WARNING = "This module will not be deduplicated \u2014 the remote may load its own copy, which can cause duplicate instance errors (e.g. invalid hook calls if React is loaded twice).";
 async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {}) {
   const self = globalThis;
   self.__remote_shared_modules__ = self.__remote_shared_modules__ ?? {};
@@ -1418,7 +1425,7 @@ async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {
             } else {
               logError(
                 "SharedModules",
-                `Host shared module "${module2}" not found for ID ${id}`
+                `Host shared module "${module2}" not found for ID ${id}. ${DEDUPLICATION_WARNING}`
               );
             }
           }
@@ -1435,7 +1442,7 @@ async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {
         } else {
           logError(
             "SharedModules",
-            `Shared module "${module2}" not found for "${bundle}"`
+            `Shared module "${module2}" not found for "${bundle}". ${DEDUPLICATION_WARNING}`
           );
         }
       }
@@ -1598,11 +1605,7 @@ async function loadScripts(scripts, resolveClientUrl) {
         newScript.onerror = () => {
           const isProxied = isProxiedUrl(resolvedSrc);
           if (isProxied) {
-            reject(
-              new RemoteComponentsError(
-                `Failed to load script "${newSrc}" via proxy "${resolvedSrc}". Ensure withRemoteComponentsHostProxy middleware is configured and "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" is in the matcher. See: ${CORS_DOCS_URL}`
-              )
-            );
+            reject(failedProxiedAssetError("script", newSrc, resolvedSrc));
           } else {
             warnCrossOriginFetchError("ScriptLoader", newSrc);
             reject(
@@ -1937,11 +1940,12 @@ function bindResolveClientUrl(prop, remoteSrc) {
 // src/host/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]
+  const raw = prop ?? contextValue;
+  const bound = (0, import_react.useMemo)(
+    () => bindResolveClientUrl(raw, urlHref),
+    [raw, urlHref]
   );
+  return { bound, raw };
 }
 
 // src/host/react/hooks/use-shadow-root.ts
@@ -2026,9 +2030,9 @@ function ConsumeRemoteComponent({
   isolate,
   mode = "open",
   reset,
-  credentials = "same-origin",
+  credentials: credentialsProp,
   name: nameProp = "__vercel_remote_component",
-  shared = {},
+  shared: sharedProp,
   children,
   onBeforeLoad,
   onLoad,
@@ -2036,9 +2040,12 @@ function ConsumeRemoteComponent({
   onChange,
   onRequest,
   onResponse,
-  resolveClientUrl: _resolveClientUrl
+  resolveClientUrl: resolveClientUrlProp
 }) {
   const instanceId = (0, import_react3.useId)();
+  const { credentials: contextCredentials, shared: contextShared } = (0, import_context2.useRemoteComponentsContext)();
+  const credentials = credentialsProp ?? contextCredentials ?? "same-origin";
+  const shared = sharedProp ?? contextShared ?? {};
   const name = (0, import_react3.useMemo)(
     () => resolveNameFromSrc(src, nameProp),
     [src, nameProp]
@@ -2047,7 +2054,10 @@ function ConsumeRemoteComponent({
     null
   );
   const url = (0, import_react3.useMemo)(() => getClientOrServerUrl(src, DUMMY_FALLBACK), [src]);
-  const resolveClientUrl = useResolveClientUrl(_resolveClientUrl, url.href);
+  const { bound: resolveClientUrl } = useResolveClientUrl(
+    resolveClientUrlProp,
+    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