remote-components 0.3.1 → 0.3.3

package/dist/remote/html.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/constants.ts","../../src/runtime/url/protected-rc-fallback.ts","../../src/utils/abort.ts","../../src/utils/error.ts","../../src/utils/logger.ts","../../src/runtime/loaders/static-loader.ts","../../src/remote/html/index.tsx"],"sourcesContent":["export const RC_PROTECTED_REMOTE_FETCH_PATHNAME = '/rc-fetch-protected-remote';\n\nexport const MISSING_SHARED_MODULES_MESSAGE =\n  'Remote Components shared modules not found. Did you forget to wrap your config with `withRemoteComponentsConfig` on both host and remote?';\n\nexport const CORS_DOCS_URL =\n  'https://vercel.com/docs/remote-components/concepts/cors-external-urls#accessing-cross-site-protected-remote-components';\n","import { RC_PROTECTED_REMOTE_FETCH_PATHNAME } from '#internal/utils/constants';\n\n/**\n * Generates a fallback URL that proxies the request through the host's protected remote fetch endpoint\n */\nexport function generateProtectedRcFallbackSrc(url: string): string {\n  return `${RC_PROTECTED_REMOTE_FETCH_PATHNAME}?url=${encodeURIComponent(url)}`;\n}\n\nexport function isProxiedUrl(url: string): boolean {\n  try {\n    return (\n      new URL(url, location.href).pathname ===\n      RC_PROTECTED_REMOTE_FETCH_PATHNAME\n    );\n  } catch {\n    return false;\n  }\n}\n","/**\n * Type guard to check if an error is an AbortError.\n * Handles cross-environment differences (Node.js, browsers, JSDOM).\n */\nexport function isAbortError(error: unknown): error is DOMException {\n  if (error instanceof DOMException && error.name === 'AbortError') {\n    return true;\n  }\n\n  // Handle Node.js native AbortError which may not be instanceof global DOMException\n  if (\n    error !== null &&\n    typeof error === 'object' &&\n    'name' in error &&\n    error.name === 'AbortError' &&\n    'message' in error &&\n    typeof (error as { message: unknown }).message === 'string'\n  ) {\n    // Additional check: verify it has DOMException-like structure\n    const e = error as { code?: unknown; constructor?: { name?: string } };\n    return typeof e.code === 'number' || e.constructor?.name === 'DOMException';\n  }\n\n  return false;\n}\n","import { isProxiedUrl } from '#internal/runtime/url/protected-rc-fallback';\nimport { isAbortError } from '#internal/utils/abort';\nimport {\n  CORS_DOCS_URL,\n  RC_PROTECTED_REMOTE_FETCH_PATHNAME,\n} from '#internal/utils/constants';\n\nexport class RemoteComponentsError extends Error {\n  code = 'REMOTE_COMPONENTS_ERROR';\n\n  constructor(message: string, options?: { cause?: unknown }) {\n    super(message, options);\n    this.name = 'RemoteComponentsError';\n  }\n}\n\nexport function multipleRemoteComponentsError(url: string | undefined) {\n  return new RemoteComponentsError(\n    `Multiple Remote Components found at \"${url}\". When a page exposes multiple Remote Components you must specify the \"name\" prop to select which one to load.`,\n  );\n}\n\nexport function failedToFetchRemoteComponentError(\n  url: string,\n  { status, statusText }: { status: number; statusText: string },\n  help: string = 'Is the URL correct and accessible?',\n) {\n  return new RemoteComponentsError(\n    `Failed to fetch Remote Component from \"${url}\". ${help}`,\n    { cause: new Error(`${status} ${statusText}`) },\n  );\n}\n\nexport async function errorFromFailedFetch(\n  originalUrl: string,\n  resolvedUrl: URL,\n  res: Response | null | undefined,\n): Promise<RemoteComponentsError> {\n  const isProxied = isProxiedUrl(resolvedUrl.href);\n\n  if (isProxied && res) {\n    const body = await res.text().catch(() => '');\n    return failedProxyFetchError(\n      originalUrl,\n      resolvedUrl.href,\n      res.status,\n      body,\n    );\n  }\n\n  const fallback = failedToFetchRemoteComponentError(\n    originalUrl,\n    res ?? { status: 0, statusText: 'No Response' },\n  );\n\n  if (!res) return fallback;\n\n  try {\n    const body = await res.text();\n    const parser = new DOMParser();\n    const doc = parser.parseFromString(body, 'text/html');\n    const errorTemplate = doc.querySelector(\n      'template[data-next-error-message]',\n    );\n    const errorMessage = errorTemplate?.getAttribute('data-next-error-message');\n    if (errorMessage) {\n      const error = new RemoteComponentsError(errorMessage);\n      const errorStack = errorTemplate?.getAttribute('data-next-error-stack');\n      if (errorStack) {\n        error.stack = errorStack;\n      }\n      return error;\n    }\n  } catch (parseError) {\n    // Re-throw abort errors, ignore parse errors\n    if (isAbortError(parseError)) throw parseError;\n  }\n\n  return fallback;\n}\n\nexport function failedProxiedAssetError(\n  kind: 'chunk' | 'script',\n  url: string,\n  resolvedUrl: string,\n): RemoteComponentsError {\n  return new RemoteComponentsError(\n    `Failed to load ${kind} \"${url}\" via proxy \"${resolvedUrl}\". ` +\n      `Ensure withRemoteComponentsHostProxy middleware is configured, \"${RC_PROTECTED_REMOTE_FETCH_PATHNAME}\" is in the matcher, ` +\n      `and the remote URL is included in allowedProxyUrls. ` +\n      `See: ${CORS_DOCS_URL}`,\n  );\n}\n\nexport function failedProxyFetchError(\n  originalUrl: string,\n  proxyUrl: string,\n  status: number,\n  responseBody?: string,\n): RemoteComponentsError {\n  if (status === 404) {\n    return new RemoteComponentsError(\n      `Could not proxy the request to \"${originalUrl}\" — the proxy endpoint \"${RC_PROTECTED_REMOTE_FETCH_PATHNAME}\" returned 404.\\n\\n` +\n        `The host server needs middleware or a route that handles \"${RC_PROTECTED_REMOTE_FETCH_PATHNAME}\".\\n\\n` +\n        `Proxying requires two pieces:\\n` +\n        `  1. resolveClientUrl={routeThroughHostProxy} on <RemoteComponent>\\n` +\n        `  2. Middleware or a route for \"${RC_PROTECTED_REMOTE_FETCH_PATHNAME}\" on the host server\\n\\n` +\n        `Docs: ${CORS_DOCS_URL}`,\n    );\n  }\n  if (status === 403) {\n    const detail = responseBody ? ` ${responseBody}` : '';\n    return new RemoteComponentsError(\n      `Proxied request to \"${proxyUrl}\" was forbidden.${detail} ` +\n        `See: ${CORS_DOCS_URL}`,\n    );\n  }\n  return new RemoteComponentsError(\n    `Proxied request for \"${originalUrl}\" via \"${proxyUrl}\" failed with status ${status}. ` +\n      `See: ${CORS_DOCS_URL}`,\n  );\n}\n","import { CORS_DOCS_URL } from '#internal/utils/constants';\nimport { RemoteComponentsError } from '#internal/utils/error';\n\ntype LogLocation =\n  | 'ChunkLoader'\n  | 'ComponentLoader'\n  | 'SharedModules'\n  | 'WebpackRuntime'\n  | 'TurbopackModule'\n  | 'StaticLoader'\n  | 'ScriptLoader'\n  | 'Polyfill'\n  | 'HtmlRemote'\n  | 'HtmlHost'\n  | 'Config'\n  | 'NextAppRouter'\n  | 'NextAppRouterCompat'\n  | 'FetchRemoteComponent';\n\nconst PREFIX = 'remote-components';\nconst DEBUG =\n  typeof window !== 'undefined' && localStorage.getItem('RC_DEBUG') === 'true';\n\nexport function logDebug(location: LogLocation, message: string) {\n  if (DEBUG) {\n    // eslint-disable-next-line no-console\n    console.debug(`[${PREFIX}:${location}]: ${message}`);\n  }\n}\n\nexport function logInfo(location: LogLocation, message: string) {\n  // eslint-disable-next-line no-console\n  console.info(`[${PREFIX}:${location}]: ${message}`);\n}\n\nexport function logWarn(location: LogLocation, message: string) {\n  // eslint-disable-next-line no-console\n  console.warn(`[${PREFIX}:${location}]: ${message}`);\n}\n\nexport function logError(\n  location: LogLocation,\n  message: string,\n  cause?: unknown,\n) {\n  // eslint-disable-next-line no-console\n  console.error(\n    new RemoteComponentsError(`[${PREFIX}:${location}]: ${message}`, {\n      cause,\n    }),\n  );\n}\n\n/**\n * Logs a warning when a cross-origin asset request fails, guiding users\n * to configure the proxy middleware and resolveClientUrl on their host.\n */\nexport function warnCrossOriginFetchError(\n  logLocation: LogLocation,\n  url: string | URL,\n): void {\n  try {\n    const parsed = typeof url === 'string' ? new URL(url) : url;\n    if (typeof location === 'undefined' || parsed.origin === location.origin) {\n      return;\n    }\n    logWarn(\n      logLocation,\n      `Failed to fetch cross-origin resource \"${parsed.href}\". ` +\n        'To load assets from a protected deployment, two steps are required: ' +\n        '(1) configure withRemoteComponentsHostProxy middleware in your host with the remote URL in allowedProxyUrls, ' +\n        'and (2) provide a resolveClientUrl prop that rewrites cross-origin asset URLs to go through the proxy. ' +\n        `See: ${CORS_DOCS_URL}`,\n    );\n  } catch {\n    // URL parsing failed — skip the warning\n  }\n}\n","import type { InternalResolveClientUrl } from '#internal/host/server/types';\nimport type {\n  MountOrUnmountFunction,\n  MountUnmountFunctions,\n} from '#internal/runtime/types';\nimport { logError, warnCrossOriginFetchError } from '#internal/utils/logger';\n\ntype ScriptMod = {\n  mount?: MountOrUnmountFunction;\n  unmount?: MountOrUnmountFunction;\n  default?: {\n    mount?: MountOrUnmountFunction;\n    unmount?: MountOrUnmountFunction;\n  };\n};\n\n/**\n * Fetches an ES module via the resolveClientUrl callback, rewrites its\n * relative imports to also go through the callback, then loads it by injecting a\n * wrapper <script type=\"module\"> tag. The module's namespace is captured via\n * a temporary global and returned.\n *\n * This is needed when a direct import() of a cross-origin module fails due to\n * CORS restrictions or Vercel preview-deployment auth. A simple URL rewrite\n * doesn't work for import() because relative imports inside the module would\n * resolve against the rewritten URL instead of the original remote origin.\n */\nasync function importViaCallback<T>(\n  absoluteSrc: string,\n  resolveClientUrl: InternalResolveClientUrl,\n): Promise<T> {\n  const resolvedUrl = resolveClientUrl(absoluteSrc) ?? absoluteSrc;\n  const fetchUrl = new URL(resolvedUrl, location.href).href;\n  const response = await fetch(fetchUrl);\n  if (!response.ok) throw new Error(`Proxied fetch failed: ${response.status}`);\n\n  // Restore import.meta.url to the original module URL so any code that\n  // relies on it (e.g. for asset resolution) gets the right value.\n  // Rewrite relative imports to absolute URLs resolved through the callback so\n  // that transitive dependencies also bypass CORS/auth.\n  const content = (await response.text())\n    .replace(/import\\.meta\\.url/g, JSON.stringify(absoluteSrc))\n    .replace(\n      /\\b(from|import)\\s*([\"'])(\\.\\.?\\/[^\"']+)\\2/g,\n      (_, keyword, quote, relativePath) => {\n        const absoluteImportUrl = new URL(relativePath, absoluteSrc).href;\n        const resolvedImportUrl = new URL(\n          resolveClientUrl(absoluteImportUrl) ?? absoluteImportUrl,\n          location.href,\n        ).href;\n        return `${keyword} ${quote}${resolvedImportUrl}${quote}`;\n      },\n    );\n  const moduleBlobUrl = URL.createObjectURL(\n    new Blob([content], { type: 'text/javascript' }),\n  );\n  const wrapperContent = [\n    `import*as m from${JSON.stringify(moduleBlobUrl)};`,\n    `globalThis.__rc_module_registry__=globalThis.__rc_module_registry__||{};`,\n    `globalThis.__rc_module_registry__[${JSON.stringify(absoluteSrc)}]=m;`,\n  ].join('');\n  const wrapperBlobUrl = URL.createObjectURL(\n    new Blob([wrapperContent], { type: 'text/javascript' }),\n  );\n  const scriptEl = document.createElement('script');\n  scriptEl.type = 'module';\n  scriptEl.src = wrapperBlobUrl;\n  try {\n    await new Promise<void>((resolve, reject) => {\n      scriptEl.onload = () => resolve();\n      scriptEl.onerror = () =>\n        reject(new Error(`Failed to load module for ${absoluteSrc}`));\n      document.head.appendChild(scriptEl);\n    });\n  } finally {\n    scriptEl.remove();\n    URL.revokeObjectURL(moduleBlobUrl);\n    URL.revokeObjectURL(wrapperBlobUrl);\n  }\n  const registry = (\n    globalThis as unknown as { __rc_module_registry__?: Record<string, T> }\n  ).__rc_module_registry__;\n  const mod = registry?.[absoluteSrc] ?? ({} as T);\n  if (registry) delete registry[absoluteSrc];\n  return mod;\n}\n\nasync function importDirectly<T>(absoluteSrc: string): Promise<T> {\n  try {\n    return (await import(\n      /* @vite-ignore */\n      /* webpackIgnore: true */ absoluteSrc\n    )) as T;\n  } catch (importError) {\n    if (!absoluteSrc.startsWith('blob:')) {\n      warnCrossOriginFetchError('StaticLoader', absoluteSrc);\n    }\n    throw importError;\n  }\n}\n\nfunction resolveScriptSrc(script: HTMLScriptElement, url: URL): string {\n  const rawSrc =\n    typeof script.getAttribute === 'function'\n      ? (script.getAttribute('src') ?? script.src)\n      : script.src;\n  if (!rawSrc && script.textContent) {\n    return URL.createObjectURL(\n      new Blob(\n        [script.textContent.replace(/import\\.meta\\.url/g, JSON.stringify(url))],\n        { type: 'text/javascript' },\n      ),\n    );\n  }\n  return rawSrc;\n}\n\nexport async function loadStaticRemoteComponent(\n  scripts: HTMLScriptElement[],\n  url: URL,\n  resolveClientUrl?: InternalResolveClientUrl,\n) {\n  const self = globalThis as typeof globalThis & MountUnmountFunctions;\n  if (self.__remote_script_entrypoint_mount__?.[url.href]) {\n    self.__remote_script_entrypoint_mount__[url.href] = new Set();\n  }\n  if (self.__remote_script_entrypoint_unmount__?.[url.href]) {\n    self.__remote_script_entrypoint_unmount__[url.href] = new Set();\n  }\n  const mountUnmountSets = await Promise.all(\n    scripts.map(async (script) => {\n      try {\n        const src = resolveScriptSrc(script, url);\n        const absoluteSrc = new URL(src, url).href;\n        const mod: ScriptMod = resolveClientUrl\n          ? await importViaCallback<ScriptMod>(absoluteSrc, resolveClientUrl)\n          : await importDirectly<ScriptMod>(absoluteSrc);\n        // revoke the object URL if we created one for inline script content\n        if (src.startsWith('blob:')) {\n          URL.revokeObjectURL(src);\n        }\n        if (\n          typeof mod.mount === 'function' ||\n          typeof mod.default?.mount === 'function'\n        ) {\n          if (!self.__remote_script_entrypoint_mount__) {\n            // eslint-disable-next-line camelcase\n            self.__remote_script_entrypoint_mount__ = {};\n          }\n          if (!self.__remote_script_entrypoint_mount__[url.href]) {\n            self.__remote_script_entrypoint_mount__[url.href] = new Set();\n          }\n          self.__remote_script_entrypoint_mount__[url.href]?.add(\n            mod.mount ||\n              mod.default?.mount ||\n              (() => {\n                // noop\n              }),\n          );\n        }\n        if (\n          typeof mod.unmount === 'function' ||\n          typeof mod.default?.unmount === 'function'\n        ) {\n          if (!self.__remote_script_entrypoint_unmount__) {\n            // eslint-disable-next-line camelcase\n            self.__remote_script_entrypoint_unmount__ = {};\n          }\n          if (!self.__remote_script_entrypoint_unmount__[url.href]) {\n            self.__remote_script_entrypoint_unmount__[url.href] = new Set();\n          }\n          self.__remote_script_entrypoint_unmount__[url.href]?.add(\n            mod.unmount ||\n              mod.default?.unmount ||\n              (() => {\n                // noop\n              }),\n          );\n        }\n        return {\n          mount: mod.mount || mod.default?.mount,\n          unmount: mod.unmount || mod.default?.unmount,\n        };\n      } catch (e) {\n        logError(\n          'StaticLoader',\n          `Error loading remote component script from \"${script.src || url.href}\".`,\n          e,\n        );\n        return {\n          mount: undefined,\n          unmount: undefined,\n        };\n      }\n    }),\n  );\n  return mountUnmountSets.reduce(\n    (acc, { mount, unmount }) => {\n      if (typeof mount === 'function') {\n        acc.mount.add(mount);\n      }\n      if (typeof unmount === 'function') {\n        acc.unmount.add(unmount);\n      }\n      return acc;\n    },\n    {\n      mount: new Set<MountOrUnmountFunction>(),\n      unmount: new Set<MountOrUnmountFunction>(),\n    },\n  );\n}\n","import type { MountOrUnmountFunction } from '#internal/runtime/types';\nimport { logError } from '#internal/utils/logger';\n\nif (typeof HTMLElement !== 'undefined') {\n  class RemoteComponent extends HTMLElement {\n    name?: string;\n    root?: ShadowRoot | null = null;\n    unmount?: Set<MountOrUnmountFunction> | null = null;\n\n    constructor() {\n      super();\n\n      const html = this.innerHTML;\n      this.root = this.attachShadow({\n        mode: this.getAttribute('mode') === 'closed' ? 'closed' : 'open',\n      });\n      this.root.innerHTML = html;\n      // Clear light DOM — content was copied into the shadow root above.\n      // Without this the original children render twice (once in light DOM,\n      // once in shadow DOM).\n      this.replaceChildren();\n\n      // run the mount functions for any scripts inside the shadow root asynchronously\n      (async () => {\n        const { loadStaticRemoteComponent } = await import(\n          '../../runtime/loaders/static-loader'\n        );\n        loadStaticRemoteComponent(\n          Array.from(this.root?.querySelectorAll('script') ?? []),\n          new URL(location.href),\n        )\n          .then(({ mount, unmount }) => {\n            this.unmount = unmount;\n            return Promise.all(\n              Array.from(mount).map((mountFn) => mountFn(this.root)),\n            );\n          })\n          .catch((e) => {\n            logError('HtmlRemote', 'Error mounting remote component.', e);\n          });\n      })().catch((e) => {\n        logError('HtmlRemote', 'Error mounting remote component.', e);\n      });\n    }\n\n    disconnectedCallback() {\n      // run the unmount functions for any scripts inside the shadow root asynchronously\n      (async () => {\n        if (this.unmount) {\n          await Promise.all(\n            Array.from(this.unmount).map(async (unmount) => {\n              try {\n                await unmount(this.root);\n              } catch (e) {\n                logError('HtmlRemote', 'Error unmounting remote component.', e);\n              }\n            }),\n          );\n        }\n      })().catch((e) => {\n        logError('HtmlRemote', 'Error unmounting remote component.', e);\n      });\n    }\n  }\n\n  // register the custom element\n  customElements.define('remote-component', RemoteComponent);\n}\n"],"mappings":"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","names":["location","loadStaticRemoteComponent"]}
+{"version":3,"sources":["../../src/utils/constants.ts","../../src/runtime/url/protected-rc-fallback.ts","../../src/utils/abort.ts","../../src/utils/error.ts","../../src/utils/logger.ts","../../src/runtime/loaders/static-loader.ts","../../src/remote/html/index.tsx"],"sourcesContent":["export const RC_PROTECTED_REMOTE_FETCH_PATHNAME = '/rc-fetch-protected-remote';\n\nexport const MISSING_SHARED_MODULES_MESSAGE =\n  'Remote Components shared modules not found. Did you forget to wrap your config with `withRemoteComponentsConfig` on both host and remote?';\n\nexport const CORS_DOCS_URL =\n  'https://vercel.com/docs/remote-components/concepts/cors-external-urls#accessing-cross-site-protected-remote-components';\n","import { RC_PROTECTED_REMOTE_FETCH_PATHNAME } from '#internal/utils/constants';\n\n/**\n * Generates a fallback URL that proxies the request through the host's protected remote fetch endpoint\n */\nexport function generateProtectedRcFallbackSrc(url: string): string {\n  return `${RC_PROTECTED_REMOTE_FETCH_PATHNAME}?url=${encodeURIComponent(url)}`;\n}\n\nexport function isProxiedUrl(url: string): boolean {\n  try {\n    return (\n      new URL(url, location.href).pathname ===\n      RC_PROTECTED_REMOTE_FETCH_PATHNAME\n    );\n  } catch {\n    return false;\n  }\n}\n","/**\n * Type guard to check if an error is an AbortError.\n * Handles cross-environment differences (Node.js, browsers, JSDOM).\n */\nexport function isAbortError(error: unknown): error is DOMException {\n  if (error instanceof DOMException && error.name === 'AbortError') {\n    return true;\n  }\n\n  // Handle Node.js native AbortError which may not be instanceof global DOMException\n  if (\n    error !== null &&\n    typeof error === 'object' &&\n    'name' in error &&\n    error.name === 'AbortError' &&\n    'message' in error &&\n    typeof (error as { message: unknown }).message === 'string'\n  ) {\n    // Additional check: verify it has DOMException-like structure\n    const e = error as { code?: unknown; constructor?: { name?: string } };\n    return typeof e.code === 'number' || e.constructor?.name === 'DOMException';\n  }\n\n  return false;\n}\n","import { isProxiedUrl } from '#internal/runtime/url/protected-rc-fallback';\nimport { isAbortError } from '#internal/utils/abort';\nimport {\n  CORS_DOCS_URL,\n  RC_PROTECTED_REMOTE_FETCH_PATHNAME,\n} from '#internal/utils/constants';\n\nexport class RemoteComponentsError extends Error {\n  code = 'REMOTE_COMPONENTS_ERROR';\n\n  constructor(message: string, options?: { cause?: unknown }) {\n    super(message, options);\n    this.name = 'RemoteComponentsError';\n  }\n}\n\nexport function multipleRemoteComponentsError(url: string | undefined) {\n  return new RemoteComponentsError(\n    `Multiple Remote Components found at \"${url}\". When a page exposes multiple Remote Components you must specify the \"name\" prop to select which one to load.`,\n  );\n}\n\nexport function failedToFetchRemoteComponentError(\n  url: string,\n  { status, statusText }: { status: number; statusText: string },\n  help: string = 'Is the URL correct and accessible?',\n) {\n  return new RemoteComponentsError(\n    `Failed to fetch Remote Component from \"${url}\". ${help}`,\n    { cause: new Error(`${status} ${statusText}`) },\n  );\n}\n\nexport async function errorFromFailedFetch(\n  originalUrl: string,\n  resolvedUrl: URL,\n  res: Response | null | undefined,\n): Promise<RemoteComponentsError> {\n  const isProxied = isProxiedUrl(resolvedUrl.href);\n\n  if (isProxied && res) {\n    const body = await res.text().catch(() => '');\n    return failedProxyFetchError(\n      originalUrl,\n      resolvedUrl.href,\n      res.status,\n      body,\n    );\n  }\n\n  const fallback = failedToFetchRemoteComponentError(\n    originalUrl,\n    res ?? { status: 0, statusText: 'No Response' },\n  );\n\n  if (!res) return fallback;\n\n  try {\n    const body = await res.text();\n    const parser = new DOMParser();\n    const doc = parser.parseFromString(body, 'text/html');\n    const errorTemplate = doc.querySelector(\n      'template[data-next-error-message]',\n    );\n    const errorMessage = errorTemplate?.getAttribute('data-next-error-message');\n    if (errorMessage) {\n      const error = new RemoteComponentsError(errorMessage);\n      const errorStack = errorTemplate?.getAttribute('data-next-error-stack');\n      if (errorStack) {\n        error.stack = errorStack;\n      }\n      return error;\n    }\n  } catch (parseError) {\n    // Re-throw abort errors, ignore parse errors\n    if (isAbortError(parseError)) throw parseError;\n  }\n\n  return fallback;\n}\n\nexport function failedProxiedAssetError(\n  kind: 'chunk' | 'script',\n  url: string,\n  resolvedUrl: string,\n): RemoteComponentsError {\n  return new RemoteComponentsError(\n    `Failed to load ${kind} \"${url}\" via proxy \"${resolvedUrl}\". ` +\n      `Ensure withRemoteComponentsHostProxy middleware is configured, \"${RC_PROTECTED_REMOTE_FETCH_PATHNAME}\" is in the matcher, ` +\n      `and the remote URL is included in allowedProxyUrls. ` +\n      `See: ${CORS_DOCS_URL}`,\n  );\n}\n\nexport function failedProxyFetchError(\n  originalUrl: string,\n  proxyUrl: string,\n  status: number,\n  responseBody?: string,\n): RemoteComponentsError {\n  if (status === 404) {\n    return new RemoteComponentsError(\n      `Could not proxy the request to \"${originalUrl}\" — the proxy endpoint \"${RC_PROTECTED_REMOTE_FETCH_PATHNAME}\" returned 404.\\n\\n` +\n        `The host server needs middleware or a route that handles \"${RC_PROTECTED_REMOTE_FETCH_PATHNAME}\".\\n\\n` +\n        `Proxying requires two pieces:\\n` +\n        `  1. resolveClientUrl={routeThroughHostProxy} on <RemoteComponent>\\n` +\n        `  2. Middleware or a route for \"${RC_PROTECTED_REMOTE_FETCH_PATHNAME}\" on the host server\\n\\n` +\n        `Docs: ${CORS_DOCS_URL}`,\n    );\n  }\n  if (status === 403) {\n    const detail = responseBody ? ` ${responseBody}` : '';\n    return new RemoteComponentsError(\n      `Proxied request to \"${proxyUrl}\" was forbidden.${detail} ` +\n        `See: ${CORS_DOCS_URL}`,\n    );\n  }\n  return new RemoteComponentsError(\n    `Proxied request for \"${originalUrl}\" via \"${proxyUrl}\" failed with status ${status}. ` +\n      `See: ${CORS_DOCS_URL}`,\n  );\n}\n","import { CORS_DOCS_URL } from '#internal/utils/constants';\nimport { RemoteComponentsError } from '#internal/utils/error';\n\ntype LogLocation =\n  | 'ChunkLoader'\n  | 'ChunkDispatcher'\n  | 'ComponentLoader'\n  | 'ModuleDispatcher'\n  | 'RemoteScope'\n  | 'SharedModules'\n  | 'WebpackRuntime'\n  | 'TurbopackModule'\n  | 'StaticLoader'\n  | 'ScriptLoader'\n  | 'Polyfill'\n  | 'HtmlRemote'\n  | 'HtmlHost'\n  | 'Config'\n  | 'NextAppRouter'\n  | 'NextAppRouterCompat'\n  | 'FetchRemoteComponent';\n\nconst PREFIX = 'remote-components';\nconst DEBUG =\n  typeof window !== 'undefined' && localStorage.getItem('RC_DEBUG') === 'true';\n\nexport function logDebug(location: LogLocation, message: string) {\n  if (DEBUG) {\n    // eslint-disable-next-line no-console\n    console.debug(`[${PREFIX}:${location}]: ${message}`);\n  }\n}\n\nexport function logInfo(location: LogLocation, message: string) {\n  // eslint-disable-next-line no-console\n  console.info(`[${PREFIX}:${location}]: ${message}`);\n}\n\nexport function logWarn(location: LogLocation, message: string) {\n  // eslint-disable-next-line no-console\n  console.warn(`[${PREFIX}:${location}]: ${message}`);\n}\n\nexport function logError(\n  location: LogLocation,\n  message: string,\n  cause?: unknown,\n) {\n  // eslint-disable-next-line no-console\n  console.error(\n    new RemoteComponentsError(`[${PREFIX}:${location}]: ${message}`, {\n      cause,\n    }),\n  );\n}\n\n/**\n * Logs a warning when a cross-origin asset request fails, guiding users\n * to configure the proxy middleware and resolveClientUrl on their host.\n */\nexport function warnCrossOriginFetchError(\n  logLocation: LogLocation,\n  url: string | URL,\n): void {\n  try {\n    const parsed = typeof url === 'string' ? new URL(url) : url;\n    if (typeof location === 'undefined' || parsed.origin === location.origin) {\n      return;\n    }\n    logWarn(\n      logLocation,\n      `Failed to fetch cross-origin resource \"${parsed.href}\". ` +\n        'To load assets from a protected deployment, two steps are required: ' +\n        '(1) configure withRemoteComponentsHostProxy middleware in your host with the remote URL in allowedProxyUrls, ' +\n        'and (2) provide a resolveClientUrl prop that rewrites cross-origin asset URLs to go through the proxy. ' +\n        `See: ${CORS_DOCS_URL}`,\n    );\n  } catch {\n    // URL parsing failed — skip the warning\n  }\n}\n","import type { InternalResolveClientUrl } from '#internal/host/server/types';\nimport type {\n  MountOrUnmountFunction,\n  MountUnmountFunctions,\n} from '#internal/runtime/types';\nimport { logError, warnCrossOriginFetchError } from '#internal/utils/logger';\n\ntype ScriptMod = {\n  mount?: MountOrUnmountFunction;\n  unmount?: MountOrUnmountFunction;\n  default?: {\n    mount?: MountOrUnmountFunction;\n    unmount?: MountOrUnmountFunction;\n  };\n};\n\n/**\n * Fetches an ES module via the resolveClientUrl callback, rewrites its\n * relative imports to also go through the callback, then loads it by injecting a\n * wrapper <script type=\"module\"> tag. The module's namespace is captured via\n * a temporary global and returned.\n *\n * This is needed when a direct import() of a cross-origin module fails due to\n * CORS restrictions or Vercel preview-deployment auth. A simple URL rewrite\n * doesn't work for import() because relative imports inside the module would\n * resolve against the rewritten URL instead of the original remote origin.\n */\nasync function importViaCallback<T>(\n  absoluteSrc: string,\n  resolveClientUrl: InternalResolveClientUrl,\n): Promise<T> {\n  const resolvedUrl = resolveClientUrl(absoluteSrc) ?? absoluteSrc;\n  const fetchUrl = new URL(resolvedUrl, location.href).href;\n  const response = await fetch(fetchUrl);\n  if (!response.ok) throw new Error(`Proxied fetch failed: ${response.status}`);\n\n  // Restore import.meta.url to the original module URL so any code that\n  // relies on it (e.g. for asset resolution) gets the right value.\n  // Rewrite relative imports to absolute URLs resolved through the callback so\n  // that transitive dependencies also bypass CORS/auth.\n  const content = (await response.text())\n    .replace(/import\\.meta\\.url/g, JSON.stringify(absoluteSrc))\n    .replace(\n      /\\b(from|import)\\s*([\"'])(\\.\\.?\\/[^\"']+)\\2/g,\n      (_, keyword, quote, relativePath) => {\n        const absoluteImportUrl = new URL(relativePath, absoluteSrc).href;\n        const resolvedImportUrl = new URL(\n          resolveClientUrl(absoluteImportUrl) ?? absoluteImportUrl,\n          location.href,\n        ).href;\n        return `${keyword} ${quote}${resolvedImportUrl}${quote}`;\n      },\n    );\n  const moduleBlobUrl = URL.createObjectURL(\n    new Blob([content], { type: 'text/javascript' }),\n  );\n  const wrapperContent = [\n    `import*as m from${JSON.stringify(moduleBlobUrl)};`,\n    `globalThis.__rc_module_registry__=globalThis.__rc_module_registry__||{};`,\n    `globalThis.__rc_module_registry__[${JSON.stringify(absoluteSrc)}]=m;`,\n  ].join('');\n  const wrapperBlobUrl = URL.createObjectURL(\n    new Blob([wrapperContent], { type: 'text/javascript' }),\n  );\n  const scriptEl = document.createElement('script');\n  scriptEl.type = 'module';\n  scriptEl.src = wrapperBlobUrl;\n  try {\n    await new Promise<void>((resolve, reject) => {\n      scriptEl.onload = () => resolve();\n      scriptEl.onerror = () =>\n        reject(new Error(`Failed to load module for ${absoluteSrc}`));\n      document.head.appendChild(scriptEl);\n    });\n  } finally {\n    scriptEl.remove();\n    URL.revokeObjectURL(moduleBlobUrl);\n    URL.revokeObjectURL(wrapperBlobUrl);\n  }\n  const registry = (\n    globalThis as unknown as { __rc_module_registry__?: Record<string, T> }\n  ).__rc_module_registry__;\n  const mod = registry?.[absoluteSrc] ?? ({} as T);\n  if (registry) delete registry[absoluteSrc];\n  return mod;\n}\n\nasync function importDirectly<T>(absoluteSrc: string): Promise<T> {\n  try {\n    return (await import(\n      /* @vite-ignore */\n      /* webpackIgnore: true */ absoluteSrc\n    )) as T;\n  } catch (importError) {\n    if (!absoluteSrc.startsWith('blob:')) {\n      warnCrossOriginFetchError('StaticLoader', absoluteSrc);\n    }\n    throw importError;\n  }\n}\n\nfunction resolveScriptSrc(script: HTMLScriptElement, url: URL): string {\n  const rawSrc =\n    typeof script.getAttribute === 'function'\n      ? (script.getAttribute('src') ?? script.src)\n      : script.src;\n  if (!rawSrc && script.textContent) {\n    return URL.createObjectURL(\n      new Blob(\n        [script.textContent.replace(/import\\.meta\\.url/g, JSON.stringify(url))],\n        { type: 'text/javascript' },\n      ),\n    );\n  }\n  return rawSrc;\n}\n\nexport async function loadStaticRemoteComponent(\n  scripts: HTMLScriptElement[],\n  url: URL,\n  resolveClientUrl?: InternalResolveClientUrl,\n) {\n  const self = globalThis as typeof globalThis & MountUnmountFunctions;\n  if (self.__remote_script_entrypoint_mount__?.[url.href]) {\n    self.__remote_script_entrypoint_mount__[url.href] = new Set();\n  }\n  if (self.__remote_script_entrypoint_unmount__?.[url.href]) {\n    self.__remote_script_entrypoint_unmount__[url.href] = new Set();\n  }\n  const mountUnmountSets = await Promise.all(\n    scripts.map(async (script) => {\n      try {\n        const src = resolveScriptSrc(script, url);\n        const absoluteSrc = new URL(src, url).href;\n        const mod: ScriptMod = resolveClientUrl\n          ? await importViaCallback<ScriptMod>(absoluteSrc, resolveClientUrl)\n          : await importDirectly<ScriptMod>(absoluteSrc);\n        // revoke the object URL if we created one for inline script content\n        if (src.startsWith('blob:')) {\n          URL.revokeObjectURL(src);\n        }\n        if (\n          typeof mod.mount === 'function' ||\n          typeof mod.default?.mount === 'function'\n        ) {\n          if (!self.__remote_script_entrypoint_mount__) {\n            // eslint-disable-next-line camelcase\n            self.__remote_script_entrypoint_mount__ = {};\n          }\n          if (!self.__remote_script_entrypoint_mount__[url.href]) {\n            self.__remote_script_entrypoint_mount__[url.href] = new Set();\n          }\n          self.__remote_script_entrypoint_mount__[url.href]?.add(\n            mod.mount ||\n              mod.default?.mount ||\n              (() => {\n                // noop\n              }),\n          );\n        }\n        if (\n          typeof mod.unmount === 'function' ||\n          typeof mod.default?.unmount === 'function'\n        ) {\n          if (!self.__remote_script_entrypoint_unmount__) {\n            // eslint-disable-next-line camelcase\n            self.__remote_script_entrypoint_unmount__ = {};\n          }\n          if (!self.__remote_script_entrypoint_unmount__[url.href]) {\n            self.__remote_script_entrypoint_unmount__[url.href] = new Set();\n          }\n          self.__remote_script_entrypoint_unmount__[url.href]?.add(\n            mod.unmount ||\n              mod.default?.unmount ||\n              (() => {\n                // noop\n              }),\n          );\n        }\n        return {\n          mount: mod.mount || mod.default?.mount,\n          unmount: mod.unmount || mod.default?.unmount,\n        };\n      } catch (e) {\n        logError(\n          'StaticLoader',\n          `Error loading remote component script from \"${script.src || url.href}\".`,\n          e,\n        );\n        return {\n          mount: undefined,\n          unmount: undefined,\n        };\n      }\n    }),\n  );\n  return mountUnmountSets.reduce(\n    (acc, { mount, unmount }) => {\n      if (typeof mount === 'function') {\n        acc.mount.add(mount);\n      }\n      if (typeof unmount === 'function') {\n        acc.unmount.add(unmount);\n      }\n      return acc;\n    },\n    {\n      mount: new Set<MountOrUnmountFunction>(),\n      unmount: new Set<MountOrUnmountFunction>(),\n    },\n  );\n}\n","import type { MountOrUnmountFunction } from '#internal/runtime/types';\nimport { logError } from '#internal/utils/logger';\n\nif (typeof HTMLElement !== 'undefined') {\n  class RemoteComponent extends HTMLElement {\n    name?: string;\n    root?: ShadowRoot | null = null;\n    unmount?: Set<MountOrUnmountFunction> | null = null;\n\n    constructor() {\n      super();\n\n      const html = this.innerHTML;\n      this.root = this.attachShadow({\n        mode: this.getAttribute('mode') === 'closed' ? 'closed' : 'open',\n      });\n      this.root.innerHTML = html;\n      // Clear light DOM — content was copied into the shadow root above.\n      // Without this the original children render twice (once in light DOM,\n      // once in shadow DOM).\n      this.replaceChildren();\n\n      // run the mount functions for any scripts inside the shadow root asynchronously\n      (async () => {\n        const { loadStaticRemoteComponent } = await import(\n          '../../runtime/loaders/static-loader'\n        );\n        loadStaticRemoteComponent(\n          Array.from(this.root?.querySelectorAll('script') ?? []),\n          new URL(location.href),\n        )\n          .then(({ mount, unmount }) => {\n            this.unmount = unmount;\n            return Promise.all(\n              Array.from(mount).map((mountFn) => mountFn(this.root)),\n            );\n          })\n          .catch((e) => {\n            logError('HtmlRemote', 'Error mounting remote component.', e);\n          });\n      })().catch((e) => {\n        logError('HtmlRemote', 'Error mounting remote component.', e);\n      });\n    }\n\n    disconnectedCallback() {\n      // run the unmount functions for any scripts inside the shadow root asynchronously\n      (async () => {\n        if (this.unmount) {\n          await Promise.all(\n            Array.from(this.unmount).map(async (unmount) => {\n              try {\n                await unmount(this.root);\n              } catch (e) {\n                logError('HtmlRemote', 'Error unmounting remote component.', e);\n              }\n            }),\n          );\n        }\n      })().catch((e) => {\n        logError('HtmlRemote', 'Error unmounting remote component.', e);\n      });\n    }\n  }\n\n  // register the custom element\n  customElements.define('remote-component', RemoteComponent);\n}\n"],"mappings":"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","names":["location","loadStaticRemoteComponent"]}

package/dist/remote/nextjs/app.cjs

@@ -38,11 +38,12 @@ var import_react = require("react");
 var import_app_client = require("#internal/remote/nextjs/app-client");
 var import_constants = require("#internal/runtime/constants");
 var import_error = require("#internal/utils/error");
+var import_project_id_env = require("#internal/utils/project-id-env");
 const SERVER_ACTION_MANIFESTS_SINGLETON = Symbol.for(
   "next.server.action-manifests"
 );
 const MANIFESTS_SINGLETON = Symbol.for("next.server.manifests");
-const PROJECT_ID = process.env.REMOTE_COMPONENTS_PROJECT_ID || process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION || process.env.VERCEL_PROJECT_ID;
+const PROJECT_ID = (0, import_project_id_env.resolveProjectIdFromEnv)();
 async function tryImport(importer) {
   try {
     return await importer();

package/dist/remote/nextjs/app.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/remote/nextjs/app.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport { workAsyncStorage } from 'next/dist/server/app-render/work-async-storage.external';\nimport { Suspense } from 'react';\nimport type { ConsumeLifecycleCallbacks } from '#internal/host/shared/config';\nimport { RemoteComponentSharedRemote } from '#internal/remote/nextjs/app-client';\nimport { DEFAULT_COMPONENT_NAME } from '#internal/runtime/constants';\nimport { RemoteComponentsError } from '#internal/utils/error';\n\ninterface Manifest {\n  clientModules?: Record<\n    string,\n    { id: string; name: string; chunks: string[]; async: boolean }\n  >;\n  moduleLoading: { prefix?: string; crossOrigin?: boolean | null };\n  ssrModuleMapping?: Record<string, unknown>;\n}\n\n// internal Next.js symbol to access the manifest which is stored in the global scope\nconst SERVER_ACTION_MANIFESTS_SINGLETON = Symbol.for(\n  'next.server.action-manifests',\n);\nconst MANIFESTS_SINGLETON = Symbol.for('next.server.manifests');\n\nconst PROJECT_ID =\n  process.env.REMOTE_COMPONENTS_PROJECT_ID ||\n  process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION ||\n  process.env.VERCEL_PROJECT_ID;\n\nasync function tryImport<T>(importer: () => Promise<T>) {\n  try {\n    return (await importer()) as T;\n  } catch {\n    return {} as T;\n  }\n}\n\n// inject the RSC flight data into the HTML response using <script>\n// the RSC flight data is used to hydrate the remote component on the host\n// this approach is similar to an island architecture on the host\n// the remote component is static HTML until it is hydrated using this RSC flight data\nfunction RemoteComponentData({ name, data }: { name: string; data: string[] }) {\n  return (\n    <script id={`${name}_rsc`}>\n      {data\n        .map(\n          (chunk, i) =>\n            // make the data handling somewhat safe\n            `${\n              i === 0 ? `self[\"${name}\"]=self[\"${name}\"]||[];` : ''\n            }self[\"${name}\"].push(${JSON.stringify(chunk)});`,\n        )\n        .join('\\n')}\n    </script>\n  );\n}\n\n/**\n * Props for exposing a Next.js component as a remote component.\n *\n * Extends {@link ConsumeLifecycleCallbacks} so the consuming host can wire up lifecycle\n * events. The `children` prop is the component content to expose (required,\n * unlike host props where children are an optional loading fallback).\n */\nexport interface ExposeRemoteComponentProps extends ConsumeLifecycleCallbacks {\n  /** The name of the remote component. Use a unique name to expose multiple remote components from the same page. */\n  name?: string;\n  /** The content of the remote component. This is the content that will be rendered as the remote component. */\n  children: React.ReactNode;\n}\n\n/**\n * ExposeRemoteComponent is a Next.js component that exposes a remote component\n * that can be used in a host application.\n *\n * @param name - The name of the remote component. Use a unique name to expose multiple remote components from the same page.\n * @param children - The content of the remote component. This is the content that will be rendered as the remote component.\n * @returns A React component that renders the remote component.\n *\n * @example\n *\n * Use the `<ExposeRemoteComponent>` in your Next.js App Router application to expose the children as a remote component:\n *\n * ```tsx\n * import { ExposeRemoteComponent } from 'remote-components/remote/nextjs/app';\n *\n * export default function MyPage() {\n *   return (\n *     <ExposeRemoteComponent>\n *       <h1>Hello from the remote component!</h1>\n *       <p>This is a remote component that can be used in a host application.</p>\n *     </ExposeRemoteComponent>\n *   );\n * }\n * ```\n */\nexport async function ExposeRemoteComponent({\n  name = DEFAULT_COMPONENT_NAME,\n  children,\n}: ExposeRemoteComponentProps): Promise<React.ReactElement> {\n  // access the internal Next.js work store to get the active page and route\n  const { page, route } = workAsyncStorage.getStore() ?? {\n    page: '/',\n    route: '/',\n  };\n\n  // get reference to the manifests from the global scope\n  const self = globalThis as typeof globalThis & {\n    [SERVER_ACTION_MANIFESTS_SINGLETON]?: {\n      clientReferenceManifestsPerPage?: Record<string, Manifest>;\n    };\n    [MANIFESTS_SINGLETON]?: {\n      clientReferenceManifestsPerRoute?: Map<string, Manifest>;\n    };\n    __RSC_MANIFEST?: Record<string, unknown>;\n    __RSC_SERVER_MANIFEST?: Record<string, unknown>;\n  };\n  const manifests =\n    self[MANIFESTS_SINGLETON] ?? self[SERVER_ACTION_MANIFESTS_SINGLETON] ?? {};\n  const manifest =\n    'clientReferenceManifestsPerRoute' in manifests\n      ? manifests.clientReferenceManifestsPerRoute?.get?.(route)\n      : 'clientReferenceManifestsPerPage' in manifests\n        ? manifests.clientReferenceManifestsPerPage?.[route]\n        : undefined;\n\n  // manually handle the internal Next.js manifest\n  self.__RSC_MANIFEST = self.__RSC_MANIFEST || {};\n  self.__RSC_MANIFEST[page] = self.__RSC_MANIFEST[page] || manifest;\n  self.__RSC_SERVER_MANIFEST = self.__RSC_SERVER_MANIFEST || {};\n  self.__RSC_SERVER_MANIFEST[page] =\n    self.__RSC_SERVER_MANIFEST[page] || manifest;\n\n  // get the client and SSR module mapping to be able to use client components in the remote component\n  const ssrModuleMapping = { ...manifest?.ssrModuleMapping };\n\n  // if the remote component is used in a hosting application, we need to mutate the module map to include the zone\n  const clientModules = Object.fromEntries(\n    Object.entries(manifest?.clientModules ?? {}).map(([key, value]) => {\n      // append a prefix to each entry in the module map to include the zone of the remote component\n      const remoteId = `[${PROJECT_ID}] ${value.id}`;\n      ssrModuleMapping[remoteId] = ssrModuleMapping[value.id];\n      // override the original id with the new remote id\n      return [\n        key,\n        {\n          ...value,\n          id: remoteId,\n          // prepend the current zone to the chunks to handle remote component chunk loading in Webpack\n          // this is required to avoid loading the wrong chunk in the host application\n          chunks: value.chunks.map((chunk) => `[${PROJECT_ID}] ${chunk}`),\n        },\n      ];\n    }),\n  );\n\n  // dynamically import the runtime specific RSC rendering functions and client component\n  const [\n    { renderToReadableStream: nextRenderToReadableStream },\n    { renderToReadableStream: legacyRenderToReadableStream },\n  ] = await Promise.all(\n    process.env.TURBOPACK\n      ? [\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-turbopack/server'),\n          ),\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-turbopack/server.edge'),\n          ),\n        ]\n      : [\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-webpack/server'),\n          ),\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-webpack/server.edge'),\n          ),\n        ],\n  );\n  const renderToReadableStream =\n    nextRenderToReadableStream ?? legacyRenderToReadableStream;\n\n  if (typeof renderToReadableStream !== 'function') {\n    throw new RemoteComponentsError(\n      'No valid `renderToReadableStream()` function found. Do you have Next.js installed?',\n    );\n  }\n\n  let error: Error | undefined;\n  // render the wrapped content of this component (children) into an RSC stream\n  const stream = renderToReadableStream(children, clientModules, {\n    onError(e) {\n      error = e;\n    },\n  });\n\n  const data = [];\n  const decoder = new TextDecoder();\n\n  // convert the stream to an array for safe passing to the client\n  for await (const chunk of stream as unknown as AsyncIterable<Uint8Array>) {\n    data.push(decoder.decode(chunk));\n  }\n\n  const runtime = process.env.TURBOPACK ? 'turbopack' : 'webpack';\n  const remoteComponentName = `${name}_${route.replace(/[/[\\].]/g, '_')}`;\n\n  return (\n    // wrap the remote component content into a div to know which part of the HTML belongs to the remote component\n    <div\n      data-bundle={PROJECT_ID}\n      data-route={route}\n      data-runtime={runtime}\n      data-type=\"nextjs\"\n      id={`${remoteComponentName}_ssr`}\n    >\n      <RemoteComponentSharedRemote name={remoteComponentName} />\n      {typeof error !== 'undefined' ? (\n        <>\n          <template\n            data-next-error-message={\n              error instanceof Error ? error.message : String(error)\n            }\n            data-next-error-stack={\n              error instanceof Error ? (error.stack ?? '') : ''\n            }\n          />\n          <Suspense fallback={null}>{children}</Suspense>\n        </>\n      ) : (\n        children\n      )}\n      {/* inject RSC flight data as <script> */}\n      <RemoteComponentData data={data} name={remoteComponentName} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/remote/nextjs/app.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport { workAsyncStorage } from 'next/dist/server/app-render/work-async-storage.external';\nimport { Suspense } from 'react';\nimport type { ConsumeLifecycleCallbacks } from '#internal/host/shared/config';\nimport { RemoteComponentSharedRemote } from '#internal/remote/nextjs/app-client';\nimport { DEFAULT_COMPONENT_NAME } from '#internal/runtime/constants';\nimport { RemoteComponentsError } from '#internal/utils/error';\nimport { resolveProjectIdFromEnv } from '#internal/utils/project-id-env';\n\ninterface Manifest {\n  clientModules?: Record<\n    string,\n    { id: string; name: string; chunks: string[]; async: boolean }\n  >;\n  moduleLoading: { prefix?: string; crossOrigin?: boolean | null };\n  ssrModuleMapping?: Record<string, unknown>;\n}\n\n// internal Next.js symbol to access the manifest which is stored in the global scope\nconst SERVER_ACTION_MANIFESTS_SINGLETON = Symbol.for(\n  'next.server.action-manifests',\n);\nconst MANIFESTS_SINGLETON = Symbol.for('next.server.manifests');\n\nconst PROJECT_ID = resolveProjectIdFromEnv();\n\nasync function tryImport<T>(importer: () => Promise<T>) {\n  try {\n    return (await importer()) as T;\n  } catch {\n    return {} as T;\n  }\n}\n\n// inject the RSC flight data into the HTML response using <script>\n// the RSC flight data is used to hydrate the remote component on the host\n// this approach is similar to an island architecture on the host\n// the remote component is static HTML until it is hydrated using this RSC flight data\nfunction RemoteComponentData({ name, data }: { name: string; data: string[] }) {\n  return (\n    <script id={`${name}_rsc`}>\n      {data\n        .map(\n          (chunk, i) =>\n            // make the data handling somewhat safe\n            `${\n              i === 0 ? `self[\"${name}\"]=self[\"${name}\"]||[];` : ''\n            }self[\"${name}\"].push(${JSON.stringify(chunk)});`,\n        )\n        .join('\\n')}\n    </script>\n  );\n}\n\n/**\n * Props for exposing a Next.js component as a remote component.\n *\n * Extends {@link ConsumeLifecycleCallbacks} so the consuming host can wire up lifecycle\n * events. The `children` prop is the component content to expose (required,\n * unlike host props where children are an optional loading fallback).\n */\nexport interface ExposeRemoteComponentProps extends ConsumeLifecycleCallbacks {\n  /** The name of the remote component. Use a unique name to expose multiple remote components from the same page. */\n  name?: string;\n  /** The content of the remote component. This is the content that will be rendered as the remote component. */\n  children: React.ReactNode;\n}\n\n/**\n * ExposeRemoteComponent is a Next.js component that exposes a remote component\n * that can be used in a host application.\n *\n * @param name - The name of the remote component. Use a unique name to expose multiple remote components from the same page.\n * @param children - The content of the remote component. This is the content that will be rendered as the remote component.\n * @returns A React component that renders the remote component.\n *\n * @example\n *\n * Use the `<ExposeRemoteComponent>` in your Next.js App Router application to expose the children as a remote component:\n *\n * ```tsx\n * import { ExposeRemoteComponent } from 'remote-components/remote/nextjs/app';\n *\n * export default function MyPage() {\n *   return (\n *     <ExposeRemoteComponent>\n *       <h1>Hello from the remote component!</h1>\n *       <p>This is a remote component that can be used in a host application.</p>\n *     </ExposeRemoteComponent>\n *   );\n * }\n * ```\n */\nexport async function ExposeRemoteComponent({\n  name = DEFAULT_COMPONENT_NAME,\n  children,\n}: ExposeRemoteComponentProps): Promise<React.ReactElement> {\n  // access the internal Next.js work store to get the active page and route\n  const { page, route } = workAsyncStorage.getStore() ?? {\n    page: '/',\n    route: '/',\n  };\n\n  // get reference to the manifests from the global scope\n  const self = globalThis as typeof globalThis & {\n    [SERVER_ACTION_MANIFESTS_SINGLETON]?: {\n      clientReferenceManifestsPerPage?: Record<string, Manifest>;\n    };\n    [MANIFESTS_SINGLETON]?: {\n      clientReferenceManifestsPerRoute?: Map<string, Manifest>;\n    };\n    __RSC_MANIFEST?: Record<string, unknown>;\n    __RSC_SERVER_MANIFEST?: Record<string, unknown>;\n  };\n  const manifests =\n    self[MANIFESTS_SINGLETON] ?? self[SERVER_ACTION_MANIFESTS_SINGLETON] ?? {};\n  const manifest =\n    'clientReferenceManifestsPerRoute' in manifests\n      ? manifests.clientReferenceManifestsPerRoute?.get?.(route)\n      : 'clientReferenceManifestsPerPage' in manifests\n        ? manifests.clientReferenceManifestsPerPage?.[route]\n        : undefined;\n\n  // manually handle the internal Next.js manifest\n  self.__RSC_MANIFEST = self.__RSC_MANIFEST || {};\n  self.__RSC_MANIFEST[page] = self.__RSC_MANIFEST[page] || manifest;\n  self.__RSC_SERVER_MANIFEST = self.__RSC_SERVER_MANIFEST || {};\n  self.__RSC_SERVER_MANIFEST[page] =\n    self.__RSC_SERVER_MANIFEST[page] || manifest;\n\n  // get the client and SSR module mapping to be able to use client components in the remote component\n  const ssrModuleMapping = { ...manifest?.ssrModuleMapping };\n\n  // if the remote component is used in a hosting application, we need to mutate the module map to include the zone\n  const clientModules = Object.fromEntries(\n    Object.entries(manifest?.clientModules ?? {}).map(([key, value]) => {\n      // append a prefix to each entry in the module map to include the zone of the remote component\n      const remoteId = `[${PROJECT_ID}] ${value.id}`;\n      ssrModuleMapping[remoteId] = ssrModuleMapping[value.id];\n      // override the original id with the new remote id\n      return [\n        key,\n        {\n          ...value,\n          id: remoteId,\n          // prepend the current zone to the chunks to handle remote component chunk loading in Webpack\n          // this is required to avoid loading the wrong chunk in the host application\n          chunks: value.chunks.map((chunk) => `[${PROJECT_ID}] ${chunk}`),\n        },\n      ];\n    }),\n  );\n\n  // dynamically import the runtime specific RSC rendering functions and client component\n  const [\n    { renderToReadableStream: nextRenderToReadableStream },\n    { renderToReadableStream: legacyRenderToReadableStream },\n  ] = await Promise.all(\n    process.env.TURBOPACK\n      ? [\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-turbopack/server'),\n          ),\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-turbopack/server.edge'),\n          ),\n        ]\n      : [\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-webpack/server'),\n          ),\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-webpack/server.edge'),\n          ),\n        ],\n  );\n  const renderToReadableStream =\n    nextRenderToReadableStream ?? legacyRenderToReadableStream;\n\n  if (typeof renderToReadableStream !== 'function') {\n    throw new RemoteComponentsError(\n      'No valid `renderToReadableStream()` function found. Do you have Next.js installed?',\n    );\n  }\n\n  let error: Error | undefined;\n  // render the wrapped content of this component (children) into an RSC stream\n  const stream = renderToReadableStream(children, clientModules, {\n    onError(e) {\n      error = e;\n    },\n  });\n\n  const data = [];\n  const decoder = new TextDecoder();\n\n  // convert the stream to an array for safe passing to the client\n  for await (const chunk of stream as unknown as AsyncIterable<Uint8Array>) {\n    data.push(decoder.decode(chunk));\n  }\n\n  const runtime = process.env.TURBOPACK ? 'turbopack' : 'webpack';\n  const remoteComponentName = `${name}_${route.replace(/[/[\\].]/g, '_')}`;\n\n  return (\n    // wrap the remote component content into a div to know which part of the HTML belongs to the remote component\n    <div\n      data-bundle={PROJECT_ID}\n      data-route={route}\n      data-runtime={runtime}\n      data-type=\"nextjs\"\n      id={`${remoteComponentName}_ssr`}\n    >\n      <RemoteComponentSharedRemote name={remoteComponentName} />\n      {typeof error !== 'undefined' ? (\n        <>\n          <template\n            data-next-error-message={\n              error instanceof Error ? error.message : String(error)\n            }\n            data-next-error-stack={\n              error instanceof Error ? (error.stack ?? '') : ''\n            }\n          />\n          <Suspense fallback={null}>{children}</Suspense>\n        </>\n      ) : (\n        children\n      )}\n      {/* inject RSC flight data as <script> */}\n      <RemoteComponentData data={data} name={remoteComponentName} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/remote/nextjs/app.js

@@ -5,11 +5,12 @@ import { Suspense } from "react";
 import { RemoteComponentSharedRemote } from "#internal/remote/nextjs/app-client";
 import { DEFAULT_COMPONENT_NAME } from "#internal/runtime/constants";
 import { RemoteComponentsError } from "#internal/utils/error";
+import { resolveProjectIdFromEnv } from "#internal/utils/project-id-env";
 const SERVER_ACTION_MANIFESTS_SINGLETON = Symbol.for(
   "next.server.action-manifests"
 );
 const MANIFESTS_SINGLETON = Symbol.for("next.server.manifests");
-const PROJECT_ID = process.env.REMOTE_COMPONENTS_PROJECT_ID || process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION || process.env.VERCEL_PROJECT_ID;
+const PROJECT_ID = resolveProjectIdFromEnv();
 async function tryImport(importer) {
   try {
     return await importer();

package/dist/remote/nextjs/app.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/remote/nextjs/app.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport { workAsyncStorage } from 'next/dist/server/app-render/work-async-storage.external';\nimport { Suspense } from 'react';\nimport type { ConsumeLifecycleCallbacks } from '#internal/host/shared/config';\nimport { RemoteComponentSharedRemote } from '#internal/remote/nextjs/app-client';\nimport { DEFAULT_COMPONENT_NAME } from '#internal/runtime/constants';\nimport { RemoteComponentsError } from '#internal/utils/error';\n\ninterface Manifest {\n  clientModules?: Record<\n    string,\n    { id: string; name: string; chunks: string[]; async: boolean }\n  >;\n  moduleLoading: { prefix?: string; crossOrigin?: boolean | null };\n  ssrModuleMapping?: Record<string, unknown>;\n}\n\n// internal Next.js symbol to access the manifest which is stored in the global scope\nconst SERVER_ACTION_MANIFESTS_SINGLETON = Symbol.for(\n  'next.server.action-manifests',\n);\nconst MANIFESTS_SINGLETON = Symbol.for('next.server.manifests');\n\nconst PROJECT_ID =\n  process.env.REMOTE_COMPONENTS_PROJECT_ID ||\n  process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION ||\n  process.env.VERCEL_PROJECT_ID;\n\nasync function tryImport<T>(importer: () => Promise<T>) {\n  try {\n    return (await importer()) as T;\n  } catch {\n    return {} as T;\n  }\n}\n\n// inject the RSC flight data into the HTML response using <script>\n// the RSC flight data is used to hydrate the remote component on the host\n// this approach is similar to an island architecture on the host\n// the remote component is static HTML until it is hydrated using this RSC flight data\nfunction RemoteComponentData({ name, data }: { name: string; data: string[] }) {\n  return (\n    <script id={`${name}_rsc`}>\n      {data\n        .map(\n          (chunk, i) =>\n            // make the data handling somewhat safe\n            `${\n              i === 0 ? `self[\"${name}\"]=self[\"${name}\"]||[];` : ''\n            }self[\"${name}\"].push(${JSON.stringify(chunk)});`,\n        )\n        .join('\\n')}\n    </script>\n  );\n}\n\n/**\n * Props for exposing a Next.js component as a remote component.\n *\n * Extends {@link ConsumeLifecycleCallbacks} so the consuming host can wire up lifecycle\n * events. The `children` prop is the component content to expose (required,\n * unlike host props where children are an optional loading fallback).\n */\nexport interface ExposeRemoteComponentProps extends ConsumeLifecycleCallbacks {\n  /** The name of the remote component. Use a unique name to expose multiple remote components from the same page. */\n  name?: string;\n  /** The content of the remote component. This is the content that will be rendered as the remote component. */\n  children: React.ReactNode;\n}\n\n/**\n * ExposeRemoteComponent is a Next.js component that exposes a remote component\n * that can be used in a host application.\n *\n * @param name - The name of the remote component. Use a unique name to expose multiple remote components from the same page.\n * @param children - The content of the remote component. This is the content that will be rendered as the remote component.\n * @returns A React component that renders the remote component.\n *\n * @example\n *\n * Use the `<ExposeRemoteComponent>` in your Next.js App Router application to expose the children as a remote component:\n *\n * ```tsx\n * import { ExposeRemoteComponent } from 'remote-components/remote/nextjs/app';\n *\n * export default function MyPage() {\n *   return (\n *     <ExposeRemoteComponent>\n *       <h1>Hello from the remote component!</h1>\n *       <p>This is a remote component that can be used in a host application.</p>\n *     </ExposeRemoteComponent>\n *   );\n * }\n * ```\n */\nexport async function ExposeRemoteComponent({\n  name = DEFAULT_COMPONENT_NAME,\n  children,\n}: ExposeRemoteComponentProps): Promise<React.ReactElement> {\n  // access the internal Next.js work store to get the active page and route\n  const { page, route } = workAsyncStorage.getStore() ?? {\n    page: '/',\n    route: '/',\n  };\n\n  // get reference to the manifests from the global scope\n  const self = globalThis as typeof globalThis & {\n    [SERVER_ACTION_MANIFESTS_SINGLETON]?: {\n      clientReferenceManifestsPerPage?: Record<string, Manifest>;\n    };\n    [MANIFESTS_SINGLETON]?: {\n      clientReferenceManifestsPerRoute?: Map<string, Manifest>;\n    };\n    __RSC_MANIFEST?: Record<string, unknown>;\n    __RSC_SERVER_MANIFEST?: Record<string, unknown>;\n  };\n  const manifests =\n    self[MANIFESTS_SINGLETON] ?? self[SERVER_ACTION_MANIFESTS_SINGLETON] ?? {};\n  const manifest =\n    'clientReferenceManifestsPerRoute' in manifests\n      ? manifests.clientReferenceManifestsPerRoute?.get?.(route)\n      : 'clientReferenceManifestsPerPage' in manifests\n        ? manifests.clientReferenceManifestsPerPage?.[route]\n        : undefined;\n\n  // manually handle the internal Next.js manifest\n  self.__RSC_MANIFEST = self.__RSC_MANIFEST || {};\n  self.__RSC_MANIFEST[page] = self.__RSC_MANIFEST[page] || manifest;\n  self.__RSC_SERVER_MANIFEST = self.__RSC_SERVER_MANIFEST || {};\n  self.__RSC_SERVER_MANIFEST[page] =\n    self.__RSC_SERVER_MANIFEST[page] || manifest;\n\n  // get the client and SSR module mapping to be able to use client components in the remote component\n  const ssrModuleMapping = { ...manifest?.ssrModuleMapping };\n\n  // if the remote component is used in a hosting application, we need to mutate the module map to include the zone\n  const clientModules = Object.fromEntries(\n    Object.entries(manifest?.clientModules ?? {}).map(([key, value]) => {\n      // append a prefix to each entry in the module map to include the zone of the remote component\n      const remoteId = `[${PROJECT_ID}] ${value.id}`;\n      ssrModuleMapping[remoteId] = ssrModuleMapping[value.id];\n      // override the original id with the new remote id\n      return [\n        key,\n        {\n          ...value,\n          id: remoteId,\n          // prepend the current zone to the chunks to handle remote component chunk loading in Webpack\n          // this is required to avoid loading the wrong chunk in the host application\n          chunks: value.chunks.map((chunk) => `[${PROJECT_ID}] ${chunk}`),\n        },\n      ];\n    }),\n  );\n\n  // dynamically import the runtime specific RSC rendering functions and client component\n  const [\n    { renderToReadableStream: nextRenderToReadableStream },\n    { renderToReadableStream: legacyRenderToReadableStream },\n  ] = await Promise.all(\n    process.env.TURBOPACK\n      ? [\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-turbopack/server'),\n          ),\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-turbopack/server.edge'),\n          ),\n        ]\n      : [\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-webpack/server'),\n          ),\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-webpack/server.edge'),\n          ),\n        ],\n  );\n  const renderToReadableStream =\n    nextRenderToReadableStream ?? legacyRenderToReadableStream;\n\n  if (typeof renderToReadableStream !== 'function') {\n    throw new RemoteComponentsError(\n      'No valid `renderToReadableStream()` function found. Do you have Next.js installed?',\n    );\n  }\n\n  let error: Error | undefined;\n  // render the wrapped content of this component (children) into an RSC stream\n  const stream = renderToReadableStream(children, clientModules, {\n    onError(e) {\n      error = e;\n    },\n  });\n\n  const data = [];\n  const decoder = new TextDecoder();\n\n  // convert the stream to an array for safe passing to the client\n  for await (const chunk of stream as unknown as AsyncIterable<Uint8Array>) {\n    data.push(decoder.decode(chunk));\n  }\n\n  const runtime = process.env.TURBOPACK ? 'turbopack' : 'webpack';\n  const remoteComponentName = `${name}_${route.replace(/[/[\\].]/g, '_')}`;\n\n  return (\n    // wrap the remote component content into a div to know which part of the HTML belongs to the remote component\n    <div\n      data-bundle={PROJECT_ID}\n      data-route={route}\n      data-runtime={runtime}\n      data-type=\"nextjs\"\n      id={`${remoteComponentName}_ssr`}\n    >\n      <RemoteComponentSharedRemote name={remoteComponentName} />\n      {typeof error !== 'undefined' ? (\n        <>\n          <template\n            data-next-error-message={\n              error instanceof Error ? error.message : String(error)\n            }\n            data-next-error-stack={\n              error instanceof Error ? (error.stack ?? '') : ''\n            }\n          />\n          <Suspense fallback={null}>{children}</Suspense>\n        </>\n      ) : (\n        children\n      )}\n      {/* inject RSC flight data as <script> */}\n      <RemoteComponentData data={data} name={remoteComponentName} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/remote/nextjs/app.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport { workAsyncStorage } from 'next/dist/server/app-render/work-async-storage.external';\nimport { Suspense } from 'react';\nimport type { ConsumeLifecycleCallbacks } from '#internal/host/shared/config';\nimport { RemoteComponentSharedRemote } from '#internal/remote/nextjs/app-client';\nimport { DEFAULT_COMPONENT_NAME } from '#internal/runtime/constants';\nimport { RemoteComponentsError } from '#internal/utils/error';\nimport { resolveProjectIdFromEnv } from '#internal/utils/project-id-env';\n\ninterface Manifest {\n  clientModules?: Record<\n    string,\n    { id: string; name: string; chunks: string[]; async: boolean }\n  >;\n  moduleLoading: { prefix?: string; crossOrigin?: boolean | null };\n  ssrModuleMapping?: Record<string, unknown>;\n}\n\n// internal Next.js symbol to access the manifest which is stored in the global scope\nconst SERVER_ACTION_MANIFESTS_SINGLETON = Symbol.for(\n  'next.server.action-manifests',\n);\nconst MANIFESTS_SINGLETON = Symbol.for('next.server.manifests');\n\nconst PROJECT_ID = resolveProjectIdFromEnv();\n\nasync function tryImport<T>(importer: () => Promise<T>) {\n  try {\n    return (await importer()) as T;\n  } catch {\n    return {} as T;\n  }\n}\n\n// inject the RSC flight data into the HTML response using <script>\n// the RSC flight data is used to hydrate the remote component on the host\n// this approach is similar to an island architecture on the host\n// the remote component is static HTML until it is hydrated using this RSC flight data\nfunction RemoteComponentData({ name, data }: { name: string; data: string[] }) {\n  return (\n    <script id={`${name}_rsc`}>\n      {data\n        .map(\n          (chunk, i) =>\n            // make the data handling somewhat safe\n            `${\n              i === 0 ? `self[\"${name}\"]=self[\"${name}\"]||[];` : ''\n            }self[\"${name}\"].push(${JSON.stringify(chunk)});`,\n        )\n        .join('\\n')}\n    </script>\n  );\n}\n\n/**\n * Props for exposing a Next.js component as a remote component.\n *\n * Extends {@link ConsumeLifecycleCallbacks} so the consuming host can wire up lifecycle\n * events. The `children` prop is the component content to expose (required,\n * unlike host props where children are an optional loading fallback).\n */\nexport interface ExposeRemoteComponentProps extends ConsumeLifecycleCallbacks {\n  /** The name of the remote component. Use a unique name to expose multiple remote components from the same page. */\n  name?: string;\n  /** The content of the remote component. This is the content that will be rendered as the remote component. */\n  children: React.ReactNode;\n}\n\n/**\n * ExposeRemoteComponent is a Next.js component that exposes a remote component\n * that can be used in a host application.\n *\n * @param name - The name of the remote component. Use a unique name to expose multiple remote components from the same page.\n * @param children - The content of the remote component. This is the content that will be rendered as the remote component.\n * @returns A React component that renders the remote component.\n *\n * @example\n *\n * Use the `<ExposeRemoteComponent>` in your Next.js App Router application to expose the children as a remote component:\n *\n * ```tsx\n * import { ExposeRemoteComponent } from 'remote-components/remote/nextjs/app';\n *\n * export default function MyPage() {\n *   return (\n *     <ExposeRemoteComponent>\n *       <h1>Hello from the remote component!</h1>\n *       <p>This is a remote component that can be used in a host application.</p>\n *     </ExposeRemoteComponent>\n *   );\n * }\n * ```\n */\nexport async function ExposeRemoteComponent({\n  name = DEFAULT_COMPONENT_NAME,\n  children,\n}: ExposeRemoteComponentProps): Promise<React.ReactElement> {\n  // access the internal Next.js work store to get the active page and route\n  const { page, route } = workAsyncStorage.getStore() ?? {\n    page: '/',\n    route: '/',\n  };\n\n  // get reference to the manifests from the global scope\n  const self = globalThis as typeof globalThis & {\n    [SERVER_ACTION_MANIFESTS_SINGLETON]?: {\n      clientReferenceManifestsPerPage?: Record<string, Manifest>;\n    };\n    [MANIFESTS_SINGLETON]?: {\n      clientReferenceManifestsPerRoute?: Map<string, Manifest>;\n    };\n    __RSC_MANIFEST?: Record<string, unknown>;\n    __RSC_SERVER_MANIFEST?: Record<string, unknown>;\n  };\n  const manifests =\n    self[MANIFESTS_SINGLETON] ?? self[SERVER_ACTION_MANIFESTS_SINGLETON] ?? {};\n  const manifest =\n    'clientReferenceManifestsPerRoute' in manifests\n      ? manifests.clientReferenceManifestsPerRoute?.get?.(route)\n      : 'clientReferenceManifestsPerPage' in manifests\n        ? manifests.clientReferenceManifestsPerPage?.[route]\n        : undefined;\n\n  // manually handle the internal Next.js manifest\n  self.__RSC_MANIFEST = self.__RSC_MANIFEST || {};\n  self.__RSC_MANIFEST[page] = self.__RSC_MANIFEST[page] || manifest;\n  self.__RSC_SERVER_MANIFEST = self.__RSC_SERVER_MANIFEST || {};\n  self.__RSC_SERVER_MANIFEST[page] =\n    self.__RSC_SERVER_MANIFEST[page] || manifest;\n\n  // get the client and SSR module mapping to be able to use client components in the remote component\n  const ssrModuleMapping = { ...manifest?.ssrModuleMapping };\n\n  // if the remote component is used in a hosting application, we need to mutate the module map to include the zone\n  const clientModules = Object.fromEntries(\n    Object.entries(manifest?.clientModules ?? {}).map(([key, value]) => {\n      // append a prefix to each entry in the module map to include the zone of the remote component\n      const remoteId = `[${PROJECT_ID}] ${value.id}`;\n      ssrModuleMapping[remoteId] = ssrModuleMapping[value.id];\n      // override the original id with the new remote id\n      return [\n        key,\n        {\n          ...value,\n          id: remoteId,\n          // prepend the current zone to the chunks to handle remote component chunk loading in Webpack\n          // this is required to avoid loading the wrong chunk in the host application\n          chunks: value.chunks.map((chunk) => `[${PROJECT_ID}] ${chunk}`),\n        },\n      ];\n    }),\n  );\n\n  // dynamically import the runtime specific RSC rendering functions and client component\n  const [\n    { renderToReadableStream: nextRenderToReadableStream },\n    { renderToReadableStream: legacyRenderToReadableStream },\n  ] = await Promise.all(\n    process.env.TURBOPACK\n      ? [\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-turbopack/server'),\n          ),\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-turbopack/server.edge'),\n          ),\n        ]\n      : [\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-webpack/server'),\n          ),\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-webpack/server.edge'),\n          ),\n        ],\n  );\n  const renderToReadableStream =\n    nextRenderToReadableStream ?? legacyRenderToReadableStream;\n\n  if (typeof renderToReadableStream !== 'function') {\n    throw new RemoteComponentsError(\n      'No valid `renderToReadableStream()` function found. Do you have Next.js installed?',\n    );\n  }\n\n  let error: Error | undefined;\n  // render the wrapped content of this component (children) into an RSC stream\n  const stream = renderToReadableStream(children, clientModules, {\n    onError(e) {\n      error = e;\n    },\n  });\n\n  const data = [];\n  const decoder = new TextDecoder();\n\n  // convert the stream to an array for safe passing to the client\n  for await (const chunk of stream as unknown as AsyncIterable<Uint8Array>) {\n    data.push(decoder.decode(chunk));\n  }\n\n  const runtime = process.env.TURBOPACK ? 'turbopack' : 'webpack';\n  const remoteComponentName = `${name}_${route.replace(/[/[\\].]/g, '_')}`;\n\n  return (\n    // wrap the remote component content into a div to know which part of the HTML belongs to the remote component\n    <div\n      data-bundle={PROJECT_ID}\n      data-route={route}\n      data-runtime={runtime}\n      data-type=\"nextjs\"\n      id={`${remoteComponentName}_ssr`}\n    >\n      <RemoteComponentSharedRemote name={remoteComponentName} />\n      {typeof error !== 'undefined' ? (\n        <>\n          <template\n            data-next-error-message={\n              error instanceof Error ? error.message : String(error)\n            }\n            data-next-error-stack={\n              error instanceof Error ? (error.stack ?? '') : ''\n            }\n          />\n          <Suspense fallback={null}>{children}</Suspense>\n        </>\n      ) : (\n        children\n      )}\n      {/* inject RSC flight data as <script> */}\n      <RemoteComponentData data={data} name={remoteComponentName} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/remote/nextjs/pages.cjs

@@ -21,8 +21,9 @@ __export(pages_exports, {
   getExposeRemoteComponentProps: () => getExposeRemoteComponentProps
 });
 module.exports = __toCommonJS(pages_exports);
+var import_project_id_env = require("#internal/utils/project-id-env");
 var import_pages = require("#remote-components/remote/defaults/pages");
-const PROJECT_ID = process.env.REMOTE_COMPONENTS_PROJECT_ID || process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION || process.env.VERCEL_PROJECT_ID;
+const PROJECT_ID = (0, import_project_id_env.resolveProjectIdFromEnv)();
 function getExposeRemoteComponentProps() {
   return {
     __REMOTE_COMPONENT__: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/remote/nextjs/pages.ts"],"sourcesContent":["import { shared } from '#remote-components/remote/defaults/pages';\n\nconst PROJECT_ID =\n  process.env.REMOTE_COMPONENTS_PROJECT_ID ||\n  process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION ||\n  process.env.VERCEL_PROJECT_ID;\n\nexport interface ExposeRemoteComponentProps {\n  __REMOTE_COMPONENT__: {\n    bundle: string | undefined;\n    runtime: 'turbopack' | 'webpack';\n    shared?: Record<string, string>;\n  };\n}\n\n/**\n * Returns the metadata for the remote component.\n * This metadata is used to identify the remote component and its bundle.\n *\n * Extend your Next.js Pages Router page props with this metadata to ensure proper remote component loading.\n *\n * @returns The metadata for the remote component.\n *\n * @example\n *\n * Create a custom App component in your Next.js application to include the remote component metadata:\n *\n * ```\n * import {\n *   getExposeRemoteComponentProps,\n *   type ExposeRemoteComponentProps,\n * } from 'remote-components/remote/nextjs/pages';\n * import App from 'next/app';\n * import type { AppContext, AppInitialProps, AppProps } from 'next/app';\n *\n * export default function MyApp({ Component, pageProps }: AppProps) {\n *   return <Component {...pageProps} />;\n * }\n *\n * MyApp.getInitialProps = async (\n *   context: AppContext,\n * ): Promise<ExposeRemoteComponentProps & AppInitialProps> => {\n *   const ctx = await App.getInitialProps(context);\n *   return { ...ctx, ...getExposeRemoteComponentProps() };\n * };\n * ```\n */\nexport function getExposeRemoteComponentProps(): ExposeRemoteComponentProps {\n  return {\n    __REMOTE_COMPONENT__: {\n      bundle: PROJECT_ID,\n      runtime: process.env.TURBOPACK ? 'turbopack' : 'webpack',\n      shared,\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuB;AAEvB,MAAM,aACJ,QAAQ,IAAI,gCACZ,QAAQ,IAAI,uCACZ,QAAQ,IAAI;AA0CP,SAAS,gCAA4D;AAC1E,SAAO;AAAA,IACL,sBAAsB;AAAA,MACpB,QAAQ;AAAA,MACR,SAAS,QAAQ,IAAI,YAAY,cAAc;AAAA,MAC/C;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../src/remote/nextjs/pages.ts"],"sourcesContent":["import { resolveProjectIdFromEnv } from '#internal/utils/project-id-env';\nimport { shared } from '#remote-components/remote/defaults/pages';\n\nconst PROJECT_ID = resolveProjectIdFromEnv();\n\nexport interface ExposeRemoteComponentProps {\n  __REMOTE_COMPONENT__: {\n    bundle: string | undefined;\n    runtime: 'turbopack' | 'webpack';\n    shared?: Record<string, string>;\n  };\n}\n\n/**\n * Returns the metadata for the remote component.\n * This metadata is used to identify the remote component and its bundle.\n *\n * Extend your Next.js Pages Router page props with this metadata to ensure proper remote component loading.\n *\n * @returns The metadata for the remote component.\n *\n * @example\n *\n * Create a custom App component in your Next.js application to include the remote component metadata:\n *\n * ```\n * import {\n *   getExposeRemoteComponentProps,\n *   type ExposeRemoteComponentProps,\n * } from 'remote-components/remote/nextjs/pages';\n * import App from 'next/app';\n * import type { AppContext, AppInitialProps, AppProps } from 'next/app';\n *\n * export default function MyApp({ Component, pageProps }: AppProps) {\n *   return <Component {...pageProps} />;\n * }\n *\n * MyApp.getInitialProps = async (\n *   context: AppContext,\n * ): Promise<ExposeRemoteComponentProps & AppInitialProps> => {\n *   const ctx = await App.getInitialProps(context);\n *   return { ...ctx, ...getExposeRemoteComponentProps() };\n * };\n * ```\n */\nexport function getExposeRemoteComponentProps(): ExposeRemoteComponentProps {\n  return {\n    __REMOTE_COMPONENT__: {\n      bundle: PROJECT_ID,\n      runtime: process.env.TURBOPACK ? 'turbopack' : 'webpack',\n      shared,\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAAwC;AACxC,mBAAuB;AAEvB,MAAM,iBAAa,+CAAwB;AA0CpC,SAAS,gCAA4D;AAC1E,SAAO;AAAA,IACL,sBAAsB;AAAA,MACpB,QAAQ;AAAA,MACR,SAAS,QAAQ,IAAI,YAAY,cAAc;AAAA,MAC/C;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/dist/remote/nextjs/pages.js

@@ -1,5 +1,6 @@
+import { resolveProjectIdFromEnv } from "#internal/utils/project-id-env";
 import { shared } from "#remote-components/remote/defaults/pages";
-const PROJECT_ID = process.env.REMOTE_COMPONENTS_PROJECT_ID || process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION || process.env.VERCEL_PROJECT_ID;
+const PROJECT_ID = resolveProjectIdFromEnv();
 function getExposeRemoteComponentProps() {
   return {
     __REMOTE_COMPONENT__: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/remote/nextjs/pages.ts"],"sourcesContent":["import { shared } from '#remote-components/remote/defaults/pages';\n\nconst PROJECT_ID =\n  process.env.REMOTE_COMPONENTS_PROJECT_ID ||\n  process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION ||\n  process.env.VERCEL_PROJECT_ID;\n\nexport interface ExposeRemoteComponentProps {\n  __REMOTE_COMPONENT__: {\n    bundle: string | undefined;\n    runtime: 'turbopack' | 'webpack';\n    shared?: Record<string, string>;\n  };\n}\n\n/**\n * Returns the metadata for the remote component.\n * This metadata is used to identify the remote component and its bundle.\n *\n * Extend your Next.js Pages Router page props with this metadata to ensure proper remote component loading.\n *\n * @returns The metadata for the remote component.\n *\n * @example\n *\n * Create a custom App component in your Next.js application to include the remote component metadata:\n *\n * ```\n * import {\n *   getExposeRemoteComponentProps,\n *   type ExposeRemoteComponentProps,\n * } from 'remote-components/remote/nextjs/pages';\n * import App from 'next/app';\n * import type { AppContext, AppInitialProps, AppProps } from 'next/app';\n *\n * export default function MyApp({ Component, pageProps }: AppProps) {\n *   return <Component {...pageProps} />;\n * }\n *\n * MyApp.getInitialProps = async (\n *   context: AppContext,\n * ): Promise<ExposeRemoteComponentProps & AppInitialProps> => {\n *   const ctx = await App.getInitialProps(context);\n *   return { ...ctx, ...getExposeRemoteComponentProps() };\n * };\n * ```\n */\nexport function getExposeRemoteComponentProps(): ExposeRemoteComponentProps {\n  return {\n    __REMOTE_COMPONENT__: {\n      bundle: PROJECT_ID,\n      runtime: process.env.TURBOPACK ? 'turbopack' : 'webpack',\n      shared,\n    },\n  };\n}\n"],"mappings":"AAAA,SAAS,cAAc;AAEvB,MAAM,aACJ,QAAQ,IAAI,gCACZ,QAAQ,IAAI,uCACZ,QAAQ,IAAI;AA0CP,SAAS,gCAA4D;AAC1E,SAAO;AAAA,IACL,sBAAsB;AAAA,MACpB,QAAQ;AAAA,MACR,SAAS,QAAQ,IAAI,YAAY,cAAc;AAAA,MAC/C;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../src/remote/nextjs/pages.ts"],"sourcesContent":["import { resolveProjectIdFromEnv } from '#internal/utils/project-id-env';\nimport { shared } from '#remote-components/remote/defaults/pages';\n\nconst PROJECT_ID = resolveProjectIdFromEnv();\n\nexport interface ExposeRemoteComponentProps {\n  __REMOTE_COMPONENT__: {\n    bundle: string | undefined;\n    runtime: 'turbopack' | 'webpack';\n    shared?: Record<string, string>;\n  };\n}\n\n/**\n * Returns the metadata for the remote component.\n * This metadata is used to identify the remote component and its bundle.\n *\n * Extend your Next.js Pages Router page props with this metadata to ensure proper remote component loading.\n *\n * @returns The metadata for the remote component.\n *\n * @example\n *\n * Create a custom App component in your Next.js application to include the remote component metadata:\n *\n * ```\n * import {\n *   getExposeRemoteComponentProps,\n *   type ExposeRemoteComponentProps,\n * } from 'remote-components/remote/nextjs/pages';\n * import App from 'next/app';\n * import type { AppContext, AppInitialProps, AppProps } from 'next/app';\n *\n * export default function MyApp({ Component, pageProps }: AppProps) {\n *   return <Component {...pageProps} />;\n * }\n *\n * MyApp.getInitialProps = async (\n *   context: AppContext,\n * ): Promise<ExposeRemoteComponentProps & AppInitialProps> => {\n *   const ctx = await App.getInitialProps(context);\n *   return { ...ctx, ...getExposeRemoteComponentProps() };\n * };\n * ```\n */\nexport function getExposeRemoteComponentProps(): ExposeRemoteComponentProps {\n  return {\n    __REMOTE_COMPONENT__: {\n      bundle: PROJECT_ID,\n      runtime: process.env.TURBOPACK ? 'turbopack' : 'webpack',\n      shared,\n    },\n  };\n}\n"],"mappings":"AAAA,SAAS,+BAA+B;AACxC,SAAS,cAAc;AAEvB,MAAM,aAAa,wBAAwB;AA0CpC,SAAS,gCAA4D;AAC1E,SAAO;AAAA,IACL,sBAAsB;AAAA,MACpB,QAAQ;AAAA,MACR,SAAS,QAAQ,IAAI,YAAY,cAAc;AAAA,MAC/C;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/package.json

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

package/dist/internal/host/shared/resolved-data.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/host/shared/resolved-data.ts"],"sourcesContent":["import type * as React from 'react';\nimport type {\n  LinkDescriptor,\n  ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type { ShadowDomConfig } from '#internal/host/shared/config';\nimport type { RemoteComponentMetadata } from '#internal/runtime/metadata';\n\n/**\n * The subset of the remote component fetch response that the client-side\n * loader needs to hydrate or mount a remote component.\n *\n * Both {@link ConsumeRemoteComponentServerData} and {@link LoadRemoteComponentProps}\n * compose this interface — it is the shared base for the RSC→client handoff\n * and the loader function arguments.\n */\nexport interface RemoteComponentLoaderPayload {\n  name: string;\n  bundle: string;\n  route?: string;\n  runtime?: RemoteComponentMetadata['runtime'];\n  data: string[];\n  nextData?: {\n    props: { pageProps: Record<string, unknown> };\n    buildId?: string;\n  } | null;\n  scripts?: ScriptDescriptor[];\n  remoteShared?: Record<string, string>;\n}\n\n/**\n * Internal RSC→client handoff type for embedding a remote component.\n *\n * Combines the loader payload with Shadow DOM config and fields that are\n * only needed by the renderer (links, type) and host (src, serverUrl, children).\n * Produced by the server component, consumed by the client renderer.\n */\nexport interface ConsumeRemoteComponentServerData\n  extends RemoteComponentLoaderPayload,\n    ShadowDomConfig {\n  /** The src provided to the `<ConsumeRemoteComponent>` component, resolved to a string. */\n  src: string;\n  /** The src converted to a URL string. For relative URLs, the VERCEL_URL is used as the origin. */\n  serverUrl: string;\n  links?: LinkDescriptor[];\n  type?: RemoteComponentMetadata['type'];\n  children: React.ReactNode;\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/internal/host/shared/resolved-data.d.ts

@@ -1,48 +0,0 @@
-import * as react from 'react';
-import { ScriptDescriptor, LinkDescriptor } from './asset-descriptors.js';
-import { ShadowDomConfig } from './config.js';
-import { RemoteComponentMetadata } from '../../runtime/metadata.js';
-import '../../runtime/url/resolve-client-url.js';
-import './fetch-interceptors.js';
-
-/**
- * The subset of the remote component fetch response that the client-side
- * loader needs to hydrate or mount a remote component.
- *
- * Both {@link ConsumeRemoteComponentServerData} and {@link LoadRemoteComponentProps}
- * compose this interface — it is the shared base for the RSC→client handoff
- * and the loader function arguments.
- */
-interface RemoteComponentLoaderPayload {
-    name: string;
-    bundle: string;
-    route?: string;
-    runtime?: RemoteComponentMetadata['runtime'];
-    data: string[];
-    nextData?: {
-        props: {
-            pageProps: Record<string, unknown>;
-        };
-        buildId?: string;
-    } | null;
-    scripts?: ScriptDescriptor[];
-    remoteShared?: Record<string, string>;
-}
-/**
- * Internal RSC→client handoff type for embedding a remote component.
- *
- * Combines the loader payload with Shadow DOM config and fields that are
- * only needed by the renderer (links, type) and host (src, serverUrl, children).
- * Produced by the server component, consumed by the client renderer.
- */
-interface ConsumeRemoteComponentServerData extends RemoteComponentLoaderPayload, ShadowDomConfig {
-    /** The src provided to the `<ConsumeRemoteComponent>` component, resolved to a string. */
-    src: string;
-    /** The src converted to a URL string. For relative URLs, the VERCEL_URL is used as the origin. */
-    serverUrl: string;
-    links?: LinkDescriptor[];
-    type?: RemoteComponentMetadata['type'];
-    children: react.ReactNode;
-}
-
-export { ConsumeRemoteComponentServerData, RemoteComponentLoaderPayload };

package/dist/internal/host/shared/resolved-data.js

@@ -1 +0,0 @@
-//# sourceMappingURL=resolved-data.js.map

package/dist/internal/host/shared/resolved-data.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}