remote-components 0.4.1 → 0.4.2

package/dist/internal/host/server/fetch-remote-component.cjs

@@ -182,9 +182,8 @@ function visitFragment(fragment, serverUrl, remoteName) {
     html: Array.from(htmlChunks).join("")
   };
 }
-async function fetchRemoteComponent(src, options = {}) {
-  const ssrRelativePathBaseUrl = (0, import_get_ssr_relative_path_base_url.getSSRRelativePathBaseUrl)();
-  const serverUrl = new URL(src, ssrRelativePathBaseUrl);
+async function fetchWithTags(src, relativePathBaseUrl, options) {
+  const serverUrl = new URL(src, relativePathBaseUrl);
   const tags = [
     "_vc_rc:fetch-remote-component",
     // the max size of a next cache tag is 256 characters
@@ -196,15 +195,32 @@ async function fetchRemoteComponent(src, options = {}) {
   if (options.name) {
     tags.push(options.name.slice(-256));
   }
-  const fetchInit = {
-    next: {
-      tags
-    }
-  };
+  const fetchInit = { next: { tags } };
   const res = await (0, import_fetch_with_hooks.fetchWithHooks)(serverUrl, fetchInit, {
     onRequest: options.onRequest,
     onResponse: options.onResponse
   });
+  return {
+    res,
+    serverUrl,
+    // If the remote component is part of a microfrontend, the src provided will be relative.
+    isMfeRelativeSrc: serverUrl.host === new URL(relativePathBaseUrl).host
+  };
+}
+async function fetchRemoteComponent(src, options = {}) {
+  let { res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(
+    src,
+    (0, import_get_ssr_relative_path_base_url.getSSRRelativePathBaseUrl)(),
+    options
+  );
+  const maybeFirstMfeProductionDeployment = isMfeRelativeSrc && serverUrl.host === import_get_ssr_relative_path_base_url.PRODUCTION_URL;
+  if (res.status === 404 && maybeFirstMfeProductionDeployment && import_get_ssr_relative_path_base_url.DEPLOYMENT_URL) {
+    ({ res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(
+      src,
+      `https://${import_get_ssr_relative_path_base_url.DEPLOYMENT_URL}`,
+      options
+    ));
+  }
   if (!res.ok && !res.body) {
     throw (0, import_error.failedToFetchRemoteComponentError)(serverUrl.href, res);
   }
@@ -219,10 +235,9 @@ async function fetchRemoteComponent(src, options = {}) {
     throw (0, import_error.failedToFetchRemoteComponentError)(
       serverUrl.href,
       res,
-      "Check if you can open it in the browser."
+      maybeFirstMfeProductionDeployment ? `If this is the first production build of a microfrontends setup, try redeploying once the remote is deployed to production. Once deployed, this error will not re-occur, and ISR revalidation will happen automatically for remote components once they deploy. https://remote-components-docs.vercel.sh/docs/concepts/isr-deployment` : `Check if you can open it in the browser.`
     );
   }
-  const parser = import_parse5.Parser.getFragmentParser();
   if (!res.body) {
     throw (0, import_error.failedToFetchRemoteComponentError)(
       serverUrl.href,
@@ -230,6 +245,7 @@ async function fetchRemoteComponent(src, options = {}) {
       `Response body is empty. Check if you can open it in the browser and you see the Remote Component content.`
     );
   }
+  const parser = import_parse5.Parser.getFragmentParser();
   const decoder = new TextDecoder();
   for await (const chunk of res.body) {
     parser.tokenizer.write(decoder.decode(chunk), false);
@@ -248,9 +264,8 @@ async function fetchRemoteComponent(src, options = {}) {
   } = visitFragment(fragment, serverUrl, remoteName);
   if (!metadata) {
     const isSSGBuild = process.env.NEXT_PHASE === "phase-production-build";
-    const isSSRRelativePathBase = serverUrl.host === new URL(ssrRelativePathBaseUrl).host;
     const isPreview = process.env.VERCEL_TARGET_ENV === "preview";
-    if (isSSGBuild && isSSRRelativePathBase && isPreview && options.appRouter) {
+    if (isSSGBuild && isMfeRelativeSrc && isPreview && options.appRouter) {
       let skeletonComponent;
       if (options.rsc) {
         const { createElement } = await import("react");

package/dist/internal/host/server/fetch-remote-component.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/host/server/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { type RSC, visit } from '#internal/host/nextjs/dom-flight';\nimport {\n  getSkeletonHtml,\n  getSkeletonMessage,\n} from '#internal/host/nextjs/skeleton';\nimport { fetchWithHooks } from '#internal/host/server/fetch-with-hooks';\nimport { getClientSrc } from '#internal/host/server/get-client-src';\nimport { getSSRRelativePathBaseUrl } from '#internal/host/server/get-ssr-relative-path-base-url';\nimport type {\n  LinkDescriptor,\n  ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport {\n  buildMetadata,\n  type RawMetadataAttrs,\n  type RemoteComponentMetadata,\n} from '#internal/runtime/metadata';\nimport { importRSCClientEdge } from '#internal/runtime/rsc-imports';\nimport {\n  failedToFetchRemoteComponentError,\n  multipleRemoteComponentsError,\n  RemoteComponentsError,\n} from '#internal/utils/error';\nimport type { FetchRemoteComponentResponse, NextData } from './types';\n\n/**\n * Converts RSC flight data into a React element tree using the edge streaming\n * runtime. The manifest tells React how to resolve module references back to\n * the remote origin.\n */\nasync function buildRscComponent(\n  rsc: RSC | RSC[] | string | null,\n  serverUrl: URL,\n): Promise<React.ReactNode> {\n  const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n  const { createFromReadableStream } = await importRSCClientEdge();\n  return createFromReadableStream(\n    new ReadableStream({\n      type: 'bytes',\n      start(controller) {\n        const encoder = new TextEncoder();\n        controller.enqueue(encoder.encode(componentRSC));\n        controller.close();\n      },\n    }),\n    {\n      serverConsumerManifest: {\n        moduleLoading: {\n          prefix: serverUrl.origin,\n          crossOrigin: true,\n        },\n        moduleMap: {},\n      },\n    },\n  );\n}\n\nfunction buildSkeletonResponse(\n  serverUrl: URL,\n  metadata: RemoteComponentMetadata,\n  skeletonComponent: React.ReactNode | undefined,\n): FetchRemoteComponentResponse {\n  return {\n    name: 'remote-component-skeleton',\n    serverUrl,\n    metadata: {\n      ...metadata,\n      type: 'remote-component',\n    },\n    rsc: getSkeletonMessage(),\n    scripts: [],\n    links: [],\n    hydrationData: [],\n    nextData: undefined,\n    component: skeletonComponent,\n    html: getSkeletonHtml(serverUrl.href),\n    remoteShared: {},\n  };\n}\n\n/**\n * Walks the parsed HTML fragment and extracts all remote component data:\n * metadata, scripts, links, hydration data, Next.js data, shared deps, and HTML.\n */\nfunction visitFragment(\n  fragment: DefaultTreeAdapterMap['documentFragment'],\n  serverUrl: URL,\n  remoteName: string | undefined,\n) {\n  const scriptSrcSet = new Set<string>();\n  const scriptTextSet = new Set<string>();\n  const scripts: ScriptDescriptor[] = [];\n\n  const linkKeySet = new Set<string>();\n  const links: LinkDescriptor[] = [];\n\n  const hydrationData: string[] = [];\n  const htmlChunks = new Set<string>();\n\n  let metadata: RemoteComponentMetadata | undefined;\n  let nextData: NextData | undefined;\n  let remoteShared: Record<string, string> = {};\n  let hasRSC = false;\n  let hasShared = false;\n  let error: RemoteComponentsError | undefined;\n\n  const rawRscChunks: string[] = [];\n\n  const rsc = visit(fragment, {\n    url: serverUrl,\n    name: remoteName,\n    onMetadata(attrs: RawMetadataAttrs) {\n      const incoming = buildMetadata(attrs, serverUrl);\n      // Skip multiple component detection for Pages Router (__next) since\n      // it only supports one remote component per page\n      if (\n        !remoteName &&\n        metadata &&\n        metadata.id !== incoming.id &&\n        incoming.id !== '__next' &&\n        metadata.id !== '__next' &&\n        !nextData\n      ) {\n        throw multipleRemoteComponentsError(serverUrl.href);\n      }\n      metadata = incoming;\n    },\n    onScript(attrs) {\n      const clientSrc = getClientSrc(attrs.src, serverUrl.href);\n      const textContent =\n        typeof attrs.textContent === 'string' ? attrs.textContent : undefined;\n\n      if (textContent) {\n        if (!scriptTextSet.has(textContent)) {\n          scriptTextSet.add(textContent);\n          scripts.push({ src: '', textContent });\n        }\n      } else if (!scriptSrcSet.has(clientSrc)) {\n        scriptSrcSet.add(clientSrc);\n        scripts.push({ src: clientSrc });\n      }\n    },\n    onLink(attrs) {\n      const relativeAttrs = {\n        ...attrs,\n        href: getClientSrc(attrs.href, serverUrl.href),\n      };\n      const linkKey = `${relativeAttrs.href}::${attrs.rel}`;\n      if (!linkKeySet.has(linkKey)) {\n        linkKeySet.add(linkKey);\n        links.push(relativeAttrs);\n      }\n    },\n    onRSC(chunk) {\n      rawRscChunks.push(chunk);\n      hasRSC = true;\n    },\n    onNextData(data) {\n      nextData = data;\n    },\n    onHTML(chunk) {\n      if (!htmlChunks.has(chunk)) {\n        htmlChunks.add(chunk);\n      }\n    },\n    onShared(_shared) {\n      remoteShared = _shared;\n      hasShared = true;\n    },\n    onError(message, stack) {\n      error = new RemoteComponentsError(message);\n      if (stack) {\n        error.stack = stack;\n      }\n    },\n  });\n\n  hydrationData.push(...rawRscChunks);\n\n  if (error) {\n    throw error;\n  }\n\n  if (metadata) {\n    if (!hasRSC && !nextData && metadata.type === 'nextjs') {\n      throw new RemoteComponentsError(\n        `The Remote Component at \"${serverUrl.href}\" seems to be a Next.js component but it does not contain any RSC flight data or Next.js props data. Make sure the remote URL is correct and contains a Remote Component.`,\n      );\n    }\n\n    if (\n      metadata.type === 'nextjs' &&\n      !hasShared &&\n      !nextData?.props.__REMOTE_COMPONENT__?.shared\n    ) {\n      throw new RemoteComponentsError(\n        `No shared dependencies found for Remote Component at \"${serverUrl.href}\". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`,\n      );\n    }\n  }\n\n  const resolvedShared =\n    nextData?.props.__REMOTE_COMPONENT__?.shared ?? remoteShared;\n\n  return {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared: resolvedShared,\n    html: Array.from(htmlChunks).join(''),\n  };\n}\n\nexport async function fetchRemoteComponent(\n  src: string | URL,\n  options: {\n    name?: string;\n    rsc?: boolean;\n    /** Whether this is being called from Next.js App Router. Used to enable skeleton fallback during SSG builds. */\n    appRouter?: boolean;\n    onRequest?: OnRequestHook;\n    onResponse?: OnResponseHook;\n  } = {},\n): Promise<FetchRemoteComponentResponse> {\n  const ssrRelativePathBaseUrl = getSSRRelativePathBaseUrl();\n  const serverUrl = new URL(src, ssrRelativePathBaseUrl);\n\n  const tags = [\n    '_vc_rc:fetch-remote-component',\n    // the max size of a next cache tag is 256 characters\n    serverUrl.host.slice(0, 256),\n    // use the suffix so this tag is unique if multiple remote\n    // components have the same host, but unique pathnames / query params\n    (typeof src === 'string' ? src : src.href).slice(-256),\n  ];\n  if (options.name) {\n    tags.push(options.name.slice(-256));\n  }\n\n  const fetchInit = {\n    next: {\n      tags,\n    },\n  };\n\n  const res = await fetchWithHooks(serverUrl, fetchInit, {\n    onRequest: options.onRequest,\n    onResponse: options.onResponse,\n  });\n\n  // If there is an error in the remote, parse and extract the remote error (except 404 and 401).\n  if (!res.ok && !res.body) {\n    throw failedToFetchRemoteComponentError(serverUrl.href, res);\n  }\n\n  if (res.status === 401) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      'If you are using Deployment Protection, ensure the automation bypass environment variable secret in the host matches an automation bypass value in the remote. See https://remote-components-docs.vercel.sh/docs/concepts/cors-external-urls#deployment-protection for details.',\n    );\n  }\n\n  if (res.status === 404) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      'Check if you can open it in the browser.',\n    );\n  }\n\n  // create a parser for the HTML response\n  const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n\n  if (!res.body) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `Response body is empty. Check if you can open it in the browser and you see the Remote Component content.`,\n    );\n  }\n\n  const decoder = new TextDecoder();\n  // read the response body as a stream and parse it using the parse5 fragment parser\n  for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n    parser.tokenizer.write(decoder.decode(chunk), false);\n  }\n  const fragment = parser.getFragment();\n\n  const remoteName =\n    options.name || (serverUrl.hash ? serverUrl.hash.substring(1) : undefined);\n\n  const {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared,\n    html,\n  } = visitFragment(fragment, serverUrl, remoteName);\n\n  if (!metadata) {\n    // For microfrontend builds during run time, the host and remote build\n    // may be happening concurrently. In this case, the request will 404.\n    // We want to allow the build to continue with a placeholder remote\n    // component. Once the build completes, vercel will automatically revalidate\n    // ISR and fetch the built remote component.\n    const isSSGBuild = process.env.NEXT_PHASE === 'phase-production-build';\n    // If the remote component is part of a microfrontend, the src provided\n    // will be relative.\n    const isSSRRelativePathBase =\n      serverUrl.host === new URL(ssrRelativePathBaseUrl).host;\n    // Only want this skeleton behaviour in previews to unblock development.\n    // For production, the remote component should already be built.\n    const isPreview = process.env.VERCEL_TARGET_ENV === 'preview';\n\n    if (isSSGBuild && isSSRRelativePathBase && isPreview && options.appRouter) {\n      let skeletonComponent: React.ReactNode | undefined;\n      if (options.rsc) {\n        const { createElement } = await import('react');\n        skeletonComponent = createElement('div', {\n          dangerouslySetInnerHTML: {\n            __html: getSkeletonHtml(serverUrl.href),\n          },\n        });\n      }\n\n      return buildSkeletonResponse(\n        serverUrl,\n        buildMetadata({}, serverUrl),\n        skeletonComponent,\n      );\n    }\n\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `No Remote Component found. Make sure the remote URL is correct and contains a Remote Component.`,\n    );\n  }\n\n  const name = remoteName || metadata.name;\n  const component = options.rsc\n    ? await buildRscComponent(rsc, serverUrl)\n    : undefined;\n\n  return {\n    name,\n    serverUrl,\n    metadata,\n    rsc,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    html,\n    remoteShared,\n  };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/host/server/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { type RSC, visit } from '#internal/host/nextjs/dom-flight';\nimport {\n  getSkeletonHtml,\n  getSkeletonMessage,\n} from '#internal/host/nextjs/skeleton';\nimport { fetchWithHooks } from '#internal/host/server/fetch-with-hooks';\nimport { getClientSrc } from '#internal/host/server/get-client-src';\nimport {\n  DEPLOYMENT_URL,\n  getSSRRelativePathBaseUrl,\n  PRODUCTION_URL,\n} from '#internal/host/server/get-ssr-relative-path-base-url';\nimport type {\n  LinkDescriptor,\n  ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport {\n  buildMetadata,\n  type RawMetadataAttrs,\n  type RemoteComponentMetadata,\n} from '#internal/runtime/metadata';\nimport { importRSCClientEdge } from '#internal/runtime/rsc-imports';\nimport {\n  failedToFetchRemoteComponentError,\n  multipleRemoteComponentsError,\n  RemoteComponentsError,\n} from '#internal/utils/error';\nimport type { FetchRemoteComponentResponse, NextData } from './types';\n\n/**\n * Converts RSC flight data into a React element tree using the edge streaming\n * runtime. The manifest tells React how to resolve module references back to\n * the remote origin.\n */\nasync function buildRscComponent(\n  rsc: RSC | RSC[] | string | null,\n  serverUrl: URL,\n): Promise<React.ReactNode> {\n  const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n  const { createFromReadableStream } = await importRSCClientEdge();\n  return createFromReadableStream(\n    new ReadableStream({\n      type: 'bytes',\n      start(controller) {\n        const encoder = new TextEncoder();\n        controller.enqueue(encoder.encode(componentRSC));\n        controller.close();\n      },\n    }),\n    {\n      serverConsumerManifest: {\n        moduleLoading: {\n          prefix: serverUrl.origin,\n          crossOrigin: true,\n        },\n        moduleMap: {},\n      },\n    },\n  );\n}\n\nfunction buildSkeletonResponse(\n  serverUrl: URL,\n  metadata: RemoteComponentMetadata,\n  skeletonComponent: React.ReactNode | undefined,\n): FetchRemoteComponentResponse {\n  return {\n    name: 'remote-component-skeleton',\n    serverUrl,\n    metadata: {\n      ...metadata,\n      type: 'remote-component',\n    },\n    rsc: getSkeletonMessage(),\n    scripts: [],\n    links: [],\n    hydrationData: [],\n    nextData: undefined,\n    component: skeletonComponent,\n    html: getSkeletonHtml(serverUrl.href),\n    remoteShared: {},\n  };\n}\n\n/**\n * Walks the parsed HTML fragment and extracts all remote component data:\n * metadata, scripts, links, hydration data, Next.js data, shared deps, and HTML.\n */\nfunction visitFragment(\n  fragment: DefaultTreeAdapterMap['documentFragment'],\n  serverUrl: URL,\n  remoteName: string | undefined,\n) {\n  const scriptSrcSet = new Set<string>();\n  const scriptTextSet = new Set<string>();\n  const scripts: ScriptDescriptor[] = [];\n\n  const linkKeySet = new Set<string>();\n  const links: LinkDescriptor[] = [];\n\n  const hydrationData: string[] = [];\n  const htmlChunks = new Set<string>();\n\n  let metadata: RemoteComponentMetadata | undefined;\n  let nextData: NextData | undefined;\n  let remoteShared: Record<string, string> = {};\n  let hasRSC = false;\n  let hasShared = false;\n  let error: RemoteComponentsError | undefined;\n\n  const rawRscChunks: string[] = [];\n\n  const rsc = visit(fragment, {\n    url: serverUrl,\n    name: remoteName,\n    onMetadata(attrs: RawMetadataAttrs) {\n      const incoming = buildMetadata(attrs, serverUrl);\n      // Skip multiple component detection for Pages Router (__next) since\n      // it only supports one remote component per page\n      if (\n        !remoteName &&\n        metadata &&\n        metadata.id !== incoming.id &&\n        incoming.id !== '__next' &&\n        metadata.id !== '__next' &&\n        !nextData\n      ) {\n        throw multipleRemoteComponentsError(serverUrl.href);\n      }\n      metadata = incoming;\n    },\n    onScript(attrs) {\n      const clientSrc = getClientSrc(attrs.src, serverUrl.href);\n      const textContent =\n        typeof attrs.textContent === 'string' ? attrs.textContent : undefined;\n\n      if (textContent) {\n        if (!scriptTextSet.has(textContent)) {\n          scriptTextSet.add(textContent);\n          scripts.push({ src: '', textContent });\n        }\n      } else if (!scriptSrcSet.has(clientSrc)) {\n        scriptSrcSet.add(clientSrc);\n        scripts.push({ src: clientSrc });\n      }\n    },\n    onLink(attrs) {\n      const relativeAttrs = {\n        ...attrs,\n        href: getClientSrc(attrs.href, serverUrl.href),\n      };\n      const linkKey = `${relativeAttrs.href}::${attrs.rel}`;\n      if (!linkKeySet.has(linkKey)) {\n        linkKeySet.add(linkKey);\n        links.push(relativeAttrs);\n      }\n    },\n    onRSC(chunk) {\n      rawRscChunks.push(chunk);\n      hasRSC = true;\n    },\n    onNextData(data) {\n      nextData = data;\n    },\n    onHTML(chunk) {\n      if (!htmlChunks.has(chunk)) {\n        htmlChunks.add(chunk);\n      }\n    },\n    onShared(_shared) {\n      remoteShared = _shared;\n      hasShared = true;\n    },\n    onError(message, stack) {\n      error = new RemoteComponentsError(message);\n      if (stack) {\n        error.stack = stack;\n      }\n    },\n  });\n\n  hydrationData.push(...rawRscChunks);\n\n  if (error) {\n    throw error;\n  }\n\n  if (metadata) {\n    if (!hasRSC && !nextData && metadata.type === 'nextjs') {\n      throw new RemoteComponentsError(\n        `The Remote Component at \"${serverUrl.href}\" seems to be a Next.js component but it does not contain any RSC flight data or Next.js props data. Make sure the remote URL is correct and contains a Remote Component.`,\n      );\n    }\n\n    if (\n      metadata.type === 'nextjs' &&\n      !hasShared &&\n      !nextData?.props.__REMOTE_COMPONENT__?.shared\n    ) {\n      throw new RemoteComponentsError(\n        `No shared dependencies found for Remote Component at \"${serverUrl.href}\". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`,\n      );\n    }\n  }\n\n  const resolvedShared =\n    nextData?.props.__REMOTE_COMPONENT__?.shared ?? remoteShared;\n\n  return {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared: resolvedShared,\n    html: Array.from(htmlChunks).join(''),\n  };\n}\n\ninterface Options {\n  name?: string;\n  rsc?: boolean;\n  /** Whether this is being called from Next.js App Router. Used to enable skeleton fallback during SSG builds. */\n  appRouter?: boolean;\n  onRequest?: OnRequestHook;\n  onResponse?: OnResponseHook;\n}\n\nasync function fetchWithTags(\n  src: string | URL,\n  relativePathBaseUrl: string,\n  options: Options,\n) {\n  const serverUrl = new URL(src, relativePathBaseUrl);\n  const tags = [\n    '_vc_rc:fetch-remote-component',\n    // the max size of a next cache tag is 256 characters\n    serverUrl.host.slice(0, 256),\n    // use the suffix so this tag is unique if multiple remote\n    // components have the same host, but unique pathnames / query params\n    (typeof src === 'string' ? src : src.href).slice(-256),\n  ];\n  if (options.name) {\n    tags.push(options.name.slice(-256));\n  }\n\n  const fetchInit = { next: { tags } };\n\n  const res = await fetchWithHooks(serverUrl, fetchInit, {\n    onRequest: options.onRequest,\n    onResponse: options.onResponse,\n  });\n\n  return {\n    res,\n    serverUrl,\n    // If the remote component is part of a microfrontend, the src provided will be relative.\n    isMfeRelativeSrc: serverUrl.host === new URL(relativePathBaseUrl).host,\n  };\n}\n\nexport async function fetchRemoteComponent(\n  src: string | URL,\n  options: Options = {},\n): Promise<FetchRemoteComponentResponse> {\n  let { res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(\n    src,\n    getSSRRelativePathBaseUrl(),\n    options,\n  );\n\n  const maybeFirstMfeProductionDeployment =\n    isMfeRelativeSrc && serverUrl.host === PRODUCTION_URL;\n\n  // When deploying a microfrontend with remote components to production for the first time, the fetch with the\n  // production URL will fail if the production URL is not already an MFE alias. The URL becomes an MFE alias\n  // on the first MFE deployment. For this fetch, use the deployment URL which is an MFE alias.\n  if (\n    res.status === 404 &&\n    maybeFirstMfeProductionDeployment &&\n    DEPLOYMENT_URL\n  ) {\n    ({ res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(\n      src,\n      `https://${DEPLOYMENT_URL}`,\n      options,\n    ));\n  }\n\n  // If there is an error in the remote, parse and extract the remote error (except 404 and 401).\n  if (!res.ok && !res.body) {\n    throw failedToFetchRemoteComponentError(serverUrl.href, res);\n  }\n\n  if (res.status === 401) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      'If you are using Deployment Protection, ensure the automation bypass environment variable secret in the host matches an automation bypass value in the remote. See https://remote-components-docs.vercel.sh/docs/concepts/cors-external-urls#deployment-protection for details.',\n    );\n  }\n\n  if (res.status === 404) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      maybeFirstMfeProductionDeployment\n        ? `If this is the first production build of a microfrontends setup, try redeploying once the remote is deployed to production. Once deployed, this error will not re-occur, and ISR revalidation will happen automatically for remote components once they deploy. https://remote-components-docs.vercel.sh/docs/concepts/isr-deployment`\n        : `Check if you can open it in the browser.`,\n    );\n  }\n\n  if (!res.body) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `Response body is empty. Check if you can open it in the browser and you see the Remote Component content.`,\n    );\n  }\n\n  const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n  const decoder = new TextDecoder();\n  // read the response body as a stream and parse it using the parse5 fragment parser\n  for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n    parser.tokenizer.write(decoder.decode(chunk), false);\n  }\n  const fragment = parser.getFragment();\n\n  const remoteName =\n    options.name || (serverUrl.hash ? serverUrl.hash.substring(1) : undefined);\n\n  const {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared,\n    html,\n  } = visitFragment(fragment, serverUrl, remoteName);\n\n  if (!metadata) {\n    // For microfrontend builds during run time, the host and remote build\n    // may be happening concurrently. In this case, the request will 404.\n    // We want to allow the build to continue with a placeholder remote\n    // component. Once the build completes, vercel will automatically revalidate\n    // ISR and fetch the built remote component.\n    const isSSGBuild = process.env.NEXT_PHASE === 'phase-production-build';\n    // Only want this skeleton behaviour in previews to unblock development.\n    // For production, the remote component should already be built.\n    const isPreview = process.env.VERCEL_TARGET_ENV === 'preview';\n    // For app router previews, the host and remote build at the same time, to allow this, render a skeleton\n    // in the host if the remote is not found, which will revalidate when the remote deploys, or give a helpful error in the UI\n    if (isSSGBuild && isMfeRelativeSrc && isPreview && options.appRouter) {\n      let skeletonComponent: React.ReactNode | undefined;\n      if (options.rsc) {\n        const { createElement } = await import('react');\n        skeletonComponent = createElement('div', {\n          dangerouslySetInnerHTML: {\n            __html: getSkeletonHtml(serverUrl.href),\n          },\n        });\n      }\n\n      return buildSkeletonResponse(\n        serverUrl,\n        buildMetadata({}, serverUrl),\n        skeletonComponent,\n      );\n    }\n\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `No Remote Component found. Make sure the remote URL is correct and contains a Remote Component.`,\n    );\n  }\n\n  const name = remoteName || metadata.name;\n  const component = options.rsc\n    ? await buildRscComponent(rsc, serverUrl)\n    : undefined;\n\n  return {\n    name,\n    serverUrl,\n    metadata,\n    rsc,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    html,\n    remoteShared,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/internal/host/server/fetch-remote-component.d.ts

@@ -6,13 +6,14 @@ import '../../runtime/metadata.js';
 import '../shared/asset-descriptors.js';
 import '../../runtime/url/resolve-client-url.js';
 
-declare function fetchRemoteComponent(src: string | URL, options?: {
+interface Options {
     name?: string;
     rsc?: boolean;
     /** Whether this is being called from Next.js App Router. Used to enable skeleton fallback during SSG builds. */
     appRouter?: boolean;
     onRequest?: OnRequestHook;
     onResponse?: OnResponseHook;
-}): Promise<FetchRemoteComponentResponse>;
+}
+declare function fetchRemoteComponent(src: string | URL, options?: Options): Promise<FetchRemoteComponentResponse>;
 
 export { fetchRemoteComponent };

package/dist/internal/host/server/fetch-remote-component.js

@@ -6,7 +6,11 @@ import {
 } from "#internal/host/nextjs/skeleton";
 import { fetchWithHooks } from "#internal/host/server/fetch-with-hooks";
 import { getClientSrc } from "#internal/host/server/get-client-src";
-import { getSSRRelativePathBaseUrl } from "#internal/host/server/get-ssr-relative-path-base-url";
+import {
+  DEPLOYMENT_URL,
+  getSSRRelativePathBaseUrl,
+  PRODUCTION_URL
+} from "#internal/host/server/get-ssr-relative-path-base-url";
 import {
   buildMetadata
 } from "#internal/runtime/metadata";
@@ -158,9 +162,8 @@ function visitFragment(fragment, serverUrl, remoteName) {
     html: Array.from(htmlChunks).join("")
   };
 }
-async function fetchRemoteComponent(src, options = {}) {
-  const ssrRelativePathBaseUrl = getSSRRelativePathBaseUrl();
-  const serverUrl = new URL(src, ssrRelativePathBaseUrl);
+async function fetchWithTags(src, relativePathBaseUrl, options) {
+  const serverUrl = new URL(src, relativePathBaseUrl);
   const tags = [
     "_vc_rc:fetch-remote-component",
     // the max size of a next cache tag is 256 characters
@@ -172,15 +175,32 @@ async function fetchRemoteComponent(src, options = {}) {
   if (options.name) {
     tags.push(options.name.slice(-256));
   }
-  const fetchInit = {
-    next: {
-      tags
-    }
-  };
+  const fetchInit = { next: { tags } };
   const res = await fetchWithHooks(serverUrl, fetchInit, {
     onRequest: options.onRequest,
     onResponse: options.onResponse
   });
+  return {
+    res,
+    serverUrl,
+    // If the remote component is part of a microfrontend, the src provided will be relative.
+    isMfeRelativeSrc: serverUrl.host === new URL(relativePathBaseUrl).host
+  };
+}
+async function fetchRemoteComponent(src, options = {}) {
+  let { res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(
+    src,
+    getSSRRelativePathBaseUrl(),
+    options
+  );
+  const maybeFirstMfeProductionDeployment = isMfeRelativeSrc && serverUrl.host === PRODUCTION_URL;
+  if (res.status === 404 && maybeFirstMfeProductionDeployment && DEPLOYMENT_URL) {
+    ({ res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(
+      src,
+      `https://${DEPLOYMENT_URL}`,
+      options
+    ));
+  }
   if (!res.ok && !res.body) {
     throw failedToFetchRemoteComponentError(serverUrl.href, res);
   }
@@ -195,10 +215,9 @@ async function fetchRemoteComponent(src, options = {}) {
     throw failedToFetchRemoteComponentError(
       serverUrl.href,
       res,
-      "Check if you can open it in the browser."
+      maybeFirstMfeProductionDeployment ? `If this is the first production build of a microfrontends setup, try redeploying once the remote is deployed to production. Once deployed, this error will not re-occur, and ISR revalidation will happen automatically for remote components once they deploy. https://remote-components-docs.vercel.sh/docs/concepts/isr-deployment` : `Check if you can open it in the browser.`
     );
   }
-  const parser = Parser.getFragmentParser();
   if (!res.body) {
     throw failedToFetchRemoteComponentError(
       serverUrl.href,
@@ -206,6 +225,7 @@ async function fetchRemoteComponent(src, options = {}) {
       `Response body is empty. Check if you can open it in the browser and you see the Remote Component content.`
     );
   }
+  const parser = Parser.getFragmentParser();
   const decoder = new TextDecoder();
   for await (const chunk of res.body) {
     parser.tokenizer.write(decoder.decode(chunk), false);
@@ -224,9 +244,8 @@ async function fetchRemoteComponent(src, options = {}) {
   } = visitFragment(fragment, serverUrl, remoteName);
   if (!metadata) {
     const isSSGBuild = process.env.NEXT_PHASE === "phase-production-build";
-    const isSSRRelativePathBase = serverUrl.host === new URL(ssrRelativePathBaseUrl).host;
     const isPreview = process.env.VERCEL_TARGET_ENV === "preview";
-    if (isSSGBuild && isSSRRelativePathBase && isPreview && options.appRouter) {
+    if (isSSGBuild && isMfeRelativeSrc && isPreview && options.appRouter) {
       let skeletonComponent;
       if (options.rsc) {
         const { createElement } = await import("react");

package/dist/internal/host/server/fetch-remote-component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/host/server/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { type RSC, visit } from '#internal/host/nextjs/dom-flight';\nimport {\n  getSkeletonHtml,\n  getSkeletonMessage,\n} from '#internal/host/nextjs/skeleton';\nimport { fetchWithHooks } from '#internal/host/server/fetch-with-hooks';\nimport { getClientSrc } from '#internal/host/server/get-client-src';\nimport { getSSRRelativePathBaseUrl } from '#internal/host/server/get-ssr-relative-path-base-url';\nimport type {\n  LinkDescriptor,\n  ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport {\n  buildMetadata,\n  type RawMetadataAttrs,\n  type RemoteComponentMetadata,\n} from '#internal/runtime/metadata';\nimport { importRSCClientEdge } from '#internal/runtime/rsc-imports';\nimport {\n  failedToFetchRemoteComponentError,\n  multipleRemoteComponentsError,\n  RemoteComponentsError,\n} from '#internal/utils/error';\nimport type { FetchRemoteComponentResponse, NextData } from './types';\n\n/**\n * Converts RSC flight data into a React element tree using the edge streaming\n * runtime. The manifest tells React how to resolve module references back to\n * the remote origin.\n */\nasync function buildRscComponent(\n  rsc: RSC | RSC[] | string | null,\n  serverUrl: URL,\n): Promise<React.ReactNode> {\n  const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n  const { createFromReadableStream } = await importRSCClientEdge();\n  return createFromReadableStream(\n    new ReadableStream({\n      type: 'bytes',\n      start(controller) {\n        const encoder = new TextEncoder();\n        controller.enqueue(encoder.encode(componentRSC));\n        controller.close();\n      },\n    }),\n    {\n      serverConsumerManifest: {\n        moduleLoading: {\n          prefix: serverUrl.origin,\n          crossOrigin: true,\n        },\n        moduleMap: {},\n      },\n    },\n  );\n}\n\nfunction buildSkeletonResponse(\n  serverUrl: URL,\n  metadata: RemoteComponentMetadata,\n  skeletonComponent: React.ReactNode | undefined,\n): FetchRemoteComponentResponse {\n  return {\n    name: 'remote-component-skeleton',\n    serverUrl,\n    metadata: {\n      ...metadata,\n      type: 'remote-component',\n    },\n    rsc: getSkeletonMessage(),\n    scripts: [],\n    links: [],\n    hydrationData: [],\n    nextData: undefined,\n    component: skeletonComponent,\n    html: getSkeletonHtml(serverUrl.href),\n    remoteShared: {},\n  };\n}\n\n/**\n * Walks the parsed HTML fragment and extracts all remote component data:\n * metadata, scripts, links, hydration data, Next.js data, shared deps, and HTML.\n */\nfunction visitFragment(\n  fragment: DefaultTreeAdapterMap['documentFragment'],\n  serverUrl: URL,\n  remoteName: string | undefined,\n) {\n  const scriptSrcSet = new Set<string>();\n  const scriptTextSet = new Set<string>();\n  const scripts: ScriptDescriptor[] = [];\n\n  const linkKeySet = new Set<string>();\n  const links: LinkDescriptor[] = [];\n\n  const hydrationData: string[] = [];\n  const htmlChunks = new Set<string>();\n\n  let metadata: RemoteComponentMetadata | undefined;\n  let nextData: NextData | undefined;\n  let remoteShared: Record<string, string> = {};\n  let hasRSC = false;\n  let hasShared = false;\n  let error: RemoteComponentsError | undefined;\n\n  const rawRscChunks: string[] = [];\n\n  const rsc = visit(fragment, {\n    url: serverUrl,\n    name: remoteName,\n    onMetadata(attrs: RawMetadataAttrs) {\n      const incoming = buildMetadata(attrs, serverUrl);\n      // Skip multiple component detection for Pages Router (__next) since\n      // it only supports one remote component per page\n      if (\n        !remoteName &&\n        metadata &&\n        metadata.id !== incoming.id &&\n        incoming.id !== '__next' &&\n        metadata.id !== '__next' &&\n        !nextData\n      ) {\n        throw multipleRemoteComponentsError(serverUrl.href);\n      }\n      metadata = incoming;\n    },\n    onScript(attrs) {\n      const clientSrc = getClientSrc(attrs.src, serverUrl.href);\n      const textContent =\n        typeof attrs.textContent === 'string' ? attrs.textContent : undefined;\n\n      if (textContent) {\n        if (!scriptTextSet.has(textContent)) {\n          scriptTextSet.add(textContent);\n          scripts.push({ src: '', textContent });\n        }\n      } else if (!scriptSrcSet.has(clientSrc)) {\n        scriptSrcSet.add(clientSrc);\n        scripts.push({ src: clientSrc });\n      }\n    },\n    onLink(attrs) {\n      const relativeAttrs = {\n        ...attrs,\n        href: getClientSrc(attrs.href, serverUrl.href),\n      };\n      const linkKey = `${relativeAttrs.href}::${attrs.rel}`;\n      if (!linkKeySet.has(linkKey)) {\n        linkKeySet.add(linkKey);\n        links.push(relativeAttrs);\n      }\n    },\n    onRSC(chunk) {\n      rawRscChunks.push(chunk);\n      hasRSC = true;\n    },\n    onNextData(data) {\n      nextData = data;\n    },\n    onHTML(chunk) {\n      if (!htmlChunks.has(chunk)) {\n        htmlChunks.add(chunk);\n      }\n    },\n    onShared(_shared) {\n      remoteShared = _shared;\n      hasShared = true;\n    },\n    onError(message, stack) {\n      error = new RemoteComponentsError(message);\n      if (stack) {\n        error.stack = stack;\n      }\n    },\n  });\n\n  hydrationData.push(...rawRscChunks);\n\n  if (error) {\n    throw error;\n  }\n\n  if (metadata) {\n    if (!hasRSC && !nextData && metadata.type === 'nextjs') {\n      throw new RemoteComponentsError(\n        `The Remote Component at \"${serverUrl.href}\" seems to be a Next.js component but it does not contain any RSC flight data or Next.js props data. Make sure the remote URL is correct and contains a Remote Component.`,\n      );\n    }\n\n    if (\n      metadata.type === 'nextjs' &&\n      !hasShared &&\n      !nextData?.props.__REMOTE_COMPONENT__?.shared\n    ) {\n      throw new RemoteComponentsError(\n        `No shared dependencies found for Remote Component at \"${serverUrl.href}\". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`,\n      );\n    }\n  }\n\n  const resolvedShared =\n    nextData?.props.__REMOTE_COMPONENT__?.shared ?? remoteShared;\n\n  return {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared: resolvedShared,\n    html: Array.from(htmlChunks).join(''),\n  };\n}\n\nexport async function fetchRemoteComponent(\n  src: string | URL,\n  options: {\n    name?: string;\n    rsc?: boolean;\n    /** Whether this is being called from Next.js App Router. Used to enable skeleton fallback during SSG builds. */\n    appRouter?: boolean;\n    onRequest?: OnRequestHook;\n    onResponse?: OnResponseHook;\n  } = {},\n): Promise<FetchRemoteComponentResponse> {\n  const ssrRelativePathBaseUrl = getSSRRelativePathBaseUrl();\n  const serverUrl = new URL(src, ssrRelativePathBaseUrl);\n\n  const tags = [\n    '_vc_rc:fetch-remote-component',\n    // the max size of a next cache tag is 256 characters\n    serverUrl.host.slice(0, 256),\n    // use the suffix so this tag is unique if multiple remote\n    // components have the same host, but unique pathnames / query params\n    (typeof src === 'string' ? src : src.href).slice(-256),\n  ];\n  if (options.name) {\n    tags.push(options.name.slice(-256));\n  }\n\n  const fetchInit = {\n    next: {\n      tags,\n    },\n  };\n\n  const res = await fetchWithHooks(serverUrl, fetchInit, {\n    onRequest: options.onRequest,\n    onResponse: options.onResponse,\n  });\n\n  // If there is an error in the remote, parse and extract the remote error (except 404 and 401).\n  if (!res.ok && !res.body) {\n    throw failedToFetchRemoteComponentError(serverUrl.href, res);\n  }\n\n  if (res.status === 401) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      'If you are using Deployment Protection, ensure the automation bypass environment variable secret in the host matches an automation bypass value in the remote. See https://remote-components-docs.vercel.sh/docs/concepts/cors-external-urls#deployment-protection for details.',\n    );\n  }\n\n  if (res.status === 404) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      'Check if you can open it in the browser.',\n    );\n  }\n\n  // create a parser for the HTML response\n  const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n\n  if (!res.body) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `Response body is empty. Check if you can open it in the browser and you see the Remote Component content.`,\n    );\n  }\n\n  const decoder = new TextDecoder();\n  // read the response body as a stream and parse it using the parse5 fragment parser\n  for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n    parser.tokenizer.write(decoder.decode(chunk), false);\n  }\n  const fragment = parser.getFragment();\n\n  const remoteName =\n    options.name || (serverUrl.hash ? serverUrl.hash.substring(1) : undefined);\n\n  const {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared,\n    html,\n  } = visitFragment(fragment, serverUrl, remoteName);\n\n  if (!metadata) {\n    // For microfrontend builds during run time, the host and remote build\n    // may be happening concurrently. In this case, the request will 404.\n    // We want to allow the build to continue with a placeholder remote\n    // component. Once the build completes, vercel will automatically revalidate\n    // ISR and fetch the built remote component.\n    const isSSGBuild = process.env.NEXT_PHASE === 'phase-production-build';\n    // If the remote component is part of a microfrontend, the src provided\n    // will be relative.\n    const isSSRRelativePathBase =\n      serverUrl.host === new URL(ssrRelativePathBaseUrl).host;\n    // Only want this skeleton behaviour in previews to unblock development.\n    // For production, the remote component should already be built.\n    const isPreview = process.env.VERCEL_TARGET_ENV === 'preview';\n\n    if (isSSGBuild && isSSRRelativePathBase && isPreview && options.appRouter) {\n      let skeletonComponent: React.ReactNode | undefined;\n      if (options.rsc) {\n        const { createElement } = await import('react');\n        skeletonComponent = createElement('div', {\n          dangerouslySetInnerHTML: {\n            __html: getSkeletonHtml(serverUrl.href),\n          },\n        });\n      }\n\n      return buildSkeletonResponse(\n        serverUrl,\n        buildMetadata({}, serverUrl),\n        skeletonComponent,\n      );\n    }\n\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `No Remote Component found. Make sure the remote URL is correct and contains a Remote Component.`,\n    );\n  }\n\n  const name = remoteName || metadata.name;\n  const component = options.rsc\n    ? await buildRscComponent(rsc, serverUrl)\n    : undefined;\n\n  return {\n    name,\n    serverUrl,\n    metadata,\n    rsc,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    html,\n    remoteShared,\n  };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/host/server/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { type RSC, visit } from '#internal/host/nextjs/dom-flight';\nimport {\n  getSkeletonHtml,\n  getSkeletonMessage,\n} from '#internal/host/nextjs/skeleton';\nimport { fetchWithHooks } from '#internal/host/server/fetch-with-hooks';\nimport { getClientSrc } from '#internal/host/server/get-client-src';\nimport {\n  DEPLOYMENT_URL,\n  getSSRRelativePathBaseUrl,\n  PRODUCTION_URL,\n} from '#internal/host/server/get-ssr-relative-path-base-url';\nimport type {\n  LinkDescriptor,\n  ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport {\n  buildMetadata,\n  type RawMetadataAttrs,\n  type RemoteComponentMetadata,\n} from '#internal/runtime/metadata';\nimport { importRSCClientEdge } from '#internal/runtime/rsc-imports';\nimport {\n  failedToFetchRemoteComponentError,\n  multipleRemoteComponentsError,\n  RemoteComponentsError,\n} from '#internal/utils/error';\nimport type { FetchRemoteComponentResponse, NextData } from './types';\n\n/**\n * Converts RSC flight data into a React element tree using the edge streaming\n * runtime. The manifest tells React how to resolve module references back to\n * the remote origin.\n */\nasync function buildRscComponent(\n  rsc: RSC | RSC[] | string | null,\n  serverUrl: URL,\n): Promise<React.ReactNode> {\n  const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n  const { createFromReadableStream } = await importRSCClientEdge();\n  return createFromReadableStream(\n    new ReadableStream({\n      type: 'bytes',\n      start(controller) {\n        const encoder = new TextEncoder();\n        controller.enqueue(encoder.encode(componentRSC));\n        controller.close();\n      },\n    }),\n    {\n      serverConsumerManifest: {\n        moduleLoading: {\n          prefix: serverUrl.origin,\n          crossOrigin: true,\n        },\n        moduleMap: {},\n      },\n    },\n  );\n}\n\nfunction buildSkeletonResponse(\n  serverUrl: URL,\n  metadata: RemoteComponentMetadata,\n  skeletonComponent: React.ReactNode | undefined,\n): FetchRemoteComponentResponse {\n  return {\n    name: 'remote-component-skeleton',\n    serverUrl,\n    metadata: {\n      ...metadata,\n      type: 'remote-component',\n    },\n    rsc: getSkeletonMessage(),\n    scripts: [],\n    links: [],\n    hydrationData: [],\n    nextData: undefined,\n    component: skeletonComponent,\n    html: getSkeletonHtml(serverUrl.href),\n    remoteShared: {},\n  };\n}\n\n/**\n * Walks the parsed HTML fragment and extracts all remote component data:\n * metadata, scripts, links, hydration data, Next.js data, shared deps, and HTML.\n */\nfunction visitFragment(\n  fragment: DefaultTreeAdapterMap['documentFragment'],\n  serverUrl: URL,\n  remoteName: string | undefined,\n) {\n  const scriptSrcSet = new Set<string>();\n  const scriptTextSet = new Set<string>();\n  const scripts: ScriptDescriptor[] = [];\n\n  const linkKeySet = new Set<string>();\n  const links: LinkDescriptor[] = [];\n\n  const hydrationData: string[] = [];\n  const htmlChunks = new Set<string>();\n\n  let metadata: RemoteComponentMetadata | undefined;\n  let nextData: NextData | undefined;\n  let remoteShared: Record<string, string> = {};\n  let hasRSC = false;\n  let hasShared = false;\n  let error: RemoteComponentsError | undefined;\n\n  const rawRscChunks: string[] = [];\n\n  const rsc = visit(fragment, {\n    url: serverUrl,\n    name: remoteName,\n    onMetadata(attrs: RawMetadataAttrs) {\n      const incoming = buildMetadata(attrs, serverUrl);\n      // Skip multiple component detection for Pages Router (__next) since\n      // it only supports one remote component per page\n      if (\n        !remoteName &&\n        metadata &&\n        metadata.id !== incoming.id &&\n        incoming.id !== '__next' &&\n        metadata.id !== '__next' &&\n        !nextData\n      ) {\n        throw multipleRemoteComponentsError(serverUrl.href);\n      }\n      metadata = incoming;\n    },\n    onScript(attrs) {\n      const clientSrc = getClientSrc(attrs.src, serverUrl.href);\n      const textContent =\n        typeof attrs.textContent === 'string' ? attrs.textContent : undefined;\n\n      if (textContent) {\n        if (!scriptTextSet.has(textContent)) {\n          scriptTextSet.add(textContent);\n          scripts.push({ src: '', textContent });\n        }\n      } else if (!scriptSrcSet.has(clientSrc)) {\n        scriptSrcSet.add(clientSrc);\n        scripts.push({ src: clientSrc });\n      }\n    },\n    onLink(attrs) {\n      const relativeAttrs = {\n        ...attrs,\n        href: getClientSrc(attrs.href, serverUrl.href),\n      };\n      const linkKey = `${relativeAttrs.href}::${attrs.rel}`;\n      if (!linkKeySet.has(linkKey)) {\n        linkKeySet.add(linkKey);\n        links.push(relativeAttrs);\n      }\n    },\n    onRSC(chunk) {\n      rawRscChunks.push(chunk);\n      hasRSC = true;\n    },\n    onNextData(data) {\n      nextData = data;\n    },\n    onHTML(chunk) {\n      if (!htmlChunks.has(chunk)) {\n        htmlChunks.add(chunk);\n      }\n    },\n    onShared(_shared) {\n      remoteShared = _shared;\n      hasShared = true;\n    },\n    onError(message, stack) {\n      error = new RemoteComponentsError(message);\n      if (stack) {\n        error.stack = stack;\n      }\n    },\n  });\n\n  hydrationData.push(...rawRscChunks);\n\n  if (error) {\n    throw error;\n  }\n\n  if (metadata) {\n    if (!hasRSC && !nextData && metadata.type === 'nextjs') {\n      throw new RemoteComponentsError(\n        `The Remote Component at \"${serverUrl.href}\" seems to be a Next.js component but it does not contain any RSC flight data or Next.js props data. Make sure the remote URL is correct and contains a Remote Component.`,\n      );\n    }\n\n    if (\n      metadata.type === 'nextjs' &&\n      !hasShared &&\n      !nextData?.props.__REMOTE_COMPONENT__?.shared\n    ) {\n      throw new RemoteComponentsError(\n        `No shared dependencies found for Remote Component at \"${serverUrl.href}\". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`,\n      );\n    }\n  }\n\n  const resolvedShared =\n    nextData?.props.__REMOTE_COMPONENT__?.shared ?? remoteShared;\n\n  return {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared: resolvedShared,\n    html: Array.from(htmlChunks).join(''),\n  };\n}\n\ninterface Options {\n  name?: string;\n  rsc?: boolean;\n  /** Whether this is being called from Next.js App Router. Used to enable skeleton fallback during SSG builds. */\n  appRouter?: boolean;\n  onRequest?: OnRequestHook;\n  onResponse?: OnResponseHook;\n}\n\nasync function fetchWithTags(\n  src: string | URL,\n  relativePathBaseUrl: string,\n  options: Options,\n) {\n  const serverUrl = new URL(src, relativePathBaseUrl);\n  const tags = [\n    '_vc_rc:fetch-remote-component',\n    // the max size of a next cache tag is 256 characters\n    serverUrl.host.slice(0, 256),\n    // use the suffix so this tag is unique if multiple remote\n    // components have the same host, but unique pathnames / query params\n    (typeof src === 'string' ? src : src.href).slice(-256),\n  ];\n  if (options.name) {\n    tags.push(options.name.slice(-256));\n  }\n\n  const fetchInit = { next: { tags } };\n\n  const res = await fetchWithHooks(serverUrl, fetchInit, {\n    onRequest: options.onRequest,\n    onResponse: options.onResponse,\n  });\n\n  return {\n    res,\n    serverUrl,\n    // If the remote component is part of a microfrontend, the src provided will be relative.\n    isMfeRelativeSrc: serverUrl.host === new URL(relativePathBaseUrl).host,\n  };\n}\n\nexport async function fetchRemoteComponent(\n  src: string | URL,\n  options: Options = {},\n): Promise<FetchRemoteComponentResponse> {\n  let { res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(\n    src,\n    getSSRRelativePathBaseUrl(),\n    options,\n  );\n\n  const maybeFirstMfeProductionDeployment =\n    isMfeRelativeSrc && serverUrl.host === PRODUCTION_URL;\n\n  // When deploying a microfrontend with remote components to production for the first time, the fetch with the\n  // production URL will fail if the production URL is not already an MFE alias. The URL becomes an MFE alias\n  // on the first MFE deployment. For this fetch, use the deployment URL which is an MFE alias.\n  if (\n    res.status === 404 &&\n    maybeFirstMfeProductionDeployment &&\n    DEPLOYMENT_URL\n  ) {\n    ({ res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(\n      src,\n      `https://${DEPLOYMENT_URL}`,\n      options,\n    ));\n  }\n\n  // If there is an error in the remote, parse and extract the remote error (except 404 and 401).\n  if (!res.ok && !res.body) {\n    throw failedToFetchRemoteComponentError(serverUrl.href, res);\n  }\n\n  if (res.status === 401) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      'If you are using Deployment Protection, ensure the automation bypass environment variable secret in the host matches an automation bypass value in the remote. See https://remote-components-docs.vercel.sh/docs/concepts/cors-external-urls#deployment-protection for details.',\n    );\n  }\n\n  if (res.status === 404) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      maybeFirstMfeProductionDeployment\n        ? `If this is the first production build of a microfrontends setup, try redeploying once the remote is deployed to production. Once deployed, this error will not re-occur, and ISR revalidation will happen automatically for remote components once they deploy. https://remote-components-docs.vercel.sh/docs/concepts/isr-deployment`\n        : `Check if you can open it in the browser.`,\n    );\n  }\n\n  if (!res.body) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `Response body is empty. Check if you can open it in the browser and you see the Remote Component content.`,\n    );\n  }\n\n  const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n  const decoder = new TextDecoder();\n  // read the response body as a stream and parse it using the parse5 fragment parser\n  for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n    parser.tokenizer.write(decoder.decode(chunk), false);\n  }\n  const fragment = parser.getFragment();\n\n  const remoteName =\n    options.name || (serverUrl.hash ? serverUrl.hash.substring(1) : undefined);\n\n  const {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared,\n    html,\n  } = visitFragment(fragment, serverUrl, remoteName);\n\n  if (!metadata) {\n    // For microfrontend builds during run time, the host and remote build\n    // may be happening concurrently. In this case, the request will 404.\n    // We want to allow the build to continue with a placeholder remote\n    // component. Once the build completes, vercel will automatically revalidate\n    // ISR and fetch the built remote component.\n    const isSSGBuild = process.env.NEXT_PHASE === 'phase-production-build';\n    // Only want this skeleton behaviour in previews to unblock development.\n    // For production, the remote component should already be built.\n    const isPreview = process.env.VERCEL_TARGET_ENV === 'preview';\n    // For app router previews, the host and remote build at the same time, to allow this, render a skeleton\n    // in the host if the remote is not found, which will revalidate when the remote deploys, or give a helpful error in the UI\n    if (isSSGBuild && isMfeRelativeSrc && isPreview && options.appRouter) {\n      let skeletonComponent: React.ReactNode | undefined;\n      if (options.rsc) {\n        const { createElement } = await import('react');\n        skeletonComponent = createElement('div', {\n          dangerouslySetInnerHTML: {\n            __html: getSkeletonHtml(serverUrl.href),\n          },\n        });\n      }\n\n      return buildSkeletonResponse(\n        serverUrl,\n        buildMetadata({}, serverUrl),\n        skeletonComponent,\n      );\n    }\n\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `No Remote Component found. Make sure the remote URL is correct and contains a Remote Component.`,\n    );\n  }\n\n  const name = remoteName || metadata.name;\n  const component = options.rsc\n    ? await buildRscComponent(rsc, serverUrl)\n    : undefined;\n\n  return {\n    name,\n    serverUrl,\n    metadata,\n    rsc,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    html,\n    remoteShared,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/internal/host/server/get-ssr-relative-path-base-url.cjs

@@ -18,23 +18,30 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var get_ssr_relative_path_base_url_exports = {};
 __export(get_ssr_relative_path_base_url_exports, {
+  DEPLOYMENT_URL: () => DEPLOYMENT_URL,
+  PRODUCTION_URL: () => PRODUCTION_URL,
   getSSRRelativePathBaseUrl: () => getSSRRelativePathBaseUrl
 });
 module.exports = __toCommonJS(get_ssr_relative_path_base_url_exports);
+const PRODUCTION_URL = process.env.VERCEL_PROJECT_PRODUCTION_URL;
+const BRANCH_URL = process.env.VERCEL_BRANCH_URL;
+const DEPLOYMENT_URL = process.env.VERCEL_URL;
 function getSSRRelativePathBaseUrl() {
-  if (process.env.VERCEL_TARGET_ENV === "production" && process.env.VERCEL_PROJECT_PRODUCTION_URL) {
-    return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`;
+  if (process.env.VERCEL_TARGET_ENV === "production" && PRODUCTION_URL) {
+    return `https://${PRODUCTION_URL}`;
   }
-  if (process.env.VERCEL_BRANCH_URL) {
-    return `https://${process.env.VERCEL_BRANCH_URL}`;
+  if (BRANCH_URL) {
+    return `https://${BRANCH_URL}`;
   }
-  if (process.env.VERCEL_URL) {
-    return `https://${process.env.VERCEL_URL}`;
+  if (DEPLOYMENT_URL) {
+    return `https://${DEPLOYMENT_URL}`;
   }
   return `http://localhost:${process.env.MFE_LOCAL_PROXY_PORT || 3024}`;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  DEPLOYMENT_URL,
+  PRODUCTION_URL,
   getSSRRelativePathBaseUrl
 });
 //# sourceMappingURL=get-ssr-relative-path-base-url.cjs.map

package/dist/internal/host/server/get-ssr-relative-path-base-url.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/host/server/get-ssr-relative-path-base-url.ts"],"sourcesContent":["/**\n * When fetching a remote component using a relative path with SSR, a base URL is required.\n * This is not used on the client.\n *\n * For microfrontends setups, the remote component may be accessed on the same host as the host app.\n * In this case, prefix relative paths with the deployment URL.\n *\n * Can add support in the future with a custom env var for prop for when not building with Vercel\n * and Vercel URL is not available.\n */\nexport function getSSRRelativePathBaseUrl(): string {\n  // Uses the most up to date version of production. Note that the production branch URL does not account\n  // for deployments from non main branches being manually promoted to production.\n  // This ensures ISR fetches the latest version of the production for microfrontends on revalidate.\n  if (\n    process.env.VERCEL_TARGET_ENV === 'production' &&\n    process.env.VERCEL_PROJECT_PRODUCTION_URL\n  ) {\n    return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`;\n  }\n\n  // Uses the most up to date version of the remote component for the branch.\n  // This ensures ISR fetches the latest version of the branch for microfrontends on revalidate.\n  if (process.env.VERCEL_BRANCH_URL) {\n    return `https://${process.env.VERCEL_BRANCH_URL}`;\n  }\n\n  // If there is no branch, use the vercel deployment URL.\n  if (process.env.VERCEL_URL) {\n    return `https://${process.env.VERCEL_URL}`;\n  }\n\n  // TODO: Resolve the correct URL in local development when the proxy is not running.\n  return `http://localhost:${process.env.MFE_LOCAL_PROXY_PORT || 3024}`;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUO,SAAS,4BAAoC;AAIlD,MACE,QAAQ,IAAI,sBAAsB,gBAClC,QAAQ,IAAI,+BACZ;AACA,WAAO,WAAW,QAAQ,IAAI;AAAA,EAChC;AAIA,MAAI,QAAQ,IAAI,mBAAmB;AACjC,WAAO,WAAW,QAAQ,IAAI;AAAA,EAChC;AAGA,MAAI,QAAQ,IAAI,YAAY;AAC1B,WAAO,WAAW,QAAQ,IAAI;AAAA,EAChC;AAGA,SAAO,oBAAoB,QAAQ,IAAI,wBAAwB;AACjE;","names":[]}
+{"version":3,"sources":["../../../../src/host/server/get-ssr-relative-path-base-url.ts"],"sourcesContent":["export const PRODUCTION_URL = process.env.VERCEL_PROJECT_PRODUCTION_URL;\nconst BRANCH_URL = process.env.VERCEL_BRANCH_URL;\nexport const DEPLOYMENT_URL = process.env.VERCEL_URL;\n\n/**\n * When fetching a remote component using a relative path with SSR, a base URL is required.\n * This is not used on the client.\n *\n * For microfrontends setups, the remote component may be accessed on the same host as the host app.\n * In this case, prefix relative paths with the deployment URL.\n *\n * Can add support in the future with a custom env var for prop for when not building with Vercel\n * and Vercel URL is not available.\n */\nexport function getSSRRelativePathBaseUrl(): string {\n  // Uses the most up to date version of production. Note that the production branch URL does not account\n  // for deployments from non main branches being manually promoted to production.\n  // This ensures ISR fetches the latest version of the production for microfrontends on revalidate.\n  if (process.env.VERCEL_TARGET_ENV === 'production' && PRODUCTION_URL) {\n    return `https://${PRODUCTION_URL}`;\n  }\n\n  // Uses the most up to date version of the remote component for the branch.\n  // This ensures ISR fetches the latest version of the branch for microfrontends on revalidate.\n  if (BRANCH_URL) {\n    return `https://${BRANCH_URL}`;\n  }\n\n  // If there is no branch, use the vercel deployment URL.\n  if (DEPLOYMENT_URL) {\n    return `https://${DEPLOYMENT_URL}`;\n  }\n\n  // TODO: Resolve the correct URL in local development when the proxy is not running.\n  return `http://localhost:${process.env.MFE_LOCAL_PROXY_PORT || 3024}`;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,MAAM,iBAAiB,QAAQ,IAAI;AAC1C,MAAM,aAAa,QAAQ,IAAI;AACxB,MAAM,iBAAiB,QAAQ,IAAI;AAYnC,SAAS,4BAAoC;AAIlD,MAAI,QAAQ,IAAI,sBAAsB,gBAAgB,gBAAgB;AACpE,WAAO,WAAW;AAAA,EACpB;AAIA,MAAI,YAAY;AACd,WAAO,WAAW;AAAA,EACpB;AAGA,MAAI,gBAAgB;AAClB,WAAO,WAAW;AAAA,EACpB;AAGA,SAAO,oBAAoB,QAAQ,IAAI,wBAAwB;AACjE;","names":[]}

package/dist/internal/host/server/get-ssr-relative-path-base-url.d.ts

@@ -1,3 +1,5 @@
+declare const PRODUCTION_URL: string | undefined;
+declare const DEPLOYMENT_URL: string | undefined;
 /**
  * When fetching a remote component using a relative path with SSR, a base URL is required.
  * This is not used on the client.
@@ -10,4 +12,4 @@
  */
 declare function getSSRRelativePathBaseUrl(): string;
 
-export { getSSRRelativePathBaseUrl };
+export { DEPLOYMENT_URL, PRODUCTION_URL, getSSRRelativePathBaseUrl };

package/dist/internal/host/server/get-ssr-relative-path-base-url.js

@@ -1,16 +1,21 @@
+const PRODUCTION_URL = process.env.VERCEL_PROJECT_PRODUCTION_URL;
+const BRANCH_URL = process.env.VERCEL_BRANCH_URL;
+const DEPLOYMENT_URL = process.env.VERCEL_URL;
 function getSSRRelativePathBaseUrl() {
-  if (process.env.VERCEL_TARGET_ENV === "production" && process.env.VERCEL_PROJECT_PRODUCTION_URL) {
-    return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`;
+  if (process.env.VERCEL_TARGET_ENV === "production" && PRODUCTION_URL) {
+    return `https://${PRODUCTION_URL}`;
   }
-  if (process.env.VERCEL_BRANCH_URL) {
-    return `https://${process.env.VERCEL_BRANCH_URL}`;
+  if (BRANCH_URL) {
+    return `https://${BRANCH_URL}`;
   }
-  if (process.env.VERCEL_URL) {
-    return `https://${process.env.VERCEL_URL}`;
+  if (DEPLOYMENT_URL) {
+    return `https://${DEPLOYMENT_URL}`;
   }
   return `http://localhost:${process.env.MFE_LOCAL_PROXY_PORT || 3024}`;
 }
 export {
+  DEPLOYMENT_URL,
+  PRODUCTION_URL,
   getSSRRelativePathBaseUrl
 };
 //# sourceMappingURL=get-ssr-relative-path-base-url.js.map

package/dist/internal/host/server/get-ssr-relative-path-base-url.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/host/server/get-ssr-relative-path-base-url.ts"],"sourcesContent":["/**\n * When fetching a remote component using a relative path with SSR, a base URL is required.\n * This is not used on the client.\n *\n * For microfrontends setups, the remote component may be accessed on the same host as the host app.\n * In this case, prefix relative paths with the deployment URL.\n *\n * Can add support in the future with a custom env var for prop for when not building with Vercel\n * and Vercel URL is not available.\n */\nexport function getSSRRelativePathBaseUrl(): string {\n  // Uses the most up to date version of production. Note that the production branch URL does not account\n  // for deployments from non main branches being manually promoted to production.\n  // This ensures ISR fetches the latest version of the production for microfrontends on revalidate.\n  if (\n    process.env.VERCEL_TARGET_ENV === 'production' &&\n    process.env.VERCEL_PROJECT_PRODUCTION_URL\n  ) {\n    return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`;\n  }\n\n  // Uses the most up to date version of the remote component for the branch.\n  // This ensures ISR fetches the latest version of the branch for microfrontends on revalidate.\n  if (process.env.VERCEL_BRANCH_URL) {\n    return `https://${process.env.VERCEL_BRANCH_URL}`;\n  }\n\n  // If there is no branch, use the vercel deployment URL.\n  if (process.env.VERCEL_URL) {\n    return `https://${process.env.VERCEL_URL}`;\n  }\n\n  // TODO: Resolve the correct URL in local development when the proxy is not running.\n  return `http://localhost:${process.env.MFE_LOCAL_PROXY_PORT || 3024}`;\n}\n"],"mappings":"AAUO,SAAS,4BAAoC;AAIlD,MACE,QAAQ,IAAI,sBAAsB,gBAClC,QAAQ,IAAI,+BACZ;AACA,WAAO,WAAW,QAAQ,IAAI;AAAA,EAChC;AAIA,MAAI,QAAQ,IAAI,mBAAmB;AACjC,WAAO,WAAW,QAAQ,IAAI;AAAA,EAChC;AAGA,MAAI,QAAQ,IAAI,YAAY;AAC1B,WAAO,WAAW,QAAQ,IAAI;AAAA,EAChC;AAGA,SAAO,oBAAoB,QAAQ,IAAI,wBAAwB;AACjE;","names":[]}
+{"version":3,"sources":["../../../../src/host/server/get-ssr-relative-path-base-url.ts"],"sourcesContent":["export const PRODUCTION_URL = process.env.VERCEL_PROJECT_PRODUCTION_URL;\nconst BRANCH_URL = process.env.VERCEL_BRANCH_URL;\nexport const DEPLOYMENT_URL = process.env.VERCEL_URL;\n\n/**\n * When fetching a remote component using a relative path with SSR, a base URL is required.\n * This is not used on the client.\n *\n * For microfrontends setups, the remote component may be accessed on the same host as the host app.\n * In this case, prefix relative paths with the deployment URL.\n *\n * Can add support in the future with a custom env var for prop for when not building with Vercel\n * and Vercel URL is not available.\n */\nexport function getSSRRelativePathBaseUrl(): string {\n  // Uses the most up to date version of production. Note that the production branch URL does not account\n  // for deployments from non main branches being manually promoted to production.\n  // This ensures ISR fetches the latest version of the production for microfrontends on revalidate.\n  if (process.env.VERCEL_TARGET_ENV === 'production' && PRODUCTION_URL) {\n    return `https://${PRODUCTION_URL}`;\n  }\n\n  // Uses the most up to date version of the remote component for the branch.\n  // This ensures ISR fetches the latest version of the branch for microfrontends on revalidate.\n  if (BRANCH_URL) {\n    return `https://${BRANCH_URL}`;\n  }\n\n  // If there is no branch, use the vercel deployment URL.\n  if (DEPLOYMENT_URL) {\n    return `https://${DEPLOYMENT_URL}`;\n  }\n\n  // TODO: Resolve the correct URL in local development when the proxy is not running.\n  return `http://localhost:${process.env.MFE_LOCAL_PROXY_PORT || 3024}`;\n}\n"],"mappings":"AAAO,MAAM,iBAAiB,QAAQ,IAAI;AAC1C,MAAM,aAAa,QAAQ,IAAI;AACxB,MAAM,iBAAiB,QAAQ,IAAI;AAYnC,SAAS,4BAAoC;AAIlD,MAAI,QAAQ,IAAI,sBAAsB,gBAAgB,gBAAgB;AACpE,WAAO,WAAW;AAAA,EACpB;AAIA,MAAI,YAAY;AACd,WAAO,WAAW;AAAA,EACpB;AAGA,MAAI,gBAAgB;AAClB,WAAO,WAAW;AAAA,EACpB;AAGA,SAAO,oBAAoB,QAAQ,IAAI,wBAAwB;AACjE;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remote-components",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "private": false,
   "description": "Compose remote components at runtime between microfrontends applications.",
   "keywords": [