remote-components 0.3.2 → 0.3.4

package/dist/remote/nextjs/app.cjs

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var app_exports = {};
 __export(app_exports, {
@@ -33,25 +23,17 @@ __export(app_exports, {
 module.exports = __toCommonJS(app_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_wrapper = require("remote-components/remote/defaults/wrapper");
-var import_work_async_storage = require("next/dist/server/app-render/work-async-storage.external");
 var import_react = require("react");
 var import_app_client = require("#internal/remote/nextjs/app-client");
+var import_next_internals = require("#internal/remote/nextjs/next-internals");
 var import_constants = require("#internal/runtime/constants");
+var import_html_spec = require("#internal/runtime/html/html-spec");
+var import_rsc_imports = require("#internal/runtime/rsc-imports");
 var import_error = require("#internal/utils/error");
-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;
-async function tryImport(importer) {
-  try {
-    return await importer();
-  } catch {
-    return {};
-  }
-}
+var import_project_id_env = require("#internal/utils/project-id-env");
+const PROJECT_ID = (0, import_project_id_env.resolveProjectIdFromEnv)();
 function RemoteComponentData({ name, data }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", { id: `${name}_rsc`, children: data.map(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", { id: `${name}${import_html_spec.ID_SUFFIX_RSC}`, children: data.map(
     (chunk, i) => (
       // make the data handling somewhat safe
       `${i === 0 ? `self["${name}"]=self["${name}"]||[];` : ""}self["${name}"].push(${JSON.stringify(chunk)});`
@@ -62,13 +44,9 @@ async function ExposeRemoteComponent({
   name = import_constants.DEFAULT_COMPONENT_NAME,
   children
 }) {
-  const { page, route } = import_work_async_storage.workAsyncStorage.getStore() ?? {
-    page: "/",
-    route: "/"
-  };
+  const { page, route } = (0, import_next_internals.getWorkStore)();
+  const manifest = (0, import_next_internals.resolveManifest)(route);
   const self = globalThis;
-  const manifests = self[MANIFESTS_SINGLETON] ?? self[SERVER_ACTION_MANIFESTS_SINGLETON] ?? {};
-  const manifest = "clientReferenceManifestsPerRoute" in manifests ? manifests.clientReferenceManifestsPerRoute?.get?.(route) : "clientReferenceManifestsPerPage" in manifests ? manifests.clientReferenceManifestsPerPage?.[route] : void 0;
   self.__RSC_MANIFEST = self.__RSC_MANIFEST || {};
   self.__RSC_MANIFEST[page] = self.__RSC_MANIFEST[page] || manifest;
   self.__RSC_SERVER_MANIFEST = self.__RSC_SERVER_MANIFEST || {};
@@ -90,27 +68,7 @@ async function ExposeRemoteComponent({
       ];
     })
   );
-  const [
-    { renderToReadableStream: nextRenderToReadableStream },
-    { renderToReadableStream: legacyRenderToReadableStream }
-  ] = await Promise.all(
-    process.env.TURBOPACK ? [
-      tryImport(
-        () => import("react-server-dom-turbopack/server")
-      ),
-      tryImport(
-        () => import("react-server-dom-turbopack/server.edge")
-      )
-    ] : [
-      tryImport(
-        () => import("react-server-dom-webpack/server")
-      ),
-      tryImport(
-        () => import("react-server-dom-webpack/server.edge")
-      )
-    ]
-  );
-  const renderToReadableStream = nextRenderToReadableStream ?? legacyRenderToReadableStream;
+  const { renderToReadableStream } = await (0, import_rsc_imports.importRSCServer)();
   if (typeof renderToReadableStream !== "function") {
     throw new import_error.RemoteComponentsError(
       "No valid `renderToReadableStream()` function found. Do you have Next.js installed?"
@@ -134,11 +92,13 @@ async function ExposeRemoteComponent({
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
-        "data-bundle": PROJECT_ID,
-        "data-route": route,
-        "data-runtime": runtime,
-        "data-type": "nextjs",
-        id: `${remoteComponentName}_ssr`,
+        ...{
+          [import_html_spec.DATA_BUNDLE]: PROJECT_ID,
+          [import_html_spec.DATA_ROUTE]: route,
+          [import_html_spec.DATA_RUNTIME]: runtime,
+          [import_html_spec.DATA_TYPE]: "nextjs"
+        },
+        id: `${remoteComponentName}${import_html_spec.ID_SUFFIX_SSR}`,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_app_client.RemoteComponentSharedRemote, { name: remoteComponentName }),
           typeof error !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [

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 { Suspense } from 'react';\nimport type { ConsumeLifecycleCallbacks } from '#internal/host/shared/config';\nimport { RemoteComponentSharedRemote } from '#internal/remote/nextjs/app-client';\nimport {\n  getWorkStore,\n  resolveManifest,\n} from '#internal/remote/nextjs/next-internals';\nimport { DEFAULT_COMPONENT_NAME } from '#internal/runtime/constants';\nimport {\n  DATA_BUNDLE,\n  DATA_ROUTE,\n  DATA_RUNTIME,\n  DATA_TYPE,\n  ID_SUFFIX_RSC,\n  ID_SUFFIX_SSR,\n} from '#internal/runtime/html/html-spec';\nimport { importRSCServer } from '#internal/runtime/rsc-imports';\nimport { RemoteComponentsError } from '#internal/utils/error';\nimport { resolveProjectIdFromEnv } from '#internal/utils/project-id-env';\n\nconst PROJECT_ID = resolveProjectIdFromEnv();\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}${ID_SUFFIX_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  const { page, route } = getWorkStore();\n\n  const manifest = resolveManifest(route);\n\n  // Populate the global RSC manifest cache that Next.js reads during rendering\n  const self = globalThis as typeof globalThis & {\n    __RSC_MANIFEST?: Record<string, unknown>;\n    __RSC_SERVER_MANIFEST?: Record<string, unknown>;\n  };\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  const { renderToReadableStream } = await importRSCServer();\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      {...{\n        [DATA_BUNDLE]: PROJECT_ID,\n        [DATA_ROUTE]: route,\n        [DATA_RUNTIME]: runtime,\n        [DATA_TYPE]: 'nextjs',\n      }}\n      id={`${remoteComponentName}${ID_SUFFIX_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

@@ -1,24 +1,26 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "remote-components/remote/defaults/wrapper";
-import { workAsyncStorage } from "next/dist/server/app-render/work-async-storage.external";
 import { Suspense } from "react";
 import { RemoteComponentSharedRemote } from "#internal/remote/nextjs/app-client";
+import {
+  getWorkStore,
+  resolveManifest
+} from "#internal/remote/nextjs/next-internals";
 import { DEFAULT_COMPONENT_NAME } from "#internal/runtime/constants";
+import {
+  DATA_BUNDLE,
+  DATA_ROUTE,
+  DATA_RUNTIME,
+  DATA_TYPE,
+  ID_SUFFIX_RSC,
+  ID_SUFFIX_SSR
+} from "#internal/runtime/html/html-spec";
+import { importRSCServer } from "#internal/runtime/rsc-imports";
 import { RemoteComponentsError } from "#internal/utils/error";
-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;
-async function tryImport(importer) {
-  try {
-    return await importer();
-  } catch {
-    return {};
-  }
-}
+import { resolveProjectIdFromEnv } from "#internal/utils/project-id-env";
+const PROJECT_ID = resolveProjectIdFromEnv();
 function RemoteComponentData({ name, data }) {
-  return /* @__PURE__ */ jsx("script", { id: `${name}_rsc`, children: data.map(
+  return /* @__PURE__ */ jsx("script", { id: `${name}${ID_SUFFIX_RSC}`, children: data.map(
     (chunk, i) => (
       // make the data handling somewhat safe
       `${i === 0 ? `self["${name}"]=self["${name}"]||[];` : ""}self["${name}"].push(${JSON.stringify(chunk)});`
@@ -29,13 +31,9 @@ async function ExposeRemoteComponent({
   name = DEFAULT_COMPONENT_NAME,
   children
 }) {
-  const { page, route } = workAsyncStorage.getStore() ?? {
-    page: "/",
-    route: "/"
-  };
+  const { page, route } = getWorkStore();
+  const manifest = resolveManifest(route);
   const self = globalThis;
-  const manifests = self[MANIFESTS_SINGLETON] ?? self[SERVER_ACTION_MANIFESTS_SINGLETON] ?? {};
-  const manifest = "clientReferenceManifestsPerRoute" in manifests ? manifests.clientReferenceManifestsPerRoute?.get?.(route) : "clientReferenceManifestsPerPage" in manifests ? manifests.clientReferenceManifestsPerPage?.[route] : void 0;
   self.__RSC_MANIFEST = self.__RSC_MANIFEST || {};
   self.__RSC_MANIFEST[page] = self.__RSC_MANIFEST[page] || manifest;
   self.__RSC_SERVER_MANIFEST = self.__RSC_SERVER_MANIFEST || {};
@@ -57,27 +55,7 @@ async function ExposeRemoteComponent({
       ];
     })
   );
-  const [
-    { renderToReadableStream: nextRenderToReadableStream },
-    { renderToReadableStream: legacyRenderToReadableStream }
-  ] = await Promise.all(
-    process.env.TURBOPACK ? [
-      tryImport(
-        () => import("react-server-dom-turbopack/server")
-      ),
-      tryImport(
-        () => import("react-server-dom-turbopack/server.edge")
-      )
-    ] : [
-      tryImport(
-        () => import("react-server-dom-webpack/server")
-      ),
-      tryImport(
-        () => import("react-server-dom-webpack/server.edge")
-      )
-    ]
-  );
-  const renderToReadableStream = nextRenderToReadableStream ?? legacyRenderToReadableStream;
+  const { renderToReadableStream } = await importRSCServer();
   if (typeof renderToReadableStream !== "function") {
     throw new RemoteComponentsError(
       "No valid `renderToReadableStream()` function found. Do you have Next.js installed?"
@@ -101,11 +79,13 @@ async function ExposeRemoteComponent({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        "data-bundle": PROJECT_ID,
-        "data-route": route,
-        "data-runtime": runtime,
-        "data-type": "nextjs",
-        id: `${remoteComponentName}_ssr`,
+        ...{
+          [DATA_BUNDLE]: PROJECT_ID,
+          [DATA_ROUTE]: route,
+          [DATA_RUNTIME]: runtime,
+          [DATA_TYPE]: "nextjs"
+        },
+        id: `${remoteComponentName}${ID_SUFFIX_SSR}`,
         children: [
           /* @__PURE__ */ jsx(RemoteComponentSharedRemote, { name: remoteComponentName }),
           typeof error !== "undefined" ? /* @__PURE__ */ jsxs(Fragment, { children: [

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 { Suspense } from 'react';\nimport type { ConsumeLifecycleCallbacks } from '#internal/host/shared/config';\nimport { RemoteComponentSharedRemote } from '#internal/remote/nextjs/app-client';\nimport {\n  getWorkStore,\n  resolveManifest,\n} from '#internal/remote/nextjs/next-internals';\nimport { DEFAULT_COMPONENT_NAME } from '#internal/runtime/constants';\nimport {\n  DATA_BUNDLE,\n  DATA_ROUTE,\n  DATA_RUNTIME,\n  DATA_TYPE,\n  ID_SUFFIX_RSC,\n  ID_SUFFIX_SSR,\n} from '#internal/runtime/html/html-spec';\nimport { importRSCServer } from '#internal/runtime/rsc-imports';\nimport { RemoteComponentsError } from '#internal/utils/error';\nimport { resolveProjectIdFromEnv } from '#internal/utils/project-id-env';\n\nconst PROJECT_ID = resolveProjectIdFromEnv();\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}${ID_SUFFIX_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  const { page, route } = getWorkStore();\n\n  const manifest = resolveManifest(route);\n\n  // Populate the global RSC manifest cache that Next.js reads during rendering\n  const self = globalThis as typeof globalThis & {\n    __RSC_MANIFEST?: Record<string, unknown>;\n    __RSC_SERVER_MANIFEST?: Record<string, unknown>;\n  };\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  const { renderToReadableStream } = await importRSCServer();\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      {...{\n        [DATA_BUNDLE]: PROJECT_ID,\n        [DATA_ROUTE]: route,\n        [DATA_RUNTIME]: runtime,\n        [DATA_TYPE]: 'nextjs',\n      }}\n      id={`${remoteComponentName}${ID_SUFFIX_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/dist/types-59251814.d.ts

@@ -0,0 +1,94 @@
+import { RemoteComponentMetadata } from './internal/runtime/metadata.js';
+import { RemoteScope } from './internal/runtime/turbopack/remote-scope.js';
+
+/**
+ * Typed namespace for all remote-components runtime state.
+ *
+ * Consolidates scattered `globalThis` globals into a single object at
+ * `globalThis.__remote_components__`. Each property corresponds to a
+ * previously independent global — see inline `@see` tags for the original
+ * global name. Code that previously read from those globals still works
+ * because each migration writes through to both the namespace and the
+ * legacy global (pointing at the same underlying object).
+ */
+interface RemoteComponentsNamespace {
+    /** @see `__remote_component_scopes__` */
+    scopes: Map<string, RemoteScope>;
+    /** @see `__remote_components_turbopack_chunk_loader_promise__` */
+    chunkCache: Record<string, Promise<unknown>>;
+    /** @see `__remote_script_entrypoint_mount__` */
+    mountFns: Record<string, Set<MountOrUnmountFunction>>;
+    /** @see `__remote_script_entrypoint_unmount__` */
+    unmountFns: Record<string, Set<MountOrUnmountFunction>>;
+    /** @see `__remote_bundle_url__` */
+    bundleUrls: Record<string, string | URL>;
+    /** @see `__rc_module_registry__` */
+    moduleRegistry: Record<string, unknown>;
+    /** @see `__webpack_require_type__` */
+    dispatcherRuntime: string | undefined;
+    /** @see `__remote_component_host_shared_modules__` */
+    hostSharedModules: Record<string, () => Promise<unknown>>;
+    /** @see `__remote_next_css__` */
+    cssCache: Record<string, ChildNode[]>;
+    /** @see `__remote_components_shadowroot_*` */
+    shadowRoots: Record<string, ShadowRoot | null>;
+}
+/**
+ * Returns the single shared `RemoteComponentsNamespace` instance, creating
+ * it on first access. The namespace lives at `globalThis.__remote_components__`
+ * so every module in the page shares the same state regardless of how many
+ * copies of the library are loaded.
+ *
+ * On first initialization this function also handles backward compatibility
+ * with legacy globals:
+ * 1. **Adopt**: if a legacy global already exists (written by older code before
+ *    the namespace was created), its value becomes the initial namespace value.
+ * 2. **Alias**: legacy globals are assigned to point at the namespace's objects,
+ *    so older code that reads the legacy global sees the same reference.
+ */
+declare function getNamespace(): RemoteComponentsNamespace;
+
+interface GlobalScope {
+    /** Consolidated namespace — prefer `getNamespace()` over individual globals. */
+    __remote_components__?: RemoteComponentsNamespace;
+    __DISABLE_WEBPACK_EXEC__?: Record<string, boolean>;
+    __webpack_chunk_load__?: (chunkId: string, scriptBundle?: string) => Promise<unknown> | undefined;
+    __original_webpack_chunk_load__?: (chunkId: string, scriptBundle?: string) => Promise<unknown> | undefined;
+    __webpack_require__?: (id: string) => unknown;
+    __webpack_get_script_filename__?: (id: string) => string | null | undefined;
+    __original_webpack_require__?: (id: string) => unknown;
+    __remote_webpack_require__?: Record<string, ((remoteId: string | number) => unknown) & {
+        c?: Record<string | number, {
+            id: string;
+            parents: string[];
+            children: string[];
+        }>;
+        m?: Record<string | number, (module: {
+            exports: unknown;
+        }) => void>;
+        type?: 'turbopack' | 'webpack' | 'script';
+    }>;
+    /** @deprecated since 0.3.4 — use `getNamespace().dispatcherRuntime` instead. */
+    __webpack_require_type__?: RemoteComponentMetadata['runtime'];
+    /** @deprecated since 0.3.4 — use `getNamespace().bundleUrls` instead. */
+    __remote_bundle_url__?: Record<string, string | URL>;
+    /** @deprecated since 0.3.4 — use `getNamespace().chunkCache` instead. */
+    __remote_components_turbopack_chunk_loader_promise__?: Record<string, Promise<unknown>>;
+    /** @deprecated since 0.3.4 — use `getNamespace().scopes` instead. */
+    __remote_component_scopes__?: Map<string, unknown>;
+    [key: string]: unknown;
+}
+interface LoaderResult {
+    component: React.ReactNode;
+    error?: Error;
+}
+type RSCKey = `__remote_component_rsc_${string}__`;
+type MountOrUnmountFunction = (el?: ShadowRoot | DocumentFragment | HTMLElement | HTMLCollection | null) => Promise<void> | void;
+interface MountUnmountFunctions {
+    /** @deprecated since 0.3.4 — use `getNamespace().mountFns` instead. */
+    __remote_script_entrypoint_mount__?: Record<string, Set<MountOrUnmountFunction>>;
+    /** @deprecated since 0.3.4 — use `getNamespace().unmountFns` instead. */
+    __remote_script_entrypoint_unmount__?: Record<string, Set<MountOrUnmountFunction>>;
+}
+
+export { GlobalScope as G, LoaderResult as L, MountOrUnmountFunction as M, RemoteComponentsNamespace as R, RSCKey as a, MountUnmountFunctions as b, getNamespace as g };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remote-components",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "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/runtime/turbopack/webpack-runtime.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/runtime/turbopack/webpack-runtime.ts"],"sourcesContent":["import type { InternalResolveClientUrl } from '#internal/host/server/types';\nimport {\n  RUNTIME_TURBOPACK,\n  RUNTIME_WEBPACK,\n  type Runtime,\n} from '#internal/runtime/constants';\nimport { REMOTE_COMPONENT_REGEX } from '#internal/runtime/patterns';\nimport type { GlobalScope } from '#internal/runtime/types';\nimport { RemoteComponentsError } from '#internal/utils/error';\nimport { logDebug, logWarn } from '#internal/utils/logger';\nimport { createChunkDispatcher, loadChunkWithScope } from './chunk-loader';\nimport { requireModule } from './module';\nimport { createScope, getScope, registerScope } from './remote-scope';\nimport { initializeSharedModules } from './shared-modules';\n\n/**\n * Sets up webpack runtime environment for remote components.\n *\n * Creates a RemoteScope that encapsulates all per-remote state (base URL,\n * proxy callback, module cache, shared modules) and registers it in the\n * global scope registry. Global dispatchers (__webpack_require__,\n * __webpack_chunk_load__) are set once and route to the correct scope.\n *\n * @param runtime - The bundler runtime type ('webpack' or 'turbopack')\n * @param scripts - Initial script chunks to load for Turbopack runtime\n * @param url - Base URL for the remote component bundle\n * @param bundle - Bundle identifier (defaults to 'default')\n * @param shared - Host-provided shared modules (e.g., React)\n * @param remoteShared - Mapping of remote module IDs to shared module names\n */\nexport async function setupWebpackRuntime(\n  runtime: Runtime,\n  scripts: { src: string | null }[] = [],\n  url: URL = new URL(location.href),\n  bundle?: string,\n  shared: Record<string, () => Promise<unknown>> = {},\n  remoteShared: Record<string, string> = {},\n  resolveClientUrl?: InternalResolveClientUrl,\n): Promise<void> {\n  const self = globalThis as GlobalScope;\n  const bundleName = bundle ?? 'default';\n\n  // Create and register a scope for this remote\n  const scope = createScope(bundleName, url, runtime, resolveClientUrl);\n  registerScope(scope);\n\n  // Still needed by patch-require.ts (webpack plugin that generates runtime\n  // code as a string template — can't call getScope at build time) and the\n  // HTML host (html/index.tsx writes this before setupWebpackRuntime runs).\n  if (!self.__remote_bundle_url__) {\n    self.__remote_bundle_url__ = {};\n  }\n  self.__remote_bundle_url__[bundleName] = url;\n  // Also register under scopedName so webpack hosts (patch-require.ts) can\n  // resolve cross-origin remotes whose bundle identifiers were rewritten.\n  if (scope.scopedName !== bundleName) {\n    self.__remote_bundle_url__[scope.scopedName] = url;\n  }\n  self.__webpack_get_script_filename__ = () => null;\n\n  const willCreateDispatchers =\n    typeof self.__webpack_require__ !== 'function' ||\n    self.__webpack_require_type__ !== 'turbopack';\n\n  if (willCreateDispatchers) {\n    // preserve original webpack functions for fallback\n    if (\n      !self.__original_webpack_require__ &&\n      !self.__original_webpack_chunk_load__\n    ) {\n      self.__original_webpack_chunk_load__ = self.__webpack_chunk_load__;\n      self.__original_webpack_require__ = self.__webpack_require__;\n    }\n\n    self.__webpack_chunk_load__ = createChunkDispatcher();\n    self.__webpack_require__ = createModuleDispatcher(runtime);\n    self.__webpack_require_type__ = runtime;\n\n    if (self.__remote_webpack_require__ && runtime === RUNTIME_TURBOPACK) {\n      self.__remote_webpack_require__[bundleName] =\n        self.__webpack_require__ as (remoteId: string | number) => unknown;\n      self.__remote_webpack_require__[bundleName].type = 'turbopack';\n    }\n  }\n\n  // Alias __remote_webpack_require__ under the scoped name so the module\n  // dispatcher can find it when RSC data uses the rewritten bundle identifier.\n  // For turbopack remotes the entry was just created above; for webpack remotes\n  // it was populated by the remote's own scripts under the plain name.\n  if (\n    self.__remote_webpack_require__?.[bundleName] &&\n    scope.scopedName !== bundleName\n  ) {\n    self.__remote_webpack_require__[scope.scopedName] =\n      self.__remote_webpack_require__[bundleName];\n  }\n\n  // load all initial chunks directly via scope — no global dispatch needed\n  if (runtime === RUNTIME_TURBOPACK) {\n    const results = await Promise.allSettled(\n      scripts.map((script) => {\n        if (script.src) {\n          return loadChunkWithScope(scope, script.src);\n        }\n        return Promise.resolve(undefined);\n      }),\n    );\n\n    for (const result of results) {\n      if (result.status === 'rejected') {\n        logWarn(\n          'WebpackRuntime',\n          `Initial chunk load failed: ${String(result.reason)}`,\n        );\n      }\n    }\n  }\n\n  // initialize shared modules with core React dependencies\n  const coreShared = {\n    react: async () => (await import('react')).default,\n    'react-dom': async () => (await import('react-dom')).default,\n    'react/jsx-dev-runtime': async () =>\n      (await import('react/jsx-dev-runtime')).default,\n    'react/jsx-runtime': async () =>\n      (await import('react/jsx-runtime')).default,\n    'react-dom/client': async () => (await import('react-dom/client')).default,\n    ...shared,\n  };\n  await initializeSharedModules(scope, coreShared, remoteShared);\n}\n\n/**\n * Creates the global module dispatcher for __webpack_require__.\n * Called by external code (React's RSC runtime) that doesn't have access to\n * a scope. Parses the module ID to find the correct scope and delegates\n * to scope-local module resolution.\n */\nfunction createModuleDispatcher(runtime: Runtime): (id: string) => unknown {\n  return (id: string) => {\n    const self = globalThis as GlobalScope;\n    const { bundle, id: moduleId } = id.match(REMOTE_COMPONENT_REGEX)\n      ?.groups ?? {\n      bundle: 'default',\n      id,\n    };\n    const bundleName = bundle ?? 'default';\n    const remoteRuntime = self.__remote_webpack_require__?.[bundleName]\n      ? self.__remote_webpack_require__[bundleName]?.type || 'webpack'\n      : runtime;\n\n    logDebug(\n      'ModuleDispatcher',\n      `Resolving \"${id}\" (bundle: \"${bundleName}\", runtime: \"${remoteRuntime}\")`,\n    );\n\n    try {\n      // for webpack remotes, use the pre-loaded require function\n      if (remoteRuntime === RUNTIME_WEBPACK && bundle && moduleId) {\n        return self.__remote_webpack_require__?.[bundle]?.(moduleId);\n      }\n\n      // Look up scope by parsed bundle name. Works with both the scoped\n      // name (Next.js hosts with server-side rewriting) and the plain\n      // bundle name (static/HTML hosts with unrewritten chunks).\n      const scope = getScope(bundleName);\n      if (scope) {\n        return requireModule(scope, moduleId ?? id, id);\n      }\n\n      throw new Error(\n        `Module \"${id}\" not found — no scope for bundle \"${bundleName}\".`,\n      );\n    } catch (requireError) {\n      logWarn(\n        'ModuleDispatcher',\n        `Module require failed: ${String(requireError)}`,\n      );\n      if (typeof self.__original_webpack_require__ !== 'function') {\n        throw new RemoteComponentsError(\n          `Module \"${id}\" not found in remote component bundle \"${bundleName}\".`,\n          {\n            cause: requireError instanceof Error ? requireError : undefined,\n          },\n        );\n      }\n      try {\n        logDebug(\n          'ModuleDispatcher',\n          'Falling back to original webpack require',\n        );\n        return self.__original_webpack_require__(id);\n      } catch (originalError) {\n        throw new RemoteComponentsError(\n          `Module \"${id}\" not found in remote component bundle \"${bundleName}\".`,\n          { cause: originalError instanceof Error ? originalError : undefined },\n        );\n      }\n    }\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/internal/runtime/turbopack/webpack-runtime.d.ts

@@ -1,23 +0,0 @@
-import { InternalResolveClientUrl } from '../url/resolve-client-url.js';
-import { Runtime } from '../constants.js';
-
-/**
- * Sets up webpack runtime environment for remote components.
- *
- * Creates a RemoteScope that encapsulates all per-remote state (base URL,
- * proxy callback, module cache, shared modules) and registers it in the
- * global scope registry. Global dispatchers (__webpack_require__,
- * __webpack_chunk_load__) are set once and route to the correct scope.
- *
- * @param runtime - The bundler runtime type ('webpack' or 'turbopack')
- * @param scripts - Initial script chunks to load for Turbopack runtime
- * @param url - Base URL for the remote component bundle
- * @param bundle - Bundle identifier (defaults to 'default')
- * @param shared - Host-provided shared modules (e.g., React)
- * @param remoteShared - Mapping of remote module IDs to shared module names
- */
-declare function setupWebpackRuntime(runtime: Runtime, scripts?: {
-    src: string | null;
-}[], url?: URL, bundle?: string, shared?: Record<string, () => Promise<unknown>>, remoteShared?: Record<string, string>, resolveClientUrl?: InternalResolveClientUrl): Promise<void>;
-
-export { setupWebpackRuntime };

package/dist/internal/runtime/turbopack/webpack-runtime.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/runtime/turbopack/webpack-runtime.ts"],"sourcesContent":["import type { InternalResolveClientUrl } from '#internal/host/server/types';\nimport {\n  RUNTIME_TURBOPACK,\n  RUNTIME_WEBPACK,\n  type Runtime,\n} from '#internal/runtime/constants';\nimport { REMOTE_COMPONENT_REGEX } from '#internal/runtime/patterns';\nimport type { GlobalScope } from '#internal/runtime/types';\nimport { RemoteComponentsError } from '#internal/utils/error';\nimport { logDebug, logWarn } from '#internal/utils/logger';\nimport { createChunkDispatcher, loadChunkWithScope } from './chunk-loader';\nimport { requireModule } from './module';\nimport { createScope, getScope, registerScope } from './remote-scope';\nimport { initializeSharedModules } from './shared-modules';\n\n/**\n * Sets up webpack runtime environment for remote components.\n *\n * Creates a RemoteScope that encapsulates all per-remote state (base URL,\n * proxy callback, module cache, shared modules) and registers it in the\n * global scope registry. Global dispatchers (__webpack_require__,\n * __webpack_chunk_load__) are set once and route to the correct scope.\n *\n * @param runtime - The bundler runtime type ('webpack' or 'turbopack')\n * @param scripts - Initial script chunks to load for Turbopack runtime\n * @param url - Base URL for the remote component bundle\n * @param bundle - Bundle identifier (defaults to 'default')\n * @param shared - Host-provided shared modules (e.g., React)\n * @param remoteShared - Mapping of remote module IDs to shared module names\n */\nexport async function setupWebpackRuntime(\n  runtime: Runtime,\n  scripts: { src: string | null }[] = [],\n  url: URL = new URL(location.href),\n  bundle?: string,\n  shared: Record<string, () => Promise<unknown>> = {},\n  remoteShared: Record<string, string> = {},\n  resolveClientUrl?: InternalResolveClientUrl,\n): Promise<void> {\n  const self = globalThis as GlobalScope;\n  const bundleName = bundle ?? 'default';\n\n  // Create and register a scope for this remote\n  const scope = createScope(bundleName, url, runtime, resolveClientUrl);\n  registerScope(scope);\n\n  // Still needed by patch-require.ts (webpack plugin that generates runtime\n  // code as a string template — can't call getScope at build time) and the\n  // HTML host (html/index.tsx writes this before setupWebpackRuntime runs).\n  if (!self.__remote_bundle_url__) {\n    self.__remote_bundle_url__ = {};\n  }\n  self.__remote_bundle_url__[bundleName] = url;\n  // Also register under scopedName so webpack hosts (patch-require.ts) can\n  // resolve cross-origin remotes whose bundle identifiers were rewritten.\n  if (scope.scopedName !== bundleName) {\n    self.__remote_bundle_url__[scope.scopedName] = url;\n  }\n  self.__webpack_get_script_filename__ = () => null;\n\n  const willCreateDispatchers =\n    typeof self.__webpack_require__ !== 'function' ||\n    self.__webpack_require_type__ !== 'turbopack';\n\n  if (willCreateDispatchers) {\n    // preserve original webpack functions for fallback\n    if (\n      !self.__original_webpack_require__ &&\n      !self.__original_webpack_chunk_load__\n    ) {\n      self.__original_webpack_chunk_load__ = self.__webpack_chunk_load__;\n      self.__original_webpack_require__ = self.__webpack_require__;\n    }\n\n    self.__webpack_chunk_load__ = createChunkDispatcher();\n    self.__webpack_require__ = createModuleDispatcher(runtime);\n    self.__webpack_require_type__ = runtime;\n\n    if (self.__remote_webpack_require__ && runtime === RUNTIME_TURBOPACK) {\n      self.__remote_webpack_require__[bundleName] =\n        self.__webpack_require__ as (remoteId: string | number) => unknown;\n      self.__remote_webpack_require__[bundleName].type = 'turbopack';\n    }\n  }\n\n  // Alias __remote_webpack_require__ under the scoped name so the module\n  // dispatcher can find it when RSC data uses the rewritten bundle identifier.\n  // For turbopack remotes the entry was just created above; for webpack remotes\n  // it was populated by the remote's own scripts under the plain name.\n  if (\n    self.__remote_webpack_require__?.[bundleName] &&\n    scope.scopedName !== bundleName\n  ) {\n    self.__remote_webpack_require__[scope.scopedName] =\n      self.__remote_webpack_require__[bundleName];\n  }\n\n  // load all initial chunks directly via scope — no global dispatch needed\n  if (runtime === RUNTIME_TURBOPACK) {\n    const results = await Promise.allSettled(\n      scripts.map((script) => {\n        if (script.src) {\n          return loadChunkWithScope(scope, script.src);\n        }\n        return Promise.resolve(undefined);\n      }),\n    );\n\n    for (const result of results) {\n      if (result.status === 'rejected') {\n        logWarn(\n          'WebpackRuntime',\n          `Initial chunk load failed: ${String(result.reason)}`,\n        );\n      }\n    }\n  }\n\n  // initialize shared modules with core React dependencies\n  const coreShared = {\n    react: async () => (await import('react')).default,\n    'react-dom': async () => (await import('react-dom')).default,\n    'react/jsx-dev-runtime': async () =>\n      (await import('react/jsx-dev-runtime')).default,\n    'react/jsx-runtime': async () =>\n      (await import('react/jsx-runtime')).default,\n    'react-dom/client': async () => (await import('react-dom/client')).default,\n    ...shared,\n  };\n  await initializeSharedModules(scope, coreShared, remoteShared);\n}\n\n/**\n * Creates the global module dispatcher for __webpack_require__.\n * Called by external code (React's RSC runtime) that doesn't have access to\n * a scope. Parses the module ID to find the correct scope and delegates\n * to scope-local module resolution.\n */\nfunction createModuleDispatcher(runtime: Runtime): (id: string) => unknown {\n  return (id: string) => {\n    const self = globalThis as GlobalScope;\n    const { bundle, id: moduleId } = id.match(REMOTE_COMPONENT_REGEX)\n      ?.groups ?? {\n      bundle: 'default',\n      id,\n    };\n    const bundleName = bundle ?? 'default';\n    const remoteRuntime = self.__remote_webpack_require__?.[bundleName]\n      ? self.__remote_webpack_require__[bundleName]?.type || 'webpack'\n      : runtime;\n\n    logDebug(\n      'ModuleDispatcher',\n      `Resolving \"${id}\" (bundle: \"${bundleName}\", runtime: \"${remoteRuntime}\")`,\n    );\n\n    try {\n      // for webpack remotes, use the pre-loaded require function\n      if (remoteRuntime === RUNTIME_WEBPACK && bundle && moduleId) {\n        return self.__remote_webpack_require__?.[bundle]?.(moduleId);\n      }\n\n      // Look up scope by parsed bundle name. Works with both the scoped\n      // name (Next.js hosts with server-side rewriting) and the plain\n      // bundle name (static/HTML hosts with unrewritten chunks).\n      const scope = getScope(bundleName);\n      if (scope) {\n        return requireModule(scope, moduleId ?? id, id);\n      }\n\n      throw new Error(\n        `Module \"${id}\" not found — no scope for bundle \"${bundleName}\".`,\n      );\n    } catch (requireError) {\n      logWarn(\n        'ModuleDispatcher',\n        `Module require failed: ${String(requireError)}`,\n      );\n      if (typeof self.__original_webpack_require__ !== 'function') {\n        throw new RemoteComponentsError(\n          `Module \"${id}\" not found in remote component bundle \"${bundleName}\".`,\n          {\n            cause: requireError instanceof Error ? requireError : undefined,\n          },\n        );\n      }\n      try {\n        logDebug(\n          'ModuleDispatcher',\n          'Falling back to original webpack require',\n        );\n        return self.__original_webpack_require__(id);\n      } catch (originalError) {\n        throw new RemoteComponentsError(\n          `Module \"${id}\" not found in remote component bundle \"${bundleName}\".`,\n          { cause: originalError instanceof Error ? originalError : undefined },\n        );\n      }\n    }\n  };\n}\n"],"mappings":"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","names":[]}