remote-components 0.0.23 → 0.0.25

package/dist/next/config.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/next/config/index.ts","../../src/next/config/webpack/index.ts","../../src/next/config/webpack/plugins/remote-webpack-require-runtime-module.ts","../../src/next/config/webpack/plugins/remote-webpack-require.ts","../../src/next/config/webpack/plugins/module-id-embed.ts","../../src/next/config/webpack/plugins/module-id-embed-runtime-module.ts","../../src/next/config/webpack/plugins/conditional-exec.ts","../../src/next/config/webpack/plugins/patch-require.ts"],"sourcesContent":["import { basename, dirname, join, relative } from 'node:path';\nimport { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';\nimport enhancedResolve from 'enhanced-resolve';\nimport { findUpSync } from 'find-up';\nimport type { NextConfig } from 'next';\nimport { configSchema } from 'next/dist/server/config-schema.js';\nimport TsConfigPathsWebpackPlugin from 'tsconfig-paths-webpack-plugin';\nimport { transform as webpackTransform } from './webpack';\n\ninterface ZodSchema {\n  safeParse: (data: unknown) => { success: boolean };\n}\n\ninterface WithRemoteComponentsOptions {\n  /**\n   * An array of package names that should be shared between the host and remote components.\n   * This is useful for ensuring that both the host and remote components use the same version\n   * of shared libraries.\n   *\n   * Essential packages are included by default: `react`, `react-dom`, `next/navigation`, `next/link`, `next/form`, `next/image`, and `next/script`.\n   */\n  shared?: string[];\n}\n\n/**\n * This function configures Next.js to support Remote Components.\n * You need to also use the `withMicrofrontends` function to extend your Next.js configuration.\n *\n * @param nextConfig - The Next.js configuration object.\n * @param options - Optional configuration for remote components.\n * @returns The modified Next.js configuration object with remote components support.\n *\n * @example\n *\n * ```js\n * import { withMicrofrontends } from '@vercel/microfrontends/next/config';\n * import { withRemoteComponents } from 'remote-components/next/config';\n *\n * const nextConfig = {\n *   // your Next.js configuration\n * };\n *\n * export default withRemoteComponents(\n *   withMicrofrontends(nextConfig),\n *   {\n *     shared: ['some-package', 'another-package'],\n *   },\n * );\n * ```\n */\nexport function withRemoteComponents(\n  nextConfig: NextConfig,\n  options?: WithRemoteComponentsOptions,\n) {\n  const virtualRemoteComponentSharedRemote = join(\n    process.cwd(),\n    nextConfig.distDir ?? '.next',\n    'remote-components/shared/remote.tsx',\n  );\n  const virtualRemoteComponentAppSharedHost = join(\n    process.cwd(),\n    nextConfig.distDir ?? '.next',\n    'remote-components/shared/app-host.tsx',\n  );\n  const virtualRemoteComponentPagesSharedHost = join(\n    process.cwd(),\n    nextConfig.distDir ?? '.next',\n    'remote-components/shared/pages-host.tsx',\n  );\n\n  const appShared = new Set([\n    ...[\n      'react',\n      'react/jsx-dev-runtime',\n      'react/jsx-runtime',\n      'react-dom',\n      'react-dom/client',\n      'next/navigation',\n      'next/dist/client/components/navigation',\n      'next/link',\n      'next/dist/client/app-dir/link',\n      'next/form',\n      'next/dist/client/app-dir/form',\n      'next/image',\n      'next/dist/client/image-component',\n      'next/dist/api/image',\n      'next/script',\n      'next/dist/client/script',\n    ],\n    ...(options?.shared ?? []),\n  ]);\n  const pagesShared = new Set([\n    ...[\n      'react',\n      'react/jsx-dev-runtime',\n      'react/jsx-runtime',\n      'react-dom',\n      'react-dom/client',\n    ],\n    ...(options?.shared ?? []),\n  ]);\n\n  const vendorShared: Record<string, string> = {\n    react: `'/react/index.js'`,\n    'react/jsx-dev-runtime': `'/react/jsx-dev-runtime.js'`,\n    'react/jsx-runtime': `'/react/jsx-runtime.js'`,\n    'react-dom': `'/react-dom/index.js'`,\n  };\n\n  // resolve using enhanced-resolve\n  // named import does not work with enhanced-resolve when using cjs\n  // eslint-disable-next-line import/no-named-as-default-member\n  const resolve = enhancedResolve.create.sync({\n    conditionNames: ['browser', 'import', 'module', 'require'],\n    ...(existsSync(join(process.cwd(), 'tsconfig.json'))\n      ? {\n          extensions: ['.js', '.jsx', '.ts', '.tsx'],\n          plugins: [\n            new TsConfigPathsWebpackPlugin({\n              configFile: join(process.cwd(), 'tsconfig.json'),\n            }) as unknown as enhancedResolve.Plugin,\n          ],\n        }\n      : {}),\n  });\n  const sharedRemote = `'use client';\\nmodule.exports = { shared: { ${Array.from(\n    appShared,\n  )\n    .reduce<string[]>((acc, curr) => {\n      let path;\n      try {\n        path = resolve(process.cwd(), curr);\n        if (path) {\n          path = relative(process.cwd(), path).replace(\n            /^(?<relative>\\.\\.\\/)+/,\n            '',\n          );\n        }\n      } catch {\n        // noop\n        // if module resolution using enhanced-resolve fails, fallback to require.resolve called in the shared/remote file\n      }\n      acc.push(\n        `[${vendorShared[curr] ?? (path ? `'${path}'` : `require.resolve('${curr}')`)}]: '${curr}',`,\n      );\n      acc.push(`['__remote_shared_module_${curr}']: () => import('${curr}'),`);\n      return acc;\n    }, [])\n    .join('\\n')} } };\\n`;\n\n  const appSharedHost = `'use client';\\nmodule.exports = { shared: { ${Array.from(\n    appShared,\n  )\n    .reduce<string[]>((acc, curr) => {\n      acc.push(`['${curr}']: () => import('${curr}'),`);\n      return acc;\n    }, [])\n    .join('\\n')} } };\\n`;\n\n  const pagesSharedHost = `'use client';\\nmodule.exports = { shared: { ${Array.from(\n    pagesShared,\n  )\n    .reduce<string[]>((acc, curr) => {\n      acc.push(`['${curr}']: () => import('${curr}'),`);\n      return acc;\n    }, [])\n    .join('\\n')} } };\\n`;\n\n  const emitSharedFiles = () => {\n    mkdirSync(dirname(virtualRemoteComponentSharedRemote), {\n      recursive: true,\n    });\n\n    writeFileSync(virtualRemoteComponentSharedRemote, sharedRemote, 'utf-8');\n    writeFileSync(virtualRemoteComponentAppSharedHost, appSharedHost, 'utf-8');\n    writeFileSync(\n      virtualRemoteComponentPagesSharedHost,\n      pagesSharedHost,\n      'utf-8',\n    );\n  };\n\n  nextConfig.transpilePackages = [\n    ...(nextConfig.transpilePackages ?? []),\n    'remote-components/next',\n    'remote-components/next/remote',\n    'remote-components/next/host',\n    'remote-components/next/host/pages-router',\n    'remote-components/next/host/client',\n    '@remote-components/shared/remote',\n    '@remote-components/shared/host',\n  ];\n\n  const alias = {\n    '@remote-components/shared/remote': `./${relative(\n      process.cwd(),\n      virtualRemoteComponentSharedRemote,\n    )}`,\n    '@remote-components/shared/host/app': `./${relative(\n      process.cwd(),\n      virtualRemoteComponentAppSharedHost,\n    )}`,\n    '@remote-components/shared/host/pages': `./${relative(\n      process.cwd(),\n      virtualRemoteComponentPagesSharedHost,\n    )}`,\n  };\n\n  let projectId =\n    process.env.REMOTE_COMPONENTS_PROJECT_ID ||\n    process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION ||\n    process.env.VERCEL_PROJECT_ID;\n\n  if (!projectId) {\n    try {\n      const projectPath = findUpSync('.vercel/project.json', {\n        cwd: process.cwd(),\n      });\n      if (projectPath) {\n        projectId = (\n          JSON.parse(readFileSync(projectPath, 'utf8')) as { projectId: string }\n        ).projectId;\n      }\n    } catch {\n      // fallback to env‑var above\n    }\n  }\n\n  if (!projectId) {\n    const packageJsonPath = findUpSync('package.json', {\n      cwd: process.cwd(),\n    });\n    if (packageJsonPath) {\n      const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8')) as {\n        name?: string;\n      };\n      projectId = packageJson.name || basename(process.cwd());\n    } else {\n      projectId = basename(process.cwd());\n    }\n  }\n\n  process.env.REMOTE_COMPONENTS_PROJECT_ID = projectId;\n\n  if (process.env.TURBOPACK) {\n    if (\n      !(configSchema as ZodSchema).safeParse({\n        turbopack: {\n          moduleIds: 'named',\n          resolveAlias: {\n            ...alias,\n          },\n        },\n        compiler: {\n          defineServer: {\n            REMOTE_COMPONENTS_PROJECT_ID: projectId,\n          },\n        },\n      }).success\n    ) {\n      // eslint-disable-next-line no-console\n      console.error(\n        'You need to use a Next.js version which supports the `turbopack` and `compiler.defineServer` configuration for Turbopack support with Remote Components.',\n      );\n      process.exit(1);\n    }\n    nextConfig.turbopack = {\n      ...nextConfig.turbopack,\n      moduleIds: 'named',\n      resolveAlias: {\n        ...nextConfig.turbopack?.resolveAlias,\n        ...alias,\n      },\n    };\n    nextConfig.compiler = {\n      ...nextConfig.compiler,\n      defineServer: {\n        ...nextConfig.compiler?.defineServer,\n        'process.env.REMOTE_COMPONENTS_PROJECT_ID': projectId,\n      },\n    };\n    emitSharedFiles();\n    return nextConfig;\n  }\n\n  // apply the webpack transform\n  return webpackTransform(nextConfig, {\n    app: { name: projectId },\n    alias,\n    emitSharedFiles,\n  });\n}\n","import { join } from 'node:path';\nimport type { NextConfig } from 'next';\nimport type { WebpackOptionsNormalized } from 'webpack';\nimport { RemoteWebpackRequirePlugin } from './plugins/remote-webpack-require';\nimport { ModuleIdEmbedPlugin } from './plugins/module-id-embed';\nimport { ConditionalExecPlugin } from './plugins/conditional-exec';\nimport { PatchRequirePlugin } from './plugins/patch-require';\n\nexport function transform(\n  nextConfig: NextConfig,\n  {\n    app,\n    alias = {},\n    emitSharedFiles = () => {\n      // no-op by default\n    },\n  }: {\n    app: { name: string };\n    alias?: Record<string, string>;\n    emitSharedFiles?: () => void;\n  },\n) {\n  const webpackConfig = nextConfig.webpack;\n\n  nextConfig.webpack = (\n    baseConfig: WebpackOptionsNormalized,\n    webpackContext,\n  ) => {\n    // execute the client config first, otherwise their config may accidentally\n    // overwrite our required config - leading to unexpected errors.\n    const config = (\n      typeof webpackConfig === 'function'\n        ? (webpackConfig(baseConfig, webpackContext) ?? baseConfig)\n        : baseConfig\n    ) as WebpackOptionsNormalized;\n\n    // remote component specific plugins\n    config.plugins.push(\n      new RemoteWebpackRequirePlugin(app.name),\n      new ModuleIdEmbedPlugin(app.name),\n      new ConditionalExecPlugin(app.name),\n      new PatchRequirePlugin(),\n    );\n    if (!webpackContext.isServer) {\n      // change the chunk loading global to avoid conflicts with other remote components\n      config.output.chunkLoadingGlobal = `__remote_chunk_loading_global_${app.name}__`;\n    }\n\n    config.resolve = {\n      ...config.resolve,\n      alias: {\n        ...config.resolve.alias,\n        ...Object.fromEntries(\n          Object.entries(alias).map(([key, value]) => [\n            key,\n            join(process.cwd(), value),\n          ]),\n        ),\n      },\n    };\n\n    emitSharedFiles();\n    return config;\n  };\n\n  return nextConfig;\n}\n","export function createRemoteWebpackRequireRuntimeModule(webpack: {\n  RuntimeModule: new (name: string, stage?: number) => object;\n}) {\n  return class RemoteWebpackRequireRuntimeModule extends webpack.RuntimeModule {\n    appName: string;\n\n    constructor(appName: string) {\n      super('remote-webpack-require');\n      this.appName = appName;\n    }\n\n    generate(): null | string {\n      return `globalThis.__remote_webpack_require__ = globalThis.__remote_webpack_require__ || {}; globalThis.__remote_webpack_require__[\"${this.appName}\"] = __webpack_require__;`;\n    }\n  };\n}\n","import type { Compiler, RuntimeModule } from 'webpack';\nimport { createRemoteWebpackRequireRuntimeModule } from './remote-webpack-require-runtime-module';\n\nexport class RemoteWebpackRequirePlugin {\n  appName: string;\n\n  constructor(appName: string) {\n    this.appName = appName;\n  }\n\n  apply(compiler: Compiler) {\n    const RemoteWebpackRequireRuntimeModule =\n      createRemoteWebpackRequireRuntimeModule(compiler.webpack);\n\n    compiler.hooks.thisCompilation.tap(\n      'RemoteWebpackRequirePlugin',\n      (compilation) => {\n        compilation.hooks.runtimeRequirementInTree\n          .for('__webpack_require__')\n          .tap('RemoteWebpackRequirePlugin', (chunk) => {\n            compilation.addRuntimeModule(\n              chunk,\n              new RemoteWebpackRequireRuntimeModule(\n                this.appName,\n              ) as unknown as RuntimeModule,\n            );\n          });\n      },\n    );\n  }\n}\n","import { relative } from 'node:path';\nimport type { NormalModule, Compiler, RuntimeModule } from 'webpack';\nimport { createModuleIdEmbedRuntimeModule } from './module-id-embed-runtime-module';\n\nconst cwd = process.cwd();\n\nexport class ModuleIdEmbedPlugin {\n  appName: string;\n\n  constructor(appName: string) {\n    this.appName = appName;\n  }\n\n  apply(compiler: Compiler) {\n    const ModuleIdEmbedRuntimeModule = createModuleIdEmbedRuntimeModule(\n      compiler.webpack,\n    );\n\n    compiler.hooks.thisCompilation.tap('ModuleIdEmbedPlugin', (compilation) => {\n      const moduleMap = {} as Record<string, string | number>;\n\n      compilation.hooks.runtimeRequirementInTree\n        .for(compiler.webpack.RuntimeGlobals.require)\n        .tap('ModuleIdEmbedPlugin', (chunk, set) => {\n          for (const [key, entry] of compilation.entrypoints) {\n            for (const entryChunk of entry.chunks) {\n              if (key.includes('nextjs-pages-remote')) {\n                for (const mod of compilation.chunkGraph.getChunkModulesIterable(\n                  entryChunk,\n                )) {\n                  const id = compilation.chunkGraph.getModuleId(mod);\n                  const normalModule = mod as NormalModule;\n                  if (id && (normalModule.resource || normalModule.request)) {\n                    moduleMap[\n                      relative(\n                        cwd,\n                        normalModule.resource || normalModule.request,\n                      )\n                    ] = id;\n                  }\n                }\n              }\n            }\n          }\n          for (const mod of compilation.modules) {\n            const id = compilation.chunkGraph.getModuleId(mod);\n            if (id && mod.layer?.endsWith('browser')) {\n              const normalModule = mod as NormalModule;\n              if (normalModule.resource || normalModule.request) {\n                moduleMap[\n                  relative(cwd, normalModule.resource || normalModule.request)\n                ] = id;\n              }\n            }\n          }\n\n          if (Object.keys(moduleMap).length > 0) {\n            compilation.addRuntimeModule(\n              chunk,\n              new ModuleIdEmbedRuntimeModule(\n                this.appName,\n                moduleMap,\n              ) as unknown as RuntimeModule,\n            );\n\n            set.add(compiler.webpack.RuntimeGlobals.require);\n          }\n        });\n    });\n  }\n}\n","export function createModuleIdEmbedRuntimeModule(webpack: {\n  RuntimeModule: new (name: string, stage?: number) => object;\n}) {\n  return class ModuleIdEmbedRuntimeModule extends webpack.RuntimeModule {\n    appName: string;\n    moduleMap: Record<string | number, unknown>;\n\n    constructor(appName: string, moduleMap: Record<string | number, unknown>) {\n      super('remote-webpack-module-id-embed');\n      this.appName = appName;\n      this.moduleMap = moduleMap;\n    }\n\n    generate(): null | string {\n      return `globalThis.__remote_webpack_module_map__ = globalThis.__remote_webpack_module_map__ || {}; globalThis.__remote_webpack_module_map__[\"${this.appName}\"] = ${JSON.stringify(this.moduleMap)};`;\n    }\n  };\n}\n","import type { Compiler } from 'webpack';\n\nexport class ConditionalExecPlugin {\n  appName: string;\n\n  constructor(appName: string) {\n    this.appName = appName;\n  }\n\n  apply(compiler: Compiler) {\n    const { Compilation, sources } = compiler.webpack;\n\n    compiler.hooks.thisCompilation.tap(\n      'ConditionalExecPlugin',\n      (compilation) => {\n        compilation.hooks.processAssets.tap(\n          {\n            name: 'ConditionalExecPlugin',\n            stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,\n          },\n          (assets) => {\n            for (const [name, source] of Object.entries(assets)) {\n              if (name.endsWith('.js')) {\n                const patchedSource = source\n                  .source()\n                  .toString()\n                  .replace(\n                    `var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))`,\n                    `var __webpack_exec__ = (moduleId) => { if (globalThis.__DISABLE_WEBPACK_EXEC__ && globalThis.__DISABLE_WEBPACK_EXEC__[\"${this.appName}\"]) return; return __webpack_require__(__webpack_require__.s = moduleId); }`,\n                  );\n                compilation.updateAsset(\n                  name,\n                  new sources.RawSource(patchedSource),\n                );\n              }\n            }\n          },\n        );\n      },\n    );\n  }\n}\n","import type { Compiler } from 'webpack';\n\n// This plugin patches the webpack require function to support loading remote components in Next.js\nexport class PatchRequirePlugin {\n  apply(compiler: Compiler) {\n    const { sources } = compiler.webpack;\n\n    compiler.hooks.thisCompilation.tap('PatchRequirePlugin', (compilation) => {\n      compilation.mainTemplate.hooks.requireExtensions.tap(\n        'PatchRequirePlugin',\n        (source) => {\n          return new sources.ConcatSource(\n            source,\n            `const __webpack_require_orig__ = __webpack_require__;\nconst REMOTE_RE = /\\\\[(?<bundle>[^\\\\]]+)\\\\] (?<id>.*)/;\n__webpack_require__ = function __remote_webpack_require__(remoteId) {\n    const match = REMOTE_RE.exec(remoteId);\n    const bundle = match?.groups?.bundle;\n    const id = match?.groups?.id;\n    if (!(id && bundle)) {\n        return __webpack_require_orig__(remoteId);\n    }\n    if (typeof self.__remote_webpack_require__?.[bundle] !== 'function') {\n        throw new Error(\\`Remote component loading error: \"\\${bundle}\"\\`);\n    }\n    return self.__remote_webpack_require__[bundle](self.__remote_webpack_require__[bundle].type === 'turbopack' ? remoteId : id);\n};\nObject.assign(__webpack_require__, __webpack_require_orig__);\nconst __webpack_require_l__ = __webpack_require__.l;\n__webpack_require__.l = function __remote_webpack_require_l__(url, done, key, chunkId) {\n    const match = REMOTE_RE.exec(chunkId);\n    const bundle = match?.groups?.bundle;\n    const id = match?.groups?.id;\n    if (!(id && bundle)) {\n        return __webpack_require_l__(url, done, key, chunkId);\n    }\n    return done();\n};\nconst __webpack_require_o__ = __webpack_require__.o;\n__webpack_require__.o = function __remote_webpack_require_o__(installedChunks, chunkId) {\n    const match = REMOTE_RE.exec(chunkId);\n    const bundle = match?.groups?.bundle;\n    const id = match?.groups?.id;\n    if (!(id && bundle)) {\n        return __webpack_require_o__(installedChunks, chunkId);\n    }\n    return installedChunks[chunkId] = 0;\n};\nconst __webpack_require_e__ = __webpack_require__.e;\n__webpack_require__.e = function __remote_webpack_require_e__(chunkId) {\n    const match = REMOTE_RE.exec(chunkId);\n    const bundle = match?.groups?.bundle;\n    const id = match?.groups?.id;\n    if (!(id && bundle)) {\n        return __webpack_require_e__(chunkId);\n    }\n    return Promise.resolve([]);\n};`,\n          )\n            .source()\n            .toString();\n        },\n      );\n    });\n  }\n}\n"],"mappings":";AAAA,SAAS,UAAU,SAAS,QAAAA,OAAM,YAAAC,iBAAgB;AAClD,SAAS,YAAY,WAAW,cAAc,qBAAqB;AACnE,OAAO,qBAAqB;AAC5B,SAAS,kBAAkB;AAE3B,SAAS,oBAAoB;AAC7B,OAAO,gCAAgC;;;ACNvC,SAAS,YAAY;;;ACAd,SAAS,wCAAwC,SAErD;AACD,SAAO,MAAM,0CAA0C,QAAQ,cAAc;AAAA,IAG3E,YAAY,SAAiB;AAC3B,YAAM,wBAAwB;AAC9B,WAAK,UAAU;AAAA,IACjB;AAAA,IAEA,WAA0B;AACxB,aAAO,+HAA+H,KAAK;AAAA,IAC7I;AAAA,EACF;AACF;;;ACZO,IAAM,6BAAN,MAAiC;AAAA,EAGtC,YAAY,SAAiB;AAC3B,SAAK,UAAU;AAAA,EACjB;AAAA,EAEA,MAAM,UAAoB;AACxB,UAAM,oCACJ,wCAAwC,SAAS,OAAO;AAE1D,aAAS,MAAM,gBAAgB;AAAA,MAC7B;AAAA,MACA,CAAC,gBAAgB;AACf,oBAAY,MAAM,yBACf,IAAI,qBAAqB,EACzB,IAAI,8BAA8B,CAAC,UAAU;AAC5C,sBAAY;AAAA,YACV;AAAA,YACA,IAAI;AAAA,cACF,KAAK;AAAA,YACP;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACL;AAAA,IACF;AAAA,EACF;AACF;;;AC9BA,SAAS,gBAAgB;;;ACAlB,SAAS,iCAAiC,SAE9C;AACD,SAAO,MAAM,mCAAmC,QAAQ,cAAc;AAAA,IAIpE,YAAY,SAAiB,WAA6C;AACxE,YAAM,gCAAgC;AACtC,WAAK,UAAU;AACf,WAAK,YAAY;AAAA,IACnB;AAAA,IAEA,WAA0B;AACxB,aAAO,wIAAwI,KAAK,eAAe,KAAK,UAAU,KAAK,SAAS;AAAA,IAClM;AAAA,EACF;AACF;;;ADbA,IAAM,MAAM,QAAQ,IAAI;AAEjB,IAAM,sBAAN,MAA0B;AAAA,EAG/B,YAAY,SAAiB;AAC3B,SAAK,UAAU;AAAA,EACjB;AAAA,EAEA,MAAM,UAAoB;AACxB,UAAM,6BAA6B;AAAA,MACjC,SAAS;AAAA,IACX;AAEA,aAAS,MAAM,gBAAgB,IAAI,uBAAuB,CAAC,gBAAgB;AACzE,YAAM,YAAY,CAAC;AAEnB,kBAAY,MAAM,yBACf,IAAI,SAAS,QAAQ,eAAe,OAAO,EAC3C,IAAI,uBAAuB,CAAC,OAAO,QAAQ;AAC1C,mBAAW,CAAC,KAAK,KAAK,KAAK,YAAY,aAAa;AAClD,qBAAW,cAAc,MAAM,QAAQ;AACrC,gBAAI,IAAI,SAAS,qBAAqB,GAAG;AACvC,yBAAW,OAAO,YAAY,WAAW;AAAA,gBACvC;AAAA,cACF,GAAG;AACD,sBAAM,KAAK,YAAY,WAAW,YAAY,GAAG;AACjD,sBAAM,eAAe;AACrB,oBAAI,OAAO,aAAa,YAAY,aAAa,UAAU;AACzD,4BACE;AAAA,oBACE;AAAA,oBACA,aAAa,YAAY,aAAa;AAAA,kBACxC,CACF,IAAI;AAAA,gBACN;AAAA,cACF;AAAA,YACF;AAAA,UACF;AAAA,QACF;AACA,mBAAW,OAAO,YAAY,SAAS;AACrC,gBAAM,KAAK,YAAY,WAAW,YAAY,GAAG;AACjD,cAAI,MAAM,IAAI,OAAO,SAAS,SAAS,GAAG;AACxC,kBAAM,eAAe;AACrB,gBAAI,aAAa,YAAY,aAAa,SAAS;AACjD,wBACE,SAAS,KAAK,aAAa,YAAY,aAAa,OAAO,CAC7D,IAAI;AAAA,YACN;AAAA,UACF;AAAA,QACF;AAEA,YAAI,OAAO,KAAK,SAAS,EAAE,SAAS,GAAG;AACrC,sBAAY;AAAA,YACV;AAAA,YACA,IAAI;AAAA,cACF,KAAK;AAAA,cACL;AAAA,YACF;AAAA,UACF;AAEA,cAAI,IAAI,SAAS,QAAQ,eAAe,OAAO;AAAA,QACjD;AAAA,MACF,CAAC;AAAA,IACL,CAAC;AAAA,EACH;AACF;;;AEpEO,IAAM,wBAAN,MAA4B;AAAA,EAGjC,YAAY,SAAiB;AAC3B,SAAK,UAAU;AAAA,EACjB;AAAA,EAEA,MAAM,UAAoB;AACxB,UAAM,EAAE,aAAa,QAAQ,IAAI,SAAS;AAE1C,aAAS,MAAM,gBAAgB;AAAA,MAC7B;AAAA,MACA,CAAC,gBAAgB;AACf,oBAAY,MAAM,cAAc;AAAA,UAC9B;AAAA,YACE,MAAM;AAAA,YACN,OAAO,YAAY;AAAA,UACrB;AAAA,UACA,CAAC,WAAW;AACV,uBAAW,CAAC,MAAM,MAAM,KAAK,OAAO,QAAQ,MAAM,GAAG;AACnD,kBAAI,KAAK,SAAS,KAAK,GAAG;AACxB,sBAAM,gBAAgB,OACnB,OAAO,EACP,SAAS,EACT;AAAA,kBACC;AAAA,kBACA,0HAA0H,KAAK;AAAA,gBACjI;AACF,4BAAY;AAAA,kBACV;AAAA,kBACA,IAAI,QAAQ,UAAU,aAAa;AAAA,gBACrC;AAAA,cACF;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;;;ACtCO,IAAM,qBAAN,MAAyB;AAAA,EAC9B,MAAM,UAAoB;AACxB,UAAM,EAAE,QAAQ,IAAI,SAAS;AAE7B,aAAS,MAAM,gBAAgB,IAAI,sBAAsB,CAAC,gBAAgB;AACxE,kBAAY,aAAa,MAAM,kBAAkB;AAAA,QAC/C;AAAA,QACA,CAAC,WAAW;AACV,iBAAO,IAAI,QAAQ;AAAA,YACjB;AAAA,YACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UA6CF,EACG,OAAO,EACP,SAAS;AAAA,QACd;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AACF;;;ANzDO,SAAS,UACd,YACA;AAAA,EACE;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,kBAAkB,MAAM;AAAA,EAExB;AACF,GAKA;AACA,QAAM,gBAAgB,WAAW;AAEjC,aAAW,UAAU,CACnB,YACA,mBACG;AAGH,UAAM,SACJ,OAAO,kBAAkB,aACpB,cAAc,YAAY,cAAc,KAAK,aAC9C;AAIN,WAAO,QAAQ;AAAA,MACb,IAAI,2BAA2B,IAAI,IAAI;AAAA,MACvC,IAAI,oBAAoB,IAAI,IAAI;AAAA,MAChC,IAAI,sBAAsB,IAAI,IAAI;AAAA,MAClC,IAAI,mBAAmB;AAAA,IACzB;AACA,QAAI,CAAC,eAAe,UAAU;AAE5B,aAAO,OAAO,qBAAqB,iCAAiC,IAAI;AAAA,IAC1E;AAEA,WAAO,UAAU;AAAA,MACf,GAAG,OAAO;AAAA,MACV,OAAO;AAAA,QACL,GAAG,OAAO,QAAQ;AAAA,QAClB,GAAG,OAAO;AAAA,UACR,OAAO,QAAQ,KAAK,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAAA,YAC1C;AAAA,YACA,KAAK,QAAQ,IAAI,GAAG,KAAK;AAAA,UAC3B,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAEA,oBAAgB;AAChB,WAAO;AAAA,EACT;AAEA,SAAO;AACT;;;ADhBO,SAAS,qBACd,YACA,SACA;AACA,QAAM,qCAAqCC;AAAA,IACzC,QAAQ,IAAI;AAAA,IACZ,WAAW,WAAW;AAAA,IACtB;AAAA,EACF;AACA,QAAM,sCAAsCA;AAAA,IAC1C,QAAQ,IAAI;AAAA,IACZ,WAAW,WAAW;AAAA,IACtB;AAAA,EACF;AACA,QAAM,wCAAwCA;AAAA,IAC5C,QAAQ,IAAI;AAAA,IACZ,WAAW,WAAW;AAAA,IACtB;AAAA,EACF;AAEA,QAAM,YAAY,oBAAI,IAAI;AAAA,IACxB,GAAG;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,GAAI,SAAS,UAAU,CAAC;AAAA,EAC1B,CAAC;AACD,QAAM,cAAc,oBAAI,IAAI;AAAA,IAC1B,GAAG;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,GAAI,SAAS,UAAU,CAAC;AAAA,EAC1B,CAAC;AAED,QAAM,eAAuC;AAAA,IAC3C,OAAO;AAAA,IACP,yBAAyB;AAAA,IACzB,qBAAqB;AAAA,IACrB,aAAa;AAAA,EACf;AAKA,QAAM,UAAU,gBAAgB,OAAO,KAAK;AAAA,IAC1C,gBAAgB,CAAC,WAAW,UAAU,UAAU,SAAS;AAAA,IACzD,GAAI,WAAWA,MAAK,QAAQ,IAAI,GAAG,eAAe,CAAC,IAC/C;AAAA,MACE,YAAY,CAAC,OAAO,QAAQ,OAAO,MAAM;AAAA,MACzC,SAAS;AAAA,QACP,IAAI,2BAA2B;AAAA,UAC7B,YAAYA,MAAK,QAAQ,IAAI,GAAG,eAAe;AAAA,QACjD,CAAC;AAAA,MACH;AAAA,IACF,IACA,CAAC;AAAA,EACP,CAAC;AACD,QAAM,eAAe;AAAA,+BAA+C,MAAM;AAAA,IACxE;AAAA,EACF,EACG,OAAiB,CAAC,KAAK,SAAS;AAC/B,QAAI;AACJ,QAAI;AACF,aAAO,QAAQ,QAAQ,IAAI,GAAG,IAAI;AAClC,UAAI,MAAM;AACR,eAAOC,UAAS,QAAQ,IAAI,GAAG,IAAI,EAAE;AAAA,UACnC;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,IACF,QAAE;AAAA,IAGF;AACA,QAAI;AAAA,MACF,IAAI,aAAa,IAAI,MAAM,OAAO,IAAI,UAAU,oBAAoB,gBAAgB;AAAA,IACtF;AACA,QAAI,KAAK,4BAA4B,yBAAyB,SAAS;AACvE,WAAO;AAAA,EACT,GAAG,CAAC,CAAC,EACJ,KAAK,IAAI;AAAA;AAEZ,QAAM,gBAAgB;AAAA,+BAA+C,MAAM;AAAA,IACzE;AAAA,EACF,EACG,OAAiB,CAAC,KAAK,SAAS;AAC/B,QAAI,KAAK,KAAK,yBAAyB,SAAS;AAChD,WAAO;AAAA,EACT,GAAG,CAAC,CAAC,EACJ,KAAK,IAAI;AAAA;AAEZ,QAAM,kBAAkB;AAAA,+BAA+C,MAAM;AAAA,IAC3E;AAAA,EACF,EACG,OAAiB,CAAC,KAAK,SAAS;AAC/B,QAAI,KAAK,KAAK,yBAAyB,SAAS;AAChD,WAAO;AAAA,EACT,GAAG,CAAC,CAAC,EACJ,KAAK,IAAI;AAAA;AAEZ,QAAM,kBAAkB,MAAM;AAC5B,cAAU,QAAQ,kCAAkC,GAAG;AAAA,MACrD,WAAW;AAAA,IACb,CAAC;AAED,kBAAc,oCAAoC,cAAc,OAAO;AACvE,kBAAc,qCAAqC,eAAe,OAAO;AACzE;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,aAAW,oBAAoB;AAAA,IAC7B,GAAI,WAAW,qBAAqB,CAAC;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,QAAQ;AAAA,IACZ,oCAAoC,KAAKA;AAAA,MACvC,QAAQ,IAAI;AAAA,MACZ;AAAA,IACF;AAAA,IACA,sCAAsC,KAAKA;AAAA,MACzC,QAAQ,IAAI;AAAA,MACZ;AAAA,IACF;AAAA,IACA,wCAAwC,KAAKA;AAAA,MAC3C,QAAQ,IAAI;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AAEA,MAAI,YACF,QAAQ,IAAI,gCACZ,QAAQ,IAAI,uCACZ,QAAQ,IAAI;AAEd,MAAI,CAAC,WAAW;AACd,QAAI;AACF,YAAM,cAAc,WAAW,wBAAwB;AAAA,QACrD,KAAK,QAAQ,IAAI;AAAA,MACnB,CAAC;AACD,UAAI,aAAa;AACf,oBACE,KAAK,MAAM,aAAa,aAAa,MAAM,CAAC,EAC5C;AAAA,MACJ;AAAA,IACF,QAAE;AAAA,IAEF;AAAA,EACF;AAEA,MAAI,CAAC,WAAW;AACd,UAAM,kBAAkB,WAAW,gBAAgB;AAAA,MACjD,KAAK,QAAQ,IAAI;AAAA,IACnB,CAAC;AACD,QAAI,iBAAiB;AACnB,YAAM,cAAc,KAAK,MAAM,aAAa,iBAAiB,MAAM,CAAC;AAGpE,kBAAY,YAAY,QAAQ,SAAS,QAAQ,IAAI,CAAC;AAAA,IACxD,OAAO;AACL,kBAAY,SAAS,QAAQ,IAAI,CAAC;AAAA,IACpC;AAAA,EACF;AAEA,UAAQ,IAAI,+BAA+B;AAE3C,MAAI,QAAQ,IAAI,WAAW;AACzB,QACE,CAAE,aAA2B,UAAU;AAAA,MACrC,WAAW;AAAA,QACT,WAAW;AAAA,QACX,cAAc;AAAA,UACZ,GAAG;AAAA,QACL;AAAA,MACF;AAAA,MACA,UAAU;AAAA,QACR,cAAc;AAAA,UACZ,8BAA8B;AAAA,QAChC;AAAA,MACF;AAAA,IACF,CAAC,EAAE,SACH;AAEA,cAAQ;AAAA,QACN;AAAA,MACF;AACA,cAAQ,KAAK,CAAC;AAAA,IAChB;AACA,eAAW,YAAY;AAAA,MACrB,GAAG,WAAW;AAAA,MACd,WAAW;AAAA,MACX,cAAc;AAAA,QACZ,GAAG,WAAW,WAAW;AAAA,QACzB,GAAG;AAAA,MACL;AAAA,IACF;AACA,eAAW,WAAW;AAAA,MACpB,GAAG,WAAW;AAAA,MACd,cAAc;AAAA,QACZ,GAAG,WAAW,UAAU;AAAA,QACxB,4CAA4C;AAAA,MAC9C;AAAA,IACF;AACA,oBAAgB;AAChB,WAAO;AAAA,EACT;AAGA,SAAO,UAAiB,YAAY;AAAA,IAClC,KAAK,EAAE,MAAM,UAAU;AAAA,IACvB;AAAA,IACA;AAAA,EACF,CAAC;AACH;","names":["join","relative","join","relative"]}
+{"version":3,"sources":["../../src/next/config/index.ts","../../src/next/config/webpack/index.ts","../../src/next/config/webpack/plugins/remote-webpack-require-runtime-module.ts","../../src/next/config/webpack/plugins/remote-webpack-require.ts","../../src/next/config/webpack/plugins/module-id-embed.ts","../../src/next/config/webpack/plugins/module-id-embed-runtime-module.ts","../../src/next/config/webpack/plugins/conditional-exec.ts","../../src/next/config/webpack/plugins/patch-require.ts"],"sourcesContent":["import { basename, dirname, join, relative } from 'node:path';\nimport { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';\nimport enhancedResolve from 'enhanced-resolve';\nimport { findUpSync } from 'find-up';\nimport type { NextConfig } from 'next';\nimport { configSchema } from 'next/dist/server/config-schema.js';\nimport TsConfigPathsWebpackPlugin from 'tsconfig-paths-webpack-plugin';\nimport { transform as webpackTransform } from './webpack';\n\ninterface ZodSchema {\n  safeParse: (data: unknown) => { success: boolean };\n}\n\ninterface WithRemoteComponentsOptions {\n  /**\n   * An array of package names that should be shared between the host and remote components.\n   * This is useful for ensuring that both the host and remote components use the same version\n   * of shared libraries.\n   *\n   * Essential packages are included by default: `react`, `react-dom`, `next/navigation`, `next/link`, `next/form`, `next/image`, and `next/script`.\n   */\n  shared?: string[];\n}\n\n/**\n * This function configures Next.js to support Remote Components.\n * You need to also use the `withMicrofrontends` function to extend your Next.js configuration.\n *\n * @param nextConfig - The Next.js configuration object.\n * @param options - Optional configuration for remote components.\n * @returns The modified Next.js configuration object with remote components support.\n *\n * @example\n *\n * ```js\n * import { withMicrofrontends } from '@vercel/microfrontends/next/config';\n * import { withRemoteComponents } from 'remote-components/next/config';\n *\n * const nextConfig = {\n *   // your Next.js configuration\n * };\n *\n * export default withRemoteComponents(\n *   withMicrofrontends(nextConfig),\n *   {\n *     shared: ['some-package', 'another-package'],\n *   },\n * );\n * ```\n */\nexport function withRemoteComponents(\n  nextConfig: NextConfig,\n  options?: WithRemoteComponentsOptions,\n) {\n  const virtualRemoteComponentAppSharedRemote = join(\n    process.cwd(),\n    nextConfig.distDir ?? '.next',\n    'remote-components/shared/app-remote.tsx',\n  );\n  const virtualRemoteComponentPagesSharedRemote = join(\n    process.cwd(),\n    nextConfig.distDir ?? '.next',\n    'remote-components/shared/pages-remote.tsx',\n  );\n  const virtualRemoteComponentAppSharedHost = join(\n    process.cwd(),\n    nextConfig.distDir ?? '.next',\n    'remote-components/shared/app-host.tsx',\n  );\n  const virtualRemoteComponentPagesSharedHost = join(\n    process.cwd(),\n    nextConfig.distDir ?? '.next',\n    'remote-components/shared/pages-host.tsx',\n  );\n\n  const appShared = new Set([\n    ...[\n      'react',\n      'react/jsx-dev-runtime',\n      'react/jsx-runtime',\n      'react-dom',\n      'react-dom/client',\n      'next/navigation',\n      'next/dist/client/components/navigation',\n      'next/link',\n      'next/dist/client/app-dir/link',\n      'next/form',\n      'next/dist/client/app-dir/form',\n      'next/image',\n      'next/dist/client/image-component',\n      'next/dist/api/image',\n      'next/script',\n      'next/dist/client/script',\n    ],\n    ...(options?.shared ?? []),\n  ]);\n  const pagesShared = new Set([\n    ...[\n      'react',\n      'react/jsx-dev-runtime',\n      'react/jsx-runtime',\n      'react-dom',\n      'react-dom/client',\n      'next/router',\n      'next/link',\n      'next/image',\n      'next/script',\n      'next/form',\n    ],\n    ...(options?.shared ?? []),\n  ]);\n\n  const vendorShared: Record<string, string> = {\n    react: `'/react/index.js'`,\n    'react/jsx-dev-runtime': `'/react/jsx-dev-runtime.js'`,\n    'react/jsx-runtime': `'/react/jsx-runtime.js'`,\n    'react-dom': `'/react-dom/index.js'`,\n  };\n\n  // resolve using enhanced-resolve\n  // named import does not work with enhanced-resolve when using cjs\n  // eslint-disable-next-line import/no-named-as-default-member\n  const resolve = enhancedResolve.create.sync({\n    conditionNames: ['browser', 'import', 'module', 'require'],\n    ...(existsSync(join(process.cwd(), 'tsconfig.json'))\n      ? {\n          extensions: ['.js', '.jsx', '.ts', '.tsx'],\n          plugins: [\n            new TsConfigPathsWebpackPlugin({\n              configFile: join(process.cwd(), 'tsconfig.json'),\n            }) as unknown as enhancedResolve.Plugin,\n          ],\n        }\n      : {}),\n  });\n\n  const generateSharedRemote = (sharedRemote: Set<string>) =>\n    `'use client';\\nmodule.exports = { shared: { ${Array.from(sharedRemote)\n      .reduce<string[]>((acc, curr) => {\n        let path;\n        try {\n          path = resolve(process.cwd(), curr);\n          if (path) {\n            path = relative(process.cwd(), path).replace(\n              /^(?<relative>\\.\\.\\/)+/,\n              '',\n            );\n          }\n        } catch {\n          // noop\n          // if module resolution using enhanced-resolve fails, fallback to require.resolve called in the shared/remote file\n        }\n        acc.push(\n          `[${vendorShared[curr] ?? (path ? `'${path}'` : `require.resolve('${curr}')`)}]: '${curr}',`,\n        );\n        acc.push(\n          `['__remote_shared_module_${curr}']: () => import('${curr}'),`,\n        );\n        return acc;\n      }, [])\n      .join('\\n')} } };\\n`;\n  const generateSharedHost = (sharedHost: Set<string>) =>\n    `'use client';\\nmodule.exports = { shared: { ${Array.from(sharedHost)\n      .reduce<string[]>((acc, curr) => {\n        acc.push(`['${curr}']: () => import('${curr}'),`);\n        return acc;\n      }, [])\n      .join('\\n')} } };\\n`;\n\n  const appSharedRemote = generateSharedRemote(appShared);\n  const pagesSharedRemote = generateSharedRemote(pagesShared);\n\n  const appSharedHost = generateSharedHost(appShared);\n  const pagesSharedHost = generateSharedHost(pagesShared);\n\n  const emitSharedFiles = () => {\n    mkdirSync(dirname(virtualRemoteComponentAppSharedRemote), {\n      recursive: true,\n    });\n\n    writeFileSync(\n      virtualRemoteComponentAppSharedRemote,\n      appSharedRemote,\n      'utf-8',\n    );\n    writeFileSync(\n      virtualRemoteComponentPagesSharedRemote,\n      pagesSharedRemote,\n      'utf-8',\n    );\n    writeFileSync(virtualRemoteComponentAppSharedHost, appSharedHost, 'utf-8');\n    writeFileSync(\n      virtualRemoteComponentPagesSharedHost,\n      pagesSharedHost,\n      'utf-8',\n    );\n  };\n\n  nextConfig.transpilePackages = [\n    ...(nextConfig.transpilePackages ?? []),\n    'remote-components/next',\n    'remote-components/next/remote',\n    'remote-components/next/host',\n    'remote-components/next/host/pages-router',\n    'remote-components/next/host/client',\n    '@remote-components/shared/remote/app',\n    '@remote-components/shared/remote/pages',\n    '@remote-components/shared/host/app',\n    '@remote-components/shared/host/pages',\n  ];\n\n  const alias = {\n    '@remote-components/shared/remote/app': `./${relative(\n      process.cwd(),\n      virtualRemoteComponentAppSharedRemote,\n    )}`,\n    '@remote-components/shared/remote/pages': `./${relative(\n      process.cwd(),\n      virtualRemoteComponentPagesSharedRemote,\n    )}`,\n    '@remote-components/shared/host/app': `./${relative(\n      process.cwd(),\n      virtualRemoteComponentAppSharedHost,\n    )}`,\n    '@remote-components/shared/host/pages': `./${relative(\n      process.cwd(),\n      virtualRemoteComponentPagesSharedHost,\n    )}`,\n  };\n\n  let projectId =\n    process.env.REMOTE_COMPONENTS_PROJECT_ID ||\n    process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION ||\n    process.env.VERCEL_PROJECT_ID;\n\n  if (!projectId) {\n    try {\n      const projectPath = findUpSync('.vercel/project.json', {\n        cwd: process.cwd(),\n      });\n      if (projectPath) {\n        projectId = (\n          JSON.parse(readFileSync(projectPath, 'utf8')) as { projectId: string }\n        ).projectId;\n      }\n    } catch {\n      // fallback to env‑var above\n    }\n  }\n\n  if (!projectId) {\n    const packageJsonPath = findUpSync('package.json', {\n      cwd: process.cwd(),\n    });\n    if (packageJsonPath) {\n      const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8')) as {\n        name?: string;\n      };\n      projectId = packageJson.name || basename(process.cwd());\n    } else {\n      projectId = basename(process.cwd());\n    }\n  }\n\n  process.env.REMOTE_COMPONENTS_PROJECT_ID = projectId;\n\n  if (process.env.TURBOPACK) {\n    if (\n      !(configSchema as ZodSchema).safeParse({\n        turbopack: {\n          moduleIds: 'named',\n          resolveAlias: {\n            ...alias,\n          },\n        },\n        compiler: {\n          defineServer: {\n            REMOTE_COMPONENTS_PROJECT_ID: projectId,\n          },\n        },\n      }).success\n    ) {\n      // eslint-disable-next-line no-console\n      console.error(\n        'You need to use a Next.js version which supports the `turbopack` and `compiler.defineServer` configuration for Turbopack support with Remote Components.',\n      );\n      process.exit(1);\n    }\n    nextConfig.turbopack = {\n      ...nextConfig.turbopack,\n      moduleIds: 'named',\n      resolveAlias: {\n        ...nextConfig.turbopack?.resolveAlias,\n        ...alias,\n      },\n    };\n    nextConfig.compiler = {\n      ...nextConfig.compiler,\n      defineServer: {\n        ...nextConfig.compiler?.defineServer,\n        'process.env.REMOTE_COMPONENTS_PROJECT_ID': projectId,\n      },\n    };\n    emitSharedFiles();\n    return nextConfig;\n  }\n\n  // apply the webpack transform\n  return webpackTransform(nextConfig, {\n    app: { name: projectId },\n    alias,\n    emitSharedFiles,\n  });\n}\n","import { join } from 'node:path';\nimport type { NextConfig } from 'next';\nimport type { WebpackOptionsNormalized } from 'webpack';\nimport { RemoteWebpackRequirePlugin } from './plugins/remote-webpack-require';\nimport { ModuleIdEmbedPlugin } from './plugins/module-id-embed';\nimport { ConditionalExecPlugin } from './plugins/conditional-exec';\nimport { PatchRequirePlugin } from './plugins/patch-require';\n\nexport function transform(\n  nextConfig: NextConfig,\n  {\n    app,\n    alias = {},\n    emitSharedFiles = () => {\n      // no-op by default\n    },\n  }: {\n    app: { name: string };\n    alias?: Record<string, string>;\n    emitSharedFiles?: () => void;\n  },\n) {\n  const webpackConfig = nextConfig.webpack;\n\n  nextConfig.webpack = (\n    baseConfig: WebpackOptionsNormalized,\n    webpackContext,\n  ) => {\n    // execute the client config first, otherwise their config may accidentally\n    // overwrite our required config - leading to unexpected errors.\n    const config = (\n      typeof webpackConfig === 'function'\n        ? (webpackConfig(baseConfig, webpackContext) ?? baseConfig)\n        : baseConfig\n    ) as WebpackOptionsNormalized;\n\n    // remote component specific plugins\n    config.plugins.push(\n      new RemoteWebpackRequirePlugin(app.name),\n      new ModuleIdEmbedPlugin(app.name),\n      new ConditionalExecPlugin(app.name),\n      new PatchRequirePlugin(app.name),\n    );\n    if (!webpackContext.isServer) {\n      // change the chunk loading global to avoid conflicts with other remote components\n      config.output.chunkLoadingGlobal = `__remote_chunk_loading_global_${app.name}__`;\n    }\n\n    config.resolve = {\n      ...config.resolve,\n      alias: {\n        ...config.resolve.alias,\n        ...Object.fromEntries(\n          Object.entries(alias).map(([key, value]) => [\n            key,\n            join(process.cwd(), value),\n          ]),\n        ),\n      },\n    };\n\n    emitSharedFiles();\n    return config;\n  };\n\n  return nextConfig;\n}\n","export function createRemoteWebpackRequireRuntimeModule(webpack: {\n  RuntimeModule: new (name: string, stage?: number) => object;\n}) {\n  return class RemoteWebpackRequireRuntimeModule extends webpack.RuntimeModule {\n    appName: string;\n\n    constructor(appName: string) {\n      super('remote-webpack-require');\n      this.appName = appName;\n    }\n\n    generate(): null | string {\n      return `globalThis.__remote_webpack_require__ = globalThis.__remote_webpack_require__ || {}; globalThis.__remote_webpack_require__[\"${this.appName}\"] = __webpack_require__;`;\n    }\n  };\n}\n","import type { Compiler, RuntimeModule } from 'webpack';\nimport { createRemoteWebpackRequireRuntimeModule } from './remote-webpack-require-runtime-module';\n\nexport class RemoteWebpackRequirePlugin {\n  appName: string;\n\n  constructor(appName: string) {\n    this.appName = appName;\n  }\n\n  apply(compiler: Compiler) {\n    const RemoteWebpackRequireRuntimeModule =\n      createRemoteWebpackRequireRuntimeModule(compiler.webpack);\n\n    compiler.hooks.thisCompilation.tap(\n      'RemoteWebpackRequirePlugin',\n      (compilation) => {\n        compilation.hooks.runtimeRequirementInTree\n          .for('__webpack_require__')\n          .tap('RemoteWebpackRequirePlugin', (chunk) => {\n            compilation.addRuntimeModule(\n              chunk,\n              new RemoteWebpackRequireRuntimeModule(\n                this.appName,\n              ) as unknown as RuntimeModule,\n            );\n          });\n      },\n    );\n  }\n}\n","import { relative } from 'node:path';\nimport type { NormalModule, Compiler, RuntimeModule } from 'webpack';\nimport { createModuleIdEmbedRuntimeModule } from './module-id-embed-runtime-module';\n\nconst cwd = process.cwd();\n\nexport class ModuleIdEmbedPlugin {\n  appName: string;\n\n  constructor(appName: string) {\n    this.appName = appName;\n  }\n\n  apply(compiler: Compiler) {\n    const ModuleIdEmbedRuntimeModule = createModuleIdEmbedRuntimeModule(\n      compiler.webpack,\n    );\n\n    compiler.hooks.thisCompilation.tap('ModuleIdEmbedPlugin', (compilation) => {\n      const moduleMap = {} as Record<string, string | number>;\n\n      compilation.hooks.runtimeRequirementInTree\n        .for(compiler.webpack.RuntimeGlobals.require)\n        .tap('ModuleIdEmbedPlugin', (chunk, set) => {\n          for (const [key, entry] of compilation.entrypoints) {\n            for (const entryChunk of entry.chunks) {\n              if (key.includes('nextjs-pages-remote')) {\n                for (const mod of compilation.chunkGraph.getChunkModulesIterable(\n                  entryChunk,\n                )) {\n                  const id = compilation.chunkGraph.getModuleId(mod);\n                  const normalModule = mod as NormalModule;\n                  if (id && (normalModule.resource || normalModule.request)) {\n                    moduleMap[\n                      relative(\n                        cwd,\n                        normalModule.resource || normalModule.request,\n                      )\n                    ] = id;\n                  }\n                }\n              }\n            }\n          }\n          for (const mod of compilation.modules) {\n            const id = compilation.chunkGraph.getModuleId(mod);\n            if (id && mod.layer?.endsWith('browser')) {\n              const normalModule = mod as NormalModule;\n              if (normalModule.resource || normalModule.request) {\n                moduleMap[\n                  relative(cwd, normalModule.resource || normalModule.request)\n                ] = id;\n              }\n            }\n          }\n\n          if (Object.keys(moduleMap).length > 0) {\n            compilation.addRuntimeModule(\n              chunk,\n              new ModuleIdEmbedRuntimeModule(\n                this.appName,\n                moduleMap,\n              ) as unknown as RuntimeModule,\n            );\n\n            set.add(compiler.webpack.RuntimeGlobals.require);\n          }\n        });\n    });\n  }\n}\n","export function createModuleIdEmbedRuntimeModule(webpack: {\n  RuntimeModule: new (name: string, stage?: number) => object;\n}) {\n  return class ModuleIdEmbedRuntimeModule extends webpack.RuntimeModule {\n    appName: string;\n    moduleMap: Record<string | number, unknown>;\n\n    constructor(appName: string, moduleMap: Record<string | number, unknown>) {\n      super('remote-webpack-module-id-embed');\n      this.appName = appName;\n      this.moduleMap = moduleMap;\n    }\n\n    generate(): null | string {\n      return `globalThis.__remote_webpack_module_map__ = globalThis.__remote_webpack_module_map__ || {}; globalThis.__remote_webpack_module_map__[\"${this.appName}\"] = ${JSON.stringify(this.moduleMap)};`;\n    }\n  };\n}\n","import type { Compiler } from 'webpack';\n\nexport class ConditionalExecPlugin {\n  appName: string;\n\n  constructor(appName: string) {\n    this.appName = appName;\n  }\n\n  apply(compiler: Compiler) {\n    const { Compilation, sources } = compiler.webpack;\n\n    compiler.hooks.thisCompilation.tap(\n      'ConditionalExecPlugin',\n      (compilation) => {\n        compilation.hooks.processAssets.tap(\n          {\n            name: 'ConditionalExecPlugin',\n            stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,\n          },\n          (assets) => {\n            for (const [name, source] of Object.entries(assets)) {\n              if (name.endsWith('.js')) {\n                const patchedSource = source\n                  .source()\n                  .toString()\n                  .replace(\n                    `var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))`,\n                    `var __webpack_exec__ = (moduleId) => { if (globalThis.__DISABLE_WEBPACK_EXEC__ && globalThis.__DISABLE_WEBPACK_EXEC__[\"${this.appName}\"]) return; return __webpack_require__(__webpack_require__.s = moduleId); }`,\n                  );\n                compilation.updateAsset(\n                  name,\n                  new sources.RawSource(patchedSource),\n                );\n              }\n            }\n          },\n        );\n      },\n    );\n  }\n}\n","import type { Compiler } from 'webpack';\n\n// This plugin patches the webpack require function to support loading remote components in Next.js\nexport class PatchRequirePlugin {\n  appName: string;\n\n  constructor(appName: string) {\n    this.appName = appName;\n  }\n\n  apply(compiler: Compiler) {\n    const { sources } = compiler.webpack;\n\n    compiler.hooks.thisCompilation.tap('PatchRequirePlugin', (compilation) => {\n      compilation.mainTemplate.hooks.requireExtensions.tap(\n        'PatchRequirePlugin',\n        (source) => {\n          return new sources.ConcatSource(\n            source,\n            `const __webpack_require_orig__ = __webpack_require__;\nconst REMOTE_RE = /\\\\[(?<bundle>[^\\\\]]+)\\\\] (?<id>.*)/;\n__webpack_require__ = function __remote_webpack_require__(remoteId) {\n    const match = REMOTE_RE.exec(remoteId);\n    const bundle = match?.groups?.bundle;\n    const id = match?.groups?.id;\n    if (!(id && bundle)) {\n        return __webpack_require_orig__(remoteId);\n    }\n    if (typeof self.__remote_webpack_require__?.[bundle] !== 'function') {\n        throw new Error(\\`Remote component loading error: \"\\${bundle}\"\\`);\n    }\n    return self.__remote_webpack_require__[bundle](self.__remote_webpack_require__[bundle].type === 'turbopack' ? remoteId : id);\n};\nObject.assign(__webpack_require__, __webpack_require_orig__);\nconst __webpack_require_l__ = __webpack_require__.l;\n__webpack_require__.l = function __remote_webpack_require_l__(url, done, key, chunkId) {\n    const match = REMOTE_RE.exec(chunkId);\n    const bundle = match?.groups?.bundle;\n    const id = match?.groups?.id;\n    if (!(id && bundle)) {\n        return __webpack_require_l__(new URL(url, globalThis.__remote_bundle_url__?.[\"${this.appName}\"] ?? location.origin).href, done, key, chunkId);\n    }\n    return done();\n};\nconst __webpack_require_o__ = __webpack_require__.o;\n__webpack_require__.o = function __remote_webpack_require_o__(installedChunks, chunkId) {\n    const match = REMOTE_RE.exec(chunkId);\n    const bundle = match?.groups?.bundle;\n    const id = match?.groups?.id;\n    if (!(id && bundle)) {\n        return __webpack_require_o__(installedChunks, chunkId);\n    }\n    return installedChunks[chunkId] = 0;\n};\nconst __webpack_require_e__ = __webpack_require__.e;\n__webpack_require__.e = function __remote_webpack_require_e__(chunkId) {\n    const match = REMOTE_RE.exec(chunkId);\n    const bundle = match?.groups?.bundle;\n    const id = match?.groups?.id;\n    if (!(id && bundle)) {\n        return __webpack_require_e__(chunkId);\n    }\n    return Promise.resolve([]);\n};`,\n          )\n            .source()\n            .toString();\n        },\n      );\n    });\n  }\n}\n"],"mappings":"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","names":["join","relative","join","relative"]}

package/dist/next/host/client/index.cjs

@@ -33,7 +33,9 @@ __export(client_exports, {
 });
 module.exports = __toCommonJS(client_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var Image = __toESM(require("next/image"), 1);
 var import_react = require("#remote-components/react/index");
+var import_app_router_compat = require("#internal/next/host/app-router-compat");
 async function tryImportShared() {
   try {
     const { shared } = await import("@remote-components/shared/host/app");
@@ -42,8 +44,21 @@ async function tryImportShared() {
     return {};
   }
 }
+const sharedModules = async (userShared) => {
+  const [resolvedShared, resolvedUserShared] = await Promise.all([
+    tryImportShared(),
+    userShared ?? Promise.resolve({})
+  ]);
+  return {
+    ...resolvedShared,
+    "next/router": import_app_router_compat.routerImpl,
+    "next/image": (bundle) => Promise.resolve((0, import_app_router_compat.imageImpl)(Image.default, bundle ?? "default")),
+    "next/dist/client/image-component": (bundle) => Promise.resolve({ Image: (0, import_app_router_compat.imageImpl)(Image.default, bundle ?? "default") }),
+    ...resolvedUserShared
+  };
+};
 function RemoteComponent(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.RemoteComponent, { ...props, shared: tryImportShared() });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.RemoteComponent, { ...props, shared: sharedModules(props.shared) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/next/host/client/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/next/host/client/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  RemoteComponent as RemoteComponentReact,\n  type RemoteComponentProps,\n} from '#remote-components/react/index';\n\nasync function tryImportShared() {\n  try {\n    const { shared } = await import('@remote-components/shared/host/app');\n    return shared;\n  } catch {\n    return {};\n  }\n}\n\n/**\n * RemoteComponent - Client-side component for rendering remote components\n *\n * This component is used in Next.js App Router to render remote components.\n * It supports both Next.js App Router and Pages Router based components.\n *\n * @param props - The props for the remote component.\n * @returns The rendered remote component.\n */\nexport function RemoteComponent(props: RemoteComponentProps) {\n  return <RemoteComponentReact {...props} shared={tryImportShared()} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BS;AAxBT,mBAGO;AAEP,eAAe,kBAAkB;AAC/B,MAAI;AACF,UAAM,EAAE,OAAO,IAAI,MAAM,OAAO,oCAAoC;AACpE,WAAO;AAAA,EACT,QAAE;AACA,WAAO,CAAC;AAAA,EACV;AACF;AAWO,SAAS,gBAAgB,OAA6B;AAC3D,SAAO,4CAAC,aAAAA,iBAAA,EAAsB,GAAG,OAAO,QAAQ,gBAAgB,GAAG;AACrE;","names":["RemoteComponentReact"]}
+{"version":3,"sources":["../../../../src/next/host/client/index.tsx"],"sourcesContent":["'use client';\n\nimport * as Image from 'next/image';\nimport {\n  RemoteComponent as RemoteComponentReact,\n  type RemoteComponentProps,\n} from '#remote-components/react/index';\nimport { imageImpl, routerImpl } from '#internal/next/host/app-router-compat';\n\nasync function tryImportShared() {\n  try {\n    const { shared } = await import('@remote-components/shared/host/app');\n    return shared;\n  } catch {\n    return {};\n  }\n}\n\nconst sharedModules = async (userShared?: RemoteComponentProps['shared']) => {\n  const [resolvedShared, resolvedUserShared] = await Promise.all([\n    tryImportShared(),\n    userShared ?? Promise.resolve({}),\n  ]);\n\n  return {\n    ...resolvedShared,\n    'next/router': routerImpl,\n    'next/image': (bundle?: string) =>\n      Promise.resolve(imageImpl(Image.default, bundle ?? 'default')),\n    'next/dist/client/image-component': (bundle?: string) =>\n      Promise.resolve({ Image: imageImpl(Image.default, bundle ?? 'default') }),\n    ...resolvedUserShared,\n  };\n};\n\n/**\n * RemoteComponent - Client-side component for rendering remote components\n *\n * This component is used in Next.js App Router to render remote components.\n * It supports both Next.js App Router and Pages Router based components.\n *\n * @param props - The props for the remote component.\n * @returns The rendered remote component.\n */\nexport function RemoteComponent(props: RemoteComponentProps) {\n  return (\n    <RemoteComponentReact {...props} shared={sharedModules(props.shared)} />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CI;AA5CJ,YAAuB;AACvB,mBAGO;AACP,+BAAsC;AAEtC,eAAe,kBAAkB;AAC/B,MAAI;AACF,UAAM,EAAE,OAAO,IAAI,MAAM,OAAO,oCAAoC;AACpE,WAAO;AAAA,EACT,QAAE;AACA,WAAO,CAAC;AAAA,EACV;AACF;AAEA,MAAM,gBAAgB,OAAO,eAAgD;AAC3E,QAAM,CAAC,gBAAgB,kBAAkB,IAAI,MAAM,QAAQ,IAAI;AAAA,IAC7D,gBAAgB;AAAA,IAChB,cAAc,QAAQ,QAAQ,CAAC,CAAC;AAAA,EAClC,CAAC;AAED,SAAO;AAAA,IACL,GAAG;AAAA,IACH,eAAe;AAAA,IACf,cAAc,CAAC,WACb,QAAQ,YAAQ,oCAAU,MAAM,SAAS,UAAU,SAAS,CAAC;AAAA,IAC/D,oCAAoC,CAAC,WACnC,QAAQ,QAAQ,EAAE,WAAO,oCAAU,MAAM,SAAS,UAAU,SAAS,EAAE,CAAC;AAAA,IAC1E,GAAG;AAAA,EACL;AACF;AAWO,SAAS,gBAAgB,OAA6B;AAC3D,SACE,4CAAC,aAAAA,iBAAA,EAAsB,GAAG,OAAO,QAAQ,cAAc,MAAM,MAAM,GAAG;AAE1E;","names":["RemoteComponentReact"]}

package/dist/next/host/client/index.js

@@ -1,8 +1,10 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import * as Image from "next/image";
 import {
   RemoteComponent as RemoteComponentReact
 } from "#remote-components/react/index";
+import { imageImpl, routerImpl } from "#internal/next/host/app-router-compat";
 async function tryImportShared() {
   try {
     const { shared } = await import("@remote-components/shared/host/app");
@@ -11,8 +13,21 @@ async function tryImportShared() {
     return {};
   }
 }
+const sharedModules = async (userShared) => {
+  const [resolvedShared, resolvedUserShared] = await Promise.all([
+    tryImportShared(),
+    userShared ?? Promise.resolve({})
+  ]);
+  return {
+    ...resolvedShared,
+    "next/router": routerImpl,
+    "next/image": (bundle) => Promise.resolve(imageImpl(Image.default, bundle ?? "default")),
+    "next/dist/client/image-component": (bundle) => Promise.resolve({ Image: imageImpl(Image.default, bundle ?? "default") }),
+    ...resolvedUserShared
+  };
+};
 function RemoteComponent(props) {
-  return /* @__PURE__ */ jsx(RemoteComponentReact, { ...props, shared: tryImportShared() });
+  return /* @__PURE__ */ jsx(RemoteComponentReact, { ...props, shared: sharedModules(props.shared) });
 }
 export {
   RemoteComponent

package/dist/next/host/client/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/next/host/client/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  RemoteComponent as RemoteComponentReact,\n  type RemoteComponentProps,\n} from '#remote-components/react/index';\n\nasync function tryImportShared() {\n  try {\n    const { shared } = await import('@remote-components/shared/host/app');\n    return shared;\n  } catch {\n    return {};\n  }\n}\n\n/**\n * RemoteComponent - Client-side component for rendering remote components\n *\n * This component is used in Next.js App Router to render remote components.\n * It supports both Next.js App Router and Pages Router based components.\n *\n * @param props - The props for the remote component.\n * @returns The rendered remote component.\n */\nexport function RemoteComponent(props: RemoteComponentProps) {\n  return <RemoteComponentReact {...props} shared={tryImportShared()} />;\n}\n"],"mappings":";AA0BS;AAxBT;AAAA,EACE,mBAAmB;AAAA,OAEd;AAEP,eAAe,kBAAkB;AAC/B,MAAI;AACF,UAAM,EAAE,OAAO,IAAI,MAAM,OAAO,oCAAoC;AACpE,WAAO;AAAA,EACT,QAAE;AACA,WAAO,CAAC;AAAA,EACV;AACF;AAWO,SAAS,gBAAgB,OAA6B;AAC3D,SAAO,oBAAC,wBAAsB,GAAG,OAAO,QAAQ,gBAAgB,GAAG;AACrE;","names":[]}
+{"version":3,"sources":["../../../../src/next/host/client/index.tsx"],"sourcesContent":["'use client';\n\nimport * as Image from 'next/image';\nimport {\n  RemoteComponent as RemoteComponentReact,\n  type RemoteComponentProps,\n} from '#remote-components/react/index';\nimport { imageImpl, routerImpl } from '#internal/next/host/app-router-compat';\n\nasync function tryImportShared() {\n  try {\n    const { shared } = await import('@remote-components/shared/host/app');\n    return shared;\n  } catch {\n    return {};\n  }\n}\n\nconst sharedModules = async (userShared?: RemoteComponentProps['shared']) => {\n  const [resolvedShared, resolvedUserShared] = await Promise.all([\n    tryImportShared(),\n    userShared ?? Promise.resolve({}),\n  ]);\n\n  return {\n    ...resolvedShared,\n    'next/router': routerImpl,\n    'next/image': (bundle?: string) =>\n      Promise.resolve(imageImpl(Image.default, bundle ?? 'default')),\n    'next/dist/client/image-component': (bundle?: string) =>\n      Promise.resolve({ Image: imageImpl(Image.default, bundle ?? 'default') }),\n    ...resolvedUserShared,\n  };\n};\n\n/**\n * RemoteComponent - Client-side component for rendering remote components\n *\n * This component is used in Next.js App Router to render remote components.\n * It supports both Next.js App Router and Pages Router based components.\n *\n * @param props - The props for the remote component.\n * @returns The rendered remote component.\n */\nexport function RemoteComponent(props: RemoteComponentProps) {\n  return (\n    <RemoteComponentReact {...props} shared={sharedModules(props.shared)} />\n  );\n}\n"],"mappings":";AA8CI;AA5CJ,YAAY,WAAW;AACvB;AAAA,EACE,mBAAmB;AAAA,OAEd;AACP,SAAS,WAAW,kBAAkB;AAEtC,eAAe,kBAAkB;AAC/B,MAAI;AACF,UAAM,EAAE,OAAO,IAAI,MAAM,OAAO,oCAAoC;AACpE,WAAO;AAAA,EACT,QAAE;AACA,WAAO,CAAC;AAAA,EACV;AACF;AAEA,MAAM,gBAAgB,OAAO,eAAgD;AAC3E,QAAM,CAAC,gBAAgB,kBAAkB,IAAI,MAAM,QAAQ,IAAI;AAAA,IAC7D,gBAAgB;AAAA,IAChB,cAAc,QAAQ,QAAQ,CAAC,CAAC;AAAA,EAClC,CAAC;AAED,SAAO;AAAA,IACL,GAAG;AAAA,IACH,eAAe;AAAA,IACf,cAAc,CAAC,WACb,QAAQ,QAAQ,UAAU,MAAM,SAAS,UAAU,SAAS,CAAC;AAAA,IAC/D,oCAAoC,CAAC,WACnC,QAAQ,QAAQ,EAAE,OAAO,UAAU,MAAM,SAAS,UAAU,SAAS,EAAE,CAAC;AAAA,IAC1E,GAAG;AAAA,EACL;AACF;AAWO,SAAS,gBAAgB,OAA6B;AAC3D,SACE,oBAAC,wBAAsB,GAAG,OAAO,QAAQ,cAAc,MAAM,MAAM,GAAG;AAE1E;","names":[]}

package/dist/next/host/pages-router-server.cjs

@@ -39,13 +39,13 @@ var Form = __toESM(require("next/form"), 1);
 var Image = __toESM(require("next/image"), 1);
 var Link = __toESM(require("next/link"), 1);
 var Script = __toESM(require("next/script"), 1);
-var import_router = require("next/router");
+var Router = __toESM(require("next/router"), 1);
 var import_react2 = require("#remote-components/react/index");
 var import_fetch_remote_component = require("#internal/shared/ssr/fetch-remote-component");
 const navigationImpl = {
-  useRouter: import_router.useRouter,
+  useRouter: () => Router.useRouter(),
   useSearchParams: () => {
-    const router = (0, import_router.useRouter)();
+    const router = Router.useRouter();
     return {
       get: (key) => router.query[key],
       has: (key) => key in router.query
@@ -63,9 +63,12 @@ const shared = (bundle) => {
     return `${self2.__remote_bundle_url__?.[bundle]?.origin ?? ""}${assetPrefix}/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 75}`;
   };
   const imageImpl = (ImageComponent) => {
-    return function RemoteImage(props) {
+    function RemoteImage(props) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageComponent, { loader: remoteLoader, ...props });
-    };
+    }
+    RemoteImage.default = RemoteImage;
+    RemoteImage.getImageProps = Image.getImageProps;
+    return RemoteImage;
   };
   return {
     // polyfill Next.js App Router client API (minimal)
@@ -78,12 +81,6 @@ const shared = (bundle) => {
     "next/form": () => Promise.resolve(Form.default),
     "next/dist/client/script": () => Promise.resolve(Script.default),
     "next/script": () => Promise.resolve(Script.default),
-    "next/image": () => Promise.resolve({
-      // @ts-expect-error default.default
-      // eslint-disable-next-line
-      default: imageImpl(Image.default.default ?? Image.default),
-      getImageProps: Image.getImageProps
-    }),
     "next/dist/client/image-component": () => Promise.resolve({
       // @ts-expect-error default.default
       // eslint-disable-next-line
@@ -95,7 +92,14 @@ const shared = (bundle) => {
       default: imageImpl(Image.default.default ?? Image.default),
       getImageProps: Image.getImageProps
     }),
-    ...import_pages.shared
+    "next/router": () => Promise.resolve(Router),
+    ...import_pages.shared,
+    // always override next/image to use the remote loader
+    "next/image": () => Promise.resolve(
+      // @ts-expect-error default.default
+      // eslint-disable-next-line
+      imageImpl(Image.default.default ?? Image.default)
+    )
   };
 };
 const REMOTE_COMPONENT_STORE = Symbol("REMOTE_COMPONENT_STORE");
@@ -169,7 +173,8 @@ async function getRemoteComponentProps(src, headers) {
     links,
     component,
     nextData,
-    url
+    url,
+    remoteShared
   } = await (0, import_fetch_remote_component.fetchRemoteComponent)(
     src,
     headers instanceof Headers ? headers : (
@@ -203,6 +208,15 @@ async function getRemoteComponentProps(src, headers) {
     setComponent(
       key,
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "script",
+          {
+            "data-remote-components-shared": "",
+            id: `${name}_shared`,
+            type: "application/json",
+            children: JSON.stringify(remoteShared)
+          }
+        ),
         links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "link",
           {

package/dist/next/host/pages-router-server.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/host/pages-router-server.tsx"],"sourcesContent":["import type { IncomingHttpHeaders } from 'node:http';\nimport { useEffect } from 'react';\nimport { shared as _shared } from '@remote-components/shared/host/pages';\nimport * as Form from 'next/form';\nimport * as Image from 'next/image';\nimport * as Link from 'next/link';\nimport * as Script from 'next/script';\nimport { useRouter } from 'next/router';\nimport { RemoteComponent as RemoteComponentReact } from '#remote-components/react/index';\nimport { fetchRemoteComponent } from '#internal/shared/ssr/fetch-remote-component';\n\nconst navigationImpl = {\n  useRouter,\n  useSearchParams: () => {\n    const router = useRouter();\n    return {\n      get: (key: string) => router.query[key],\n      has: (key: string) => key in router.query,\n    };\n  },\n};\n\nconst sharedCache = new Map<string, Record<string, () => Promise<unknown>>>();\nconst shared = (bundle: string) => {\n  if (sharedCache.has(bundle)) {\n    return sharedCache.get(bundle);\n  }\n\n  const remoteLoader = ({ src, width, quality }: Image.ImageLoaderProps) => {\n    const self = globalThis as typeof globalThis & {\n      __remote_bundle_url__?: Record<string, URL>;\n    };\n    const { assetPrefix } =\n      /^(?<assetPrefix>.*?)\\/_next\\//.exec(src)?.groups ?? {};\n    return `${self.__remote_bundle_url__?.[bundle]?.origin ?? ''}${assetPrefix}/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 75}`;\n  };\n\n  const imageImpl = (ImageComponent: typeof Image.default) => {\n    return function RemoteImage(props: Image.ImageProps) {\n      return <ImageComponent loader={remoteLoader} {...props} />;\n    };\n  };\n\n  return {\n    // polyfill Next.js App Router client API (minimal)\n    // some API methods are not available when using a Next.js Pages Router application as host\n    'next/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/components/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/app-dir/link': () =>\n      Promise.resolve(Link.default) as Promise<unknown>,\n    'next/link': () => Promise.resolve(Link.default) as Promise<unknown>,\n    'next/dist/client/app-dir/form': () =>\n      Promise.resolve(Form.default) as Promise<unknown>,\n    'next/form': () => Promise.resolve(Form.default) as Promise<unknown>,\n    'next/dist/client/script': () =>\n      Promise.resolve(Script.default) as Promise<unknown>,\n    'next/script': () => Promise.resolve(Script.default) as Promise<unknown>,\n    'next/image': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        default: imageImpl(Image.default.default ?? Image.default),\n        getImageProps: Image.getImageProps,\n      }) as Promise<unknown>,\n    'next/dist/client/image-component': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        Image: imageImpl(Image.default.default ?? Image.default),\n      }) as Promise<unknown>,\n    'next/dist/api/image': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        default: imageImpl(Image.default.default ?? Image.default),\n        getImageProps: Image.getImageProps,\n      }) as Promise<unknown>,\n    ..._shared,\n  };\n};\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, React.ReactNode>;\n};\n\nfunction getKey({\n  bundle,\n  route,\n  name,\n}: {\n  bundle?: string;\n  route?: string;\n  name?: string;\n}): string {\n  return `${bundle ?? '__next'}:${route ?? '/'}:${name ?? '__vercel_remote_component'}__${crypto.randomUUID()}`;\n}\n\nfunction setComponent(key: string, component: React.ReactNode): void {\n  if (!self[REMOTE_COMPONENT_STORE]) {\n    self[REMOTE_COMPONENT_STORE] = new Map();\n  }\n  self[REMOTE_COMPONENT_STORE].set(key, component);\n}\n\nfunction getComponent(key: string): React.ReactNode | undefined {\n  const component = self[REMOTE_COMPONENT_STORE]?.get(key);\n  // remove the component from the store after retrieving it to prevent memory leaks\n  // storing the HTML in the global store is only needed for SSR and it's temporary only used for a single render\n  self[REMOTE_COMPONENT_STORE]?.delete(key);\n  return component;\n}\n\nexport interface RemoteComponentProps {\n  src: string;\n  url?: string | URL;\n  bundle?: string;\n  route?: string;\n  name?: string;\n  isolate?: boolean;\n  mode?: 'open' | 'closed';\n  reset?: boolean;\n  [REMOTE_COMPONENT_KEY]?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function RemoteComponent(props: RemoteComponentProps) {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(\n          props[REMOTE_COMPONENT_KEY] ?? '__vercel_remote_component',\n        );\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = shared(props.bundle ?? 'default');\n  }, [props.bundle]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <RemoteComponentReact\n        isolate={props.isolate}\n        mode={props.mode}\n        name={props.name}\n        reset={props.reset}\n        shared={shared(props.bundle ?? 'default')}\n        src={props.url ?? props.src}\n      >\n        {props.children}\n      </RemoteComponentReact>\n    );\n  }\n\n  return (\n    <RemoteComponentReact\n      isolate={props.isolate}\n      mode={props.mode}\n      name={props.name}\n      reset={props.reset}\n      shared={shared(props.bundle ?? 'default')}\n      src={props.url ?? props.src}\n    >\n      {remoteComponent}\n    </RemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<RemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getRemoteComponentProps(\n  src: string,\n  headers: IncomingHttpHeaders,\n): Promise<RemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new Error(\n      'getRemoteComponentProps can only be used on the server side.',\n    );\n  }\n\n  const {\n    metadata: { bundle, route, runtime },\n    name,\n    links,\n    component,\n    nextData,\n    url,\n  } = await fetchRemoteComponent(\n    src,\n    headers instanceof Headers\n      ? headers\n      : // convert IncomingHttpHeaders to web standard Headers\n        Object.entries(headers).reduce((acc, [key, value]) => {\n          if (value) {\n            if (Array.isArray(value)) {\n              value.forEach((v) => acc.append(key, v));\n            } else {\n              acc.append(key, value);\n            }\n          }\n          return acc;\n        }, new Headers()),\n    {\n      rsc: true,\n    },\n  );\n\n  const props = {\n    src,\n    bundle,\n    name,\n    route,\n    runtime,\n    buildId: nextData?.buildId ?? null,\n    url: url.href,\n  };\n\n  const key = getKey(props);\n\n  // do not render the HTML in development mode when remote is using Next.js Pages Router\n  // this behavior is emulating the Next.js Pages Router FOUC as the styles are only applied on the client when running in development mode\n  if (nextData?.buildId !== 'development') {\n    // store the HTML in a global store\n    setComponent(\n      key,\n      <>\n        {links.map((link) => (\n          <link\n            key={`${link.as}_${link.href}`}\n            {...link}\n            precedence={undefined}\n          />\n        ))}\n        {component}\n      </>,\n    );\n  }\n\n  return {\n    ...props,\n    // add remote component key to the props\n    [REMOTE_COMPONENT_KEY]: key,\n  };\n}\n"],"mappings":"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","names":["import_react","self","_shared","RemoteComponentReact","key"]}
+{"version":3,"sources":["../../../src/next/host/pages-router-server.tsx"],"sourcesContent":["import type { IncomingHttpHeaders } from 'node:http';\nimport { useEffect } from 'react';\nimport { shared as _shared } from '@remote-components/shared/host/pages';\nimport * as Form from 'next/form';\nimport * as Image from 'next/image';\nimport * as Link from 'next/link';\nimport * as Script from 'next/script';\nimport * as Router from 'next/router';\nimport { RemoteComponent as RemoteComponentReact } from '#remote-components/react/index';\nimport { fetchRemoteComponent } from '#internal/shared/ssr/fetch-remote-component';\n\nconst navigationImpl = {\n  useRouter: () => Router.useRouter(),\n  useSearchParams: () => {\n    const router = Router.useRouter();\n    return {\n      get: (key: string) => router.query[key],\n      has: (key: string) => key in router.query,\n    };\n  },\n};\n\nconst sharedCache = new Map<string, Record<string, () => Promise<unknown>>>();\nconst shared = (bundle: string) => {\n  if (sharedCache.has(bundle)) {\n    return sharedCache.get(bundle);\n  }\n\n  const remoteLoader = ({ src, width, quality }: Image.ImageLoaderProps) => {\n    const self = globalThis as typeof globalThis & {\n      __remote_bundle_url__?: Record<string, URL>;\n    };\n    const { assetPrefix } =\n      /^(?<assetPrefix>.*?)\\/_next\\//.exec(src)?.groups ?? {};\n    return `${self.__remote_bundle_url__?.[bundle]?.origin ?? ''}${assetPrefix}/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 75}`;\n  };\n\n  const imageImpl = (ImageComponent: typeof Image.default) => {\n    function RemoteImage(props: Image.ImageProps) {\n      return <ImageComponent loader={remoteLoader} {...props} />;\n    }\n    RemoteImage.default = RemoteImage;\n    RemoteImage.getImageProps = Image.getImageProps;\n    return RemoteImage;\n  };\n\n  return {\n    // polyfill Next.js App Router client API (minimal)\n    // some API methods are not available when using a Next.js Pages Router application as host\n    'next/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/components/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/app-dir/link': () =>\n      Promise.resolve(Link.default) as Promise<unknown>,\n    'next/link': () => Promise.resolve(Link.default) as Promise<unknown>,\n    'next/dist/client/app-dir/form': () =>\n      Promise.resolve(Form.default) as Promise<unknown>,\n    'next/form': () => Promise.resolve(Form.default) as Promise<unknown>,\n    'next/dist/client/script': () =>\n      Promise.resolve(Script.default) as Promise<unknown>,\n    'next/script': () => Promise.resolve(Script.default) as Promise<unknown>,\n    'next/dist/client/image-component': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        Image: imageImpl(Image.default.default ?? Image.default),\n      }) as Promise<unknown>,\n    'next/dist/api/image': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        default: imageImpl(Image.default.default ?? Image.default),\n        getImageProps: Image.getImageProps,\n      }) as Promise<unknown>,\n    'next/router': () => Promise.resolve(Router) as Promise<unknown>,\n    ..._shared,\n    // always override next/image to use the remote loader\n    'next/image': () =>\n      Promise.resolve(\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        imageImpl(Image.default.default ?? Image.default),\n      ) as Promise<unknown>,\n  };\n};\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, React.ReactNode>;\n};\n\nfunction getKey({\n  bundle,\n  route,\n  name,\n}: {\n  bundle?: string;\n  route?: string;\n  name?: string;\n}): string {\n  return `${bundle ?? '__next'}:${route ?? '/'}:${name ?? '__vercel_remote_component'}__${crypto.randomUUID()}`;\n}\n\nfunction setComponent(key: string, component: React.ReactNode): void {\n  if (!self[REMOTE_COMPONENT_STORE]) {\n    self[REMOTE_COMPONENT_STORE] = new Map();\n  }\n  self[REMOTE_COMPONENT_STORE].set(key, component);\n}\n\nfunction getComponent(key: string): React.ReactNode | undefined {\n  const component = self[REMOTE_COMPONENT_STORE]?.get(key);\n  // remove the component from the store after retrieving it to prevent memory leaks\n  // storing the HTML in the global store is only needed for SSR and it's temporary only used for a single render\n  self[REMOTE_COMPONENT_STORE]?.delete(key);\n  return component;\n}\n\nexport interface RemoteComponentProps {\n  src: string;\n  url?: string | URL;\n  bundle?: string;\n  route?: string;\n  name?: string;\n  isolate?: boolean;\n  mode?: 'open' | 'closed';\n  reset?: boolean;\n  [REMOTE_COMPONENT_KEY]?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function RemoteComponent(props: RemoteComponentProps) {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(\n          props[REMOTE_COMPONENT_KEY] ?? '__vercel_remote_component',\n        );\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = shared(props.bundle ?? 'default');\n  }, [props.bundle]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <RemoteComponentReact\n        isolate={props.isolate}\n        mode={props.mode}\n        name={props.name}\n        reset={props.reset}\n        shared={shared(props.bundle ?? 'default')}\n        src={props.url ?? props.src}\n      >\n        {props.children}\n      </RemoteComponentReact>\n    );\n  }\n\n  return (\n    <RemoteComponentReact\n      isolate={props.isolate}\n      mode={props.mode}\n      name={props.name}\n      reset={props.reset}\n      shared={shared(props.bundle ?? 'default')}\n      src={props.url ?? props.src}\n    >\n      {remoteComponent}\n    </RemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<RemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getRemoteComponentProps(\n  src: string,\n  headers: IncomingHttpHeaders,\n): Promise<RemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new Error(\n      'getRemoteComponentProps can only be used on the server side.',\n    );\n  }\n\n  const {\n    metadata: { bundle, route, runtime },\n    name,\n    links,\n    component,\n    nextData,\n    url,\n    remoteShared,\n  } = await fetchRemoteComponent(\n    src,\n    headers instanceof Headers\n      ? headers\n      : // convert IncomingHttpHeaders to web standard Headers\n        Object.entries(headers).reduce((acc, [key, value]) => {\n          if (value) {\n            if (Array.isArray(value)) {\n              value.forEach((v) => acc.append(key, v));\n            } else {\n              acc.append(key, value);\n            }\n          }\n          return acc;\n        }, new Headers()),\n    {\n      rsc: true,\n    },\n  );\n\n  const props = {\n    src,\n    bundle,\n    name,\n    route,\n    runtime,\n    buildId: nextData?.buildId ?? null,\n    url: url.href,\n  };\n\n  const key = getKey(props);\n\n  // do not render the HTML in development mode when remote is using Next.js Pages Router\n  // this behavior is emulating the Next.js Pages Router FOUC as the styles are only applied on the client when running in development mode\n  if (nextData?.buildId !== 'development') {\n    // store the HTML in a global store\n    setComponent(\n      key,\n      <>\n        <script\n          data-remote-components-shared=\"\"\n          id={`${name}_shared`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(remoteShared)}\n        </script>\n        {links.map((link) => (\n          <link\n            key={`${link.as}_${link.href}`}\n            {...link}\n            precedence={undefined}\n          />\n        ))}\n        {component}\n      </>,\n    );\n  }\n\n  return {\n    ...props,\n    // add remote component key to the props\n    [REMOTE_COMPONENT_KEY]: key,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCa;AAtCb,mBAA0B;AAC1B,mBAAkC;AAClC,WAAsB;AACtB,YAAuB;AACvB,WAAsB;AACtB,aAAwB;AACxB,aAAwB;AACxB,IAAAA,gBAAwD;AACxD,oCAAqC;AAErC,MAAM,iBAAiB;AAAA,EACrB,WAAW,MAAM,OAAO,UAAU;AAAA,EAClC,iBAAiB,MAAM;AACrB,UAAM,SAAS,OAAO,UAAU;AAChC,WAAO;AAAA,MACL,KAAK,CAAC,QAAgB,OAAO,MAAM,GAAG;AAAA,MACtC,KAAK,CAAC,QAAgB,OAAO,OAAO;AAAA,IACtC;AAAA,EACF;AACF;AAEA,MAAM,cAAc,oBAAI,IAAoD;AAC5E,MAAM,SAAS,CAAC,WAAmB;AACjC,MAAI,YAAY,IAAI,MAAM,GAAG;AAC3B,WAAO,YAAY,IAAI,MAAM;AAAA,EAC/B;AAEA,QAAM,eAAe,CAAC,EAAE,KAAK,OAAO,QAAQ,MAA8B;AACxE,UAAMC,QAAO;AAGb,UAAM,EAAE,YAAY,IAClB,gCAAgC,KAAK,GAAG,GAAG,UAAU,CAAC;AACxD,WAAO,GAAGA,MAAK,wBAAwB,MAAM,GAAG,UAAU,KAAK,+BAA+B,mBAAmB,GAAG,OAAO,WAAW,WAAW;AAAA,EACnJ;AAEA,QAAM,YAAY,CAAC,mBAAyC;AAC1D,aAAS,YAAY,OAAyB;AAC5C,aAAO,4CAAC,kBAAe,QAAQ,cAAe,GAAG,OAAO;AAAA,IAC1D;AACA,gBAAY,UAAU;AACtB,gBAAY,gBAAgB,MAAM;AAClC,WAAO;AAAA,EACT;AAEA,SAAO;AAAA;AAAA;AAAA,IAGL,mBAAmB,MACjB,QAAQ,QAAQ,cAAc;AAAA,IAChC,0CAA0C,MACxC,QAAQ,QAAQ,cAAc;AAAA,IAChC,iCAAiC,MAC/B,QAAQ,QAAQ,KAAK,OAAO;AAAA,IAC9B,aAAa,MAAM,QAAQ,QAAQ,KAAK,OAAO;AAAA,IAC/C,iCAAiC,MAC/B,QAAQ,QAAQ,KAAK,OAAO;AAAA,IAC9B,aAAa,MAAM,QAAQ,QAAQ,KAAK,OAAO;AAAA,IAC/C,2BAA2B,MACzB,QAAQ,QAAQ,OAAO,OAAO;AAAA,IAChC,eAAe,MAAM,QAAQ,QAAQ,OAAO,OAAO;AAAA,IACnD,oCAAoC,MAClC,QAAQ,QAAQ;AAAA;AAAA;AAAA,MAGd,OAAO,UAAU,MAAM,QAAQ,WAAW,MAAM,OAAO;AAAA,IACzD,CAAC;AAAA,IACH,uBAAuB,MACrB,QAAQ,QAAQ;AAAA;AAAA;AAAA,MAGd,SAAS,UAAU,MAAM,QAAQ,WAAW,MAAM,OAAO;AAAA,MACzD,eAAe,MAAM;AAAA,IACvB,CAAC;AAAA,IACH,eAAe,MAAM,QAAQ,QAAQ,MAAM;AAAA,IAC3C,GAAG,aAAAC;AAAA;AAAA,IAEH,cAAc,MACZ,QAAQ;AAAA;AAAA;AAAA,MAGN,UAAU,MAAM,QAAQ,WAAW,MAAM,OAAO;AAAA,IAClD;AAAA,EACJ;AACF;AAGA,MAAM,yBAAyB,OAAO,wBAAwB;AAC9D,MAAM,uBAAuB;AAI7B,MAAM,OAAO;AAIb,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,GAIW;AACT,SAAO,GAAG,UAAU,YAAY,SAAS,OAAO,QAAQ,gCAAgC,OAAO,WAAW;AAC5G;AAEA,SAAS,aAAa,KAAa,WAAkC;AACnE,MAAI,CAAC,KAAK,sBAAsB,GAAG;AACjC,SAAK,sBAAsB,IAAI,oBAAI,IAAI;AAAA,EACzC;AACA,OAAK,sBAAsB,EAAE,IAAI,KAAK,SAAS;AACjD;AAEA,SAAS,aAAa,KAA0C;AAC9D,QAAM,YAAY,KAAK,sBAAsB,GAAG,IAAI,GAAG;AAGvD,OAAK,sBAAsB,GAAG,OAAO,GAAG;AACxC,SAAO;AACT;AAqBO,SAAS,gBAAgB,OAA6B;AAC3D,QAAM,kBACJ,OAAO,aAAa,cAChB;AAAA;AAAA,IAEA;AAAA,MACE,MAAM,oBAAoB,KAAK;AAAA,IACjC;AAAA;AAEN,8BAAU,MAAM;AACd,UAAM,aAAa;AAInB,eAAW,8BAA8B,OAAO,MAAM,UAAU,SAAS;AAAA,EAC3E,GAAG,CAAC,MAAM,MAAM,CAAC;AAEjB,MAAI,CAAC,MAAM,oBAAoB,GAAG;AAChC,WACE;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACC,SAAS,MAAM;AAAA,QACf,MAAM,MAAM;AAAA,QACZ,MAAM,MAAM;AAAA,QACZ,OAAO,MAAM;AAAA,QACb,QAAQ,OAAO,MAAM,UAAU,SAAS;AAAA,QACxC,KAAK,MAAM,OAAO,MAAM;AAAA,QAEvB,gBAAM;AAAA;AAAA,IACT;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC,cAAAA;AAAA,IAAA;AAAA,MACC,SAAS,MAAM;AAAA,MACf,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,OAAO,MAAM;AAAA,MACb,QAAQ,OAAO,MAAM,UAAU,SAAS;AAAA,MACxC,KAAK,MAAM,OAAO,MAAM;AAAA,MAEvB;AAAA;AAAA,EACH;AAEJ;AA8BA,eAAsB,wBACpB,KACA,SAC+B;AAC/B,MAAI,OAAO,aAAa,aAAa;AACnC,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,QAAM;AAAA,IACJ,UAAU,EAAE,QAAQ,OAAO,QAAQ;AAAA,IACnC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAM;AAAA,IACR;AAAA,IACA,mBAAmB,UACf;AAAA;AAAA,MAEA,OAAO,QAAQ,OAAO,EAAE,OAAO,CAAC,KAAK,CAACC,MAAK,KAAK,MAAM;AACpD,YAAI,OAAO;AACT,cAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,kBAAM,QAAQ,CAAC,MAAM,IAAI,OAAOA,MAAK,CAAC,CAAC;AAAA,UACzC,OAAO;AACL,gBAAI,OAAOA,MAAK,KAAK;AAAA,UACvB;AAAA,QACF;AACA,eAAO;AAAA,MACT,GAAG,IAAI,QAAQ,CAAC;AAAA;AAAA,IACpB;AAAA,MACE,KAAK;AAAA,IACP;AAAA,EACF;AAEA,QAAM,QAAQ;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,UAAU,WAAW;AAAA,IAC9B,KAAK,IAAI;AAAA,EACX;AAEA,QAAM,MAAM,OAAO,KAAK;AAIxB,MAAI,UAAU,YAAY,eAAe;AAEvC;AAAA,MACE;AAAA,MACA,4EACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,iCAA8B;AAAA,YAC9B,IAAI,GAAG;AAAA,YACP,MAAK;AAAA,YAEJ,eAAK,UAAU,YAAY;AAAA;AAAA,QAC9B;AAAA,QACC,MAAM,IAAI,CAAC,SACV;AAAA,UAAC;AAAA;AAAA,YAEE,GAAG;AAAA,YACJ,YAAY;AAAA;AAAA,UAFP,GAAG,KAAK,MAAM,KAAK;AAAA,QAG1B,CACD;AAAA,QACA;AAAA,SACH;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,GAAG;AAAA;AAAA,IAEH,CAAC,oBAAoB,GAAG;AAAA,EAC1B;AACF;","names":["import_react","self","_shared","RemoteComponentReact","key"]}

package/dist/next/host/pages-router-server.js

@@ -5,13 +5,13 @@ import * as Form from "next/form";
 import * as Image from "next/image";
 import * as Link from "next/link";
 import * as Script from "next/script";
-import { useRouter } from "next/router";
+import * as Router from "next/router";
 import { RemoteComponent as RemoteComponentReact } from "#remote-components/react/index";
 import { fetchRemoteComponent } from "#internal/shared/ssr/fetch-remote-component";
 const navigationImpl = {
-  useRouter,
+  useRouter: () => Router.useRouter(),
   useSearchParams: () => {
-    const router = useRouter();
+    const router = Router.useRouter();
     return {
       get: (key) => router.query[key],
       has: (key) => key in router.query
@@ -29,9 +29,12 @@ const shared = (bundle) => {
     return `${self2.__remote_bundle_url__?.[bundle]?.origin ?? ""}${assetPrefix}/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 75}`;
   };
   const imageImpl = (ImageComponent) => {
-    return function RemoteImage(props) {
+    function RemoteImage(props) {
       return /* @__PURE__ */ jsx(ImageComponent, { loader: remoteLoader, ...props });
-    };
+    }
+    RemoteImage.default = RemoteImage;
+    RemoteImage.getImageProps = Image.getImageProps;
+    return RemoteImage;
   };
   return {
     // polyfill Next.js App Router client API (minimal)
@@ -44,12 +47,6 @@ const shared = (bundle) => {
     "next/form": () => Promise.resolve(Form.default),
     "next/dist/client/script": () => Promise.resolve(Script.default),
     "next/script": () => Promise.resolve(Script.default),
-    "next/image": () => Promise.resolve({
-      // @ts-expect-error default.default
-      // eslint-disable-next-line
-      default: imageImpl(Image.default.default ?? Image.default),
-      getImageProps: Image.getImageProps
-    }),
     "next/dist/client/image-component": () => Promise.resolve({
       // @ts-expect-error default.default
       // eslint-disable-next-line
@@ -61,7 +58,14 @@ const shared = (bundle) => {
       default: imageImpl(Image.default.default ?? Image.default),
       getImageProps: Image.getImageProps
     }),
-    ..._shared
+    "next/router": () => Promise.resolve(Router),
+    ..._shared,
+    // always override next/image to use the remote loader
+    "next/image": () => Promise.resolve(
+      // @ts-expect-error default.default
+      // eslint-disable-next-line
+      imageImpl(Image.default.default ?? Image.default)
+    )
   };
 };
 const REMOTE_COMPONENT_STORE = Symbol("REMOTE_COMPONENT_STORE");
@@ -135,7 +139,8 @@ async function getRemoteComponentProps(src, headers) {
     links,
     component,
     nextData,
-    url
+    url,
+    remoteShared
   } = await fetchRemoteComponent(
     src,
     headers instanceof Headers ? headers : (
@@ -169,6 +174,15 @@ async function getRemoteComponentProps(src, headers) {
     setComponent(
       key,
       /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "script",
+          {
+            "data-remote-components-shared": "",
+            id: `${name}_shared`,
+            type: "application/json",
+            children: JSON.stringify(remoteShared)
+          }
+        ),
         links.map((link) => /* @__PURE__ */ jsx(
           "link",
           {

package/dist/next/host/pages-router-server.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/host/pages-router-server.tsx"],"sourcesContent":["import type { IncomingHttpHeaders } from 'node:http';\nimport { useEffect } from 'react';\nimport { shared as _shared } from '@remote-components/shared/host/pages';\nimport * as Form from 'next/form';\nimport * as Image from 'next/image';\nimport * as Link from 'next/link';\nimport * as Script from 'next/script';\nimport { useRouter } from 'next/router';\nimport { RemoteComponent as RemoteComponentReact } from '#remote-components/react/index';\nimport { fetchRemoteComponent } from '#internal/shared/ssr/fetch-remote-component';\n\nconst navigationImpl = {\n  useRouter,\n  useSearchParams: () => {\n    const router = useRouter();\n    return {\n      get: (key: string) => router.query[key],\n      has: (key: string) => key in router.query,\n    };\n  },\n};\n\nconst sharedCache = new Map<string, Record<string, () => Promise<unknown>>>();\nconst shared = (bundle: string) => {\n  if (sharedCache.has(bundle)) {\n    return sharedCache.get(bundle);\n  }\n\n  const remoteLoader = ({ src, width, quality }: Image.ImageLoaderProps) => {\n    const self = globalThis as typeof globalThis & {\n      __remote_bundle_url__?: Record<string, URL>;\n    };\n    const { assetPrefix } =\n      /^(?<assetPrefix>.*?)\\/_next\\//.exec(src)?.groups ?? {};\n    return `${self.__remote_bundle_url__?.[bundle]?.origin ?? ''}${assetPrefix}/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 75}`;\n  };\n\n  const imageImpl = (ImageComponent: typeof Image.default) => {\n    return function RemoteImage(props: Image.ImageProps) {\n      return <ImageComponent loader={remoteLoader} {...props} />;\n    };\n  };\n\n  return {\n    // polyfill Next.js App Router client API (minimal)\n    // some API methods are not available when using a Next.js Pages Router application as host\n    'next/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/components/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/app-dir/link': () =>\n      Promise.resolve(Link.default) as Promise<unknown>,\n    'next/link': () => Promise.resolve(Link.default) as Promise<unknown>,\n    'next/dist/client/app-dir/form': () =>\n      Promise.resolve(Form.default) as Promise<unknown>,\n    'next/form': () => Promise.resolve(Form.default) as Promise<unknown>,\n    'next/dist/client/script': () =>\n      Promise.resolve(Script.default) as Promise<unknown>,\n    'next/script': () => Promise.resolve(Script.default) as Promise<unknown>,\n    'next/image': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        default: imageImpl(Image.default.default ?? Image.default),\n        getImageProps: Image.getImageProps,\n      }) as Promise<unknown>,\n    'next/dist/client/image-component': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        Image: imageImpl(Image.default.default ?? Image.default),\n      }) as Promise<unknown>,\n    'next/dist/api/image': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        default: imageImpl(Image.default.default ?? Image.default),\n        getImageProps: Image.getImageProps,\n      }) as Promise<unknown>,\n    ..._shared,\n  };\n};\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, React.ReactNode>;\n};\n\nfunction getKey({\n  bundle,\n  route,\n  name,\n}: {\n  bundle?: string;\n  route?: string;\n  name?: string;\n}): string {\n  return `${bundle ?? '__next'}:${route ?? '/'}:${name ?? '__vercel_remote_component'}__${crypto.randomUUID()}`;\n}\n\nfunction setComponent(key: string, component: React.ReactNode): void {\n  if (!self[REMOTE_COMPONENT_STORE]) {\n    self[REMOTE_COMPONENT_STORE] = new Map();\n  }\n  self[REMOTE_COMPONENT_STORE].set(key, component);\n}\n\nfunction getComponent(key: string): React.ReactNode | undefined {\n  const component = self[REMOTE_COMPONENT_STORE]?.get(key);\n  // remove the component from the store after retrieving it to prevent memory leaks\n  // storing the HTML in the global store is only needed for SSR and it's temporary only used for a single render\n  self[REMOTE_COMPONENT_STORE]?.delete(key);\n  return component;\n}\n\nexport interface RemoteComponentProps {\n  src: string;\n  url?: string | URL;\n  bundle?: string;\n  route?: string;\n  name?: string;\n  isolate?: boolean;\n  mode?: 'open' | 'closed';\n  reset?: boolean;\n  [REMOTE_COMPONENT_KEY]?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function RemoteComponent(props: RemoteComponentProps) {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(\n          props[REMOTE_COMPONENT_KEY] ?? '__vercel_remote_component',\n        );\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = shared(props.bundle ?? 'default');\n  }, [props.bundle]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <RemoteComponentReact\n        isolate={props.isolate}\n        mode={props.mode}\n        name={props.name}\n        reset={props.reset}\n        shared={shared(props.bundle ?? 'default')}\n        src={props.url ?? props.src}\n      >\n        {props.children}\n      </RemoteComponentReact>\n    );\n  }\n\n  return (\n    <RemoteComponentReact\n      isolate={props.isolate}\n      mode={props.mode}\n      name={props.name}\n      reset={props.reset}\n      shared={shared(props.bundle ?? 'default')}\n      src={props.url ?? props.src}\n    >\n      {remoteComponent}\n    </RemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<RemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getRemoteComponentProps(\n  src: string,\n  headers: IncomingHttpHeaders,\n): Promise<RemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new Error(\n      'getRemoteComponentProps can only be used on the server side.',\n    );\n  }\n\n  const {\n    metadata: { bundle, route, runtime },\n    name,\n    links,\n    component,\n    nextData,\n    url,\n  } = await fetchRemoteComponent(\n    src,\n    headers instanceof Headers\n      ? headers\n      : // convert IncomingHttpHeaders to web standard Headers\n        Object.entries(headers).reduce((acc, [key, value]) => {\n          if (value) {\n            if (Array.isArray(value)) {\n              value.forEach((v) => acc.append(key, v));\n            } else {\n              acc.append(key, value);\n            }\n          }\n          return acc;\n        }, new Headers()),\n    {\n      rsc: true,\n    },\n  );\n\n  const props = {\n    src,\n    bundle,\n    name,\n    route,\n    runtime,\n    buildId: nextData?.buildId ?? null,\n    url: url.href,\n  };\n\n  const key = getKey(props);\n\n  // do not render the HTML in development mode when remote is using Next.js Pages Router\n  // this behavior is emulating the Next.js Pages Router FOUC as the styles are only applied on the client when running in development mode\n  if (nextData?.buildId !== 'development') {\n    // store the HTML in a global store\n    setComponent(\n      key,\n      <>\n        {links.map((link) => (\n          <link\n            key={`${link.as}_${link.href}`}\n            {...link}\n            precedence={undefined}\n          />\n        ))}\n        {component}\n      </>,\n    );\n  }\n\n  return {\n    ...props,\n    // add remote component key to the props\n    [REMOTE_COMPONENT_KEY]: key,\n  };\n}\n"],"mappings":"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","names":["self","key"]}
+{"version":3,"sources":["../../../src/next/host/pages-router-server.tsx"],"sourcesContent":["import type { IncomingHttpHeaders } from 'node:http';\nimport { useEffect } from 'react';\nimport { shared as _shared } from '@remote-components/shared/host/pages';\nimport * as Form from 'next/form';\nimport * as Image from 'next/image';\nimport * as Link from 'next/link';\nimport * as Script from 'next/script';\nimport * as Router from 'next/router';\nimport { RemoteComponent as RemoteComponentReact } from '#remote-components/react/index';\nimport { fetchRemoteComponent } from '#internal/shared/ssr/fetch-remote-component';\n\nconst navigationImpl = {\n  useRouter: () => Router.useRouter(),\n  useSearchParams: () => {\n    const router = Router.useRouter();\n    return {\n      get: (key: string) => router.query[key],\n      has: (key: string) => key in router.query,\n    };\n  },\n};\n\nconst sharedCache = new Map<string, Record<string, () => Promise<unknown>>>();\nconst shared = (bundle: string) => {\n  if (sharedCache.has(bundle)) {\n    return sharedCache.get(bundle);\n  }\n\n  const remoteLoader = ({ src, width, quality }: Image.ImageLoaderProps) => {\n    const self = globalThis as typeof globalThis & {\n      __remote_bundle_url__?: Record<string, URL>;\n    };\n    const { assetPrefix } =\n      /^(?<assetPrefix>.*?)\\/_next\\//.exec(src)?.groups ?? {};\n    return `${self.__remote_bundle_url__?.[bundle]?.origin ?? ''}${assetPrefix}/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 75}`;\n  };\n\n  const imageImpl = (ImageComponent: typeof Image.default) => {\n    function RemoteImage(props: Image.ImageProps) {\n      return <ImageComponent loader={remoteLoader} {...props} />;\n    }\n    RemoteImage.default = RemoteImage;\n    RemoteImage.getImageProps = Image.getImageProps;\n    return RemoteImage;\n  };\n\n  return {\n    // polyfill Next.js App Router client API (minimal)\n    // some API methods are not available when using a Next.js Pages Router application as host\n    'next/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/components/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/app-dir/link': () =>\n      Promise.resolve(Link.default) as Promise<unknown>,\n    'next/link': () => Promise.resolve(Link.default) as Promise<unknown>,\n    'next/dist/client/app-dir/form': () =>\n      Promise.resolve(Form.default) as Promise<unknown>,\n    'next/form': () => Promise.resolve(Form.default) as Promise<unknown>,\n    'next/dist/client/script': () =>\n      Promise.resolve(Script.default) as Promise<unknown>,\n    'next/script': () => Promise.resolve(Script.default) as Promise<unknown>,\n    'next/dist/client/image-component': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        Image: imageImpl(Image.default.default ?? Image.default),\n      }) as Promise<unknown>,\n    'next/dist/api/image': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        default: imageImpl(Image.default.default ?? Image.default),\n        getImageProps: Image.getImageProps,\n      }) as Promise<unknown>,\n    'next/router': () => Promise.resolve(Router) as Promise<unknown>,\n    ..._shared,\n    // always override next/image to use the remote loader\n    'next/image': () =>\n      Promise.resolve(\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        imageImpl(Image.default.default ?? Image.default),\n      ) as Promise<unknown>,\n  };\n};\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, React.ReactNode>;\n};\n\nfunction getKey({\n  bundle,\n  route,\n  name,\n}: {\n  bundle?: string;\n  route?: string;\n  name?: string;\n}): string {\n  return `${bundle ?? '__next'}:${route ?? '/'}:${name ?? '__vercel_remote_component'}__${crypto.randomUUID()}`;\n}\n\nfunction setComponent(key: string, component: React.ReactNode): void {\n  if (!self[REMOTE_COMPONENT_STORE]) {\n    self[REMOTE_COMPONENT_STORE] = new Map();\n  }\n  self[REMOTE_COMPONENT_STORE].set(key, component);\n}\n\nfunction getComponent(key: string): React.ReactNode | undefined {\n  const component = self[REMOTE_COMPONENT_STORE]?.get(key);\n  // remove the component from the store after retrieving it to prevent memory leaks\n  // storing the HTML in the global store is only needed for SSR and it's temporary only used for a single render\n  self[REMOTE_COMPONENT_STORE]?.delete(key);\n  return component;\n}\n\nexport interface RemoteComponentProps {\n  src: string;\n  url?: string | URL;\n  bundle?: string;\n  route?: string;\n  name?: string;\n  isolate?: boolean;\n  mode?: 'open' | 'closed';\n  reset?: boolean;\n  [REMOTE_COMPONENT_KEY]?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function RemoteComponent(props: RemoteComponentProps) {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(\n          props[REMOTE_COMPONENT_KEY] ?? '__vercel_remote_component',\n        );\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = shared(props.bundle ?? 'default');\n  }, [props.bundle]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <RemoteComponentReact\n        isolate={props.isolate}\n        mode={props.mode}\n        name={props.name}\n        reset={props.reset}\n        shared={shared(props.bundle ?? 'default')}\n        src={props.url ?? props.src}\n      >\n        {props.children}\n      </RemoteComponentReact>\n    );\n  }\n\n  return (\n    <RemoteComponentReact\n      isolate={props.isolate}\n      mode={props.mode}\n      name={props.name}\n      reset={props.reset}\n      shared={shared(props.bundle ?? 'default')}\n      src={props.url ?? props.src}\n    >\n      {remoteComponent}\n    </RemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<RemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getRemoteComponentProps(\n  src: string,\n  headers: IncomingHttpHeaders,\n): Promise<RemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new Error(\n      'getRemoteComponentProps can only be used on the server side.',\n    );\n  }\n\n  const {\n    metadata: { bundle, route, runtime },\n    name,\n    links,\n    component,\n    nextData,\n    url,\n    remoteShared,\n  } = await fetchRemoteComponent(\n    src,\n    headers instanceof Headers\n      ? headers\n      : // convert IncomingHttpHeaders to web standard Headers\n        Object.entries(headers).reduce((acc, [key, value]) => {\n          if (value) {\n            if (Array.isArray(value)) {\n              value.forEach((v) => acc.append(key, v));\n            } else {\n              acc.append(key, value);\n            }\n          }\n          return acc;\n        }, new Headers()),\n    {\n      rsc: true,\n    },\n  );\n\n  const props = {\n    src,\n    bundle,\n    name,\n    route,\n    runtime,\n    buildId: nextData?.buildId ?? null,\n    url: url.href,\n  };\n\n  const key = getKey(props);\n\n  // do not render the HTML in development mode when remote is using Next.js Pages Router\n  // this behavior is emulating the Next.js Pages Router FOUC as the styles are only applied on the client when running in development mode\n  if (nextData?.buildId !== 'development') {\n    // store the HTML in a global store\n    setComponent(\n      key,\n      <>\n        <script\n          data-remote-components-shared=\"\"\n          id={`${name}_shared`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(remoteShared)}\n        </script>\n        {links.map((link) => (\n          <link\n            key={`${link.as}_${link.href}`}\n            {...link}\n            precedence={undefined}\n          />\n        ))}\n        {component}\n      </>,\n    );\n  }\n\n  return {\n    ...props,\n    // add remote component key to the props\n    [REMOTE_COMPONENT_KEY]: key,\n  };\n}\n"],"mappings":"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","names":["self","key"]}

package/dist/next/middleware.cjs

@@ -32,20 +32,22 @@ function corsFromOptions(options) {
     "Access-Control-Allow-Headers": process.env.REMOTE_COMPONENTS_ALLOW_HEADERS || (Array.isArray(options?.headers) ? options.headers.map((h) => h.trim()).join(",") : options?.headers) || "Content-Type,Authorization",
     ...process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS || options?.credentials ? {
       "Access-Control-Allow-Credentials": process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS || "true"
-    } : {}
+    } : {},
+    "Access-Control-Max-Age": options?.maxAge || "600"
   };
   return { ALLOWED_ORIGINS, CORS_HEADERS };
 }
 function withRemoteComponents(middleware, options) {
   return async (request) => {
     const { ALLOWED_ORIGINS, CORS_HEADERS } = corsFromOptions(options?.cors);
-    const origin = request.headers.get("origin") ?? "";
+    const origin = request.headers.get("origin") ?? (request.headers.has("referer") ? new URL(request.headers.get("referer") ?? "*").origin : "*");
     const isAllowed = ALLOWED_ORIGINS.includes("*") || ALLOWED_ORIGINS.includes(origin);
     if (request.method === "OPTIONS") {
       return new Response(null, {
         status: 200,
         headers: isAllowed ? {
           "Access-Control-Allow-Origin": origin,
+          Vary: "Origin",
           ...CORS_HEADERS
         } : {}
       });
@@ -53,6 +55,7 @@ function withRemoteComponents(middleware, options) {
     const response = typeof middleware === "function" ? await middleware(request) : import_server.NextResponse.next();
     if (isAllowed) {
       response.headers.set("Access-Control-Allow-Origin", origin);
+      response.headers.set("Vary", "Origin");
     }
     Object.entries(CORS_HEADERS).forEach(
       ([k, v]) => response.headers.set(k, v)

package/dist/next/middleware.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/next/middleware/index.ts"],"sourcesContent":["import { type NextRequest, NextResponse } from 'next/server';\n\nexport interface RemoteComponentMiddlewareOptions {\n  cors?: {\n    origin?: string | string[];\n    method?: string | string[];\n    headers?: string | string[];\n    credentials?: boolean;\n  };\n}\n\nfunction corsFromOptions(options?: RemoteComponentMiddlewareOptions['cors']) {\n  const ALLOWED_ORIGINS = (\n    process.env.REMOTE_COMPONENTS_ALLOWED_ORIGINS ||\n    (Array.isArray(options?.origin)\n      ? options.origin.join(',')\n      : options?.origin) ||\n    '*'\n  )\n    .split(',')\n    .map((origin) => origin.trim());\n\n  const CORS_HEADERS = {\n    'Access-Control-Allow-Methods':\n      process.env.REMOTE_COMPONENTS_ALLOW_METHODS ||\n      (Array.isArray(options?.method)\n        ? options.method.map((m) => m.trim()).join(',')\n        : options?.method) ||\n      'GET,HEAD,POST,PUT,PATCH,DELETE,OPTIONS',\n    'Access-Control-Allow-Headers':\n      process.env.REMOTE_COMPONENTS_ALLOW_HEADERS ||\n      (Array.isArray(options?.headers)\n        ? options.headers.map((h) => h.trim()).join(',')\n        : options?.headers) ||\n      'Content-Type,Authorization',\n    ...(process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS || options?.credentials\n      ? {\n          'Access-Control-Allow-Credentials':\n            process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS || 'true',\n        }\n      : {}),\n  };\n\n  return { ALLOWED_ORIGINS, CORS_HEADERS };\n}\n\n/**\n * This middleware is used to handle CORS and other remote component related tasks.\n * It can be used to wrap a Next.js middleware function to add CORS headers and handle preflight requests.\n *\n * @param middleware - The Next.js middleware function to wrap.\n * @param options - Optional configuration for handling remote components.\n * @returns A Next.js middleware function that handles CORS and preflight requests\n */\nexport function withRemoteComponents(\n  middleware?: (request: NextRequest) => NextResponse | Promise<NextResponse>,\n  options?: RemoteComponentMiddlewareOptions,\n) {\n  return async (request: NextRequest) => {\n    const { ALLOWED_ORIGINS, CORS_HEADERS } = corsFromOptions(options?.cors);\n\n    const origin = request.headers.get('origin') ?? '';\n    const isAllowed =\n      ALLOWED_ORIGINS.includes('*') || ALLOWED_ORIGINS.includes(origin);\n\n    // Handle preflight\n    if (request.method === 'OPTIONS') {\n      return new Response(null, {\n        status: 200,\n        headers: isAllowed\n          ? {\n              'Access-Control-Allow-Origin': origin,\n              ...CORS_HEADERS,\n            }\n          : {},\n      });\n    }\n\n    // For all other requests, continue and attach CORS\n    const response =\n      typeof middleware === 'function'\n        ? await middleware(request)\n        : NextResponse.next();\n\n    if (isAllowed) {\n      response.headers.set('Access-Control-Allow-Origin', origin);\n    }\n\n    Object.entries(CORS_HEADERS).forEach(([k, v]) =>\n      response.headers.set(k, v),\n    );\n\n    return response;\n  };\n}\n\n/**\n * This configuration is used to specify the paths that the middleware should match.\n * It matches all paths by default.\n */\nexport const config = {\n  matcher: '/:path*',\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA+C;AAW/C,SAAS,gBAAgB,SAAoD;AAC3E,QAAM,mBACJ,QAAQ,IAAI,sCACX,MAAM,QAAQ,SAAS,MAAM,IAC1B,QAAQ,OAAO,KAAK,GAAG,IACvB,SAAS,WACb,KAEC,MAAM,GAAG,EACT,IAAI,CAAC,WAAW,OAAO,KAAK,CAAC;AAEhC,QAAM,eAAe;AAAA,IACnB,gCACE,QAAQ,IAAI,oCACX,MAAM,QAAQ,SAAS,MAAM,IAC1B,QAAQ,OAAO,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,IAC5C,SAAS,WACb;AAAA,IACF,gCACE,QAAQ,IAAI,oCACX,MAAM,QAAQ,SAAS,OAAO,IAC3B,QAAQ,QAAQ,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,IAC7C,SAAS,YACb;AAAA,IACF,GAAI,QAAQ,IAAI,uCAAuC,SAAS,cAC5D;AAAA,MACE,oCACE,QAAQ,IAAI,uCAAuC;AAAA,IACvD,IACA,CAAC;AAAA,EACP;AAEA,SAAO,EAAE,iBAAiB,aAAa;AACzC;AAUO,SAAS,qBACd,YACA,SACA;AACA,SAAO,OAAO,YAAyB;AACrC,UAAM,EAAE,iBAAiB,aAAa,IAAI,gBAAgB,SAAS,IAAI;AAEvE,UAAM,SAAS,QAAQ,QAAQ,IAAI,QAAQ,KAAK;AAChD,UAAM,YACJ,gBAAgB,SAAS,GAAG,KAAK,gBAAgB,SAAS,MAAM;AAGlE,QAAI,QAAQ,WAAW,WAAW;AAChC,aAAO,IAAI,SAAS,MAAM;AAAA,QACxB,QAAQ;AAAA,QACR,SAAS,YACL;AAAA,UACE,+BAA+B;AAAA,UAC/B,GAAG;AAAA,QACL,IACA,CAAC;AAAA,MACP,CAAC;AAAA,IACH;AAGA,UAAM,WACJ,OAAO,eAAe,aAClB,MAAM,WAAW,OAAO,IACxB,2BAAa,KAAK;AAExB,QAAI,WAAW;AACb,eAAS,QAAQ,IAAI,+BAA+B,MAAM;AAAA,IAC5D;AAEA,WAAO,QAAQ,YAAY,EAAE;AAAA,MAAQ,CAAC,CAAC,GAAG,CAAC,MACzC,SAAS,QAAQ,IAAI,GAAG,CAAC;AAAA,IAC3B;AAEA,WAAO;AAAA,EACT;AACF;AAMO,IAAM,SAAS;AAAA,EACpB,SAAS;AACX;","names":[]}
+{"version":3,"sources":["../../src/next/middleware/index.ts"],"sourcesContent":["import { type NextRequest, NextResponse } from 'next/server';\n\nexport interface RemoteComponentMiddlewareOptions {\n  cors?: {\n    origin?: string | string[];\n    method?: string | string[];\n    headers?: string | string[];\n    credentials?: boolean;\n    maxAge?: string;\n  };\n}\n\nfunction corsFromOptions(options?: RemoteComponentMiddlewareOptions['cors']) {\n  const ALLOWED_ORIGINS = (\n    process.env.REMOTE_COMPONENTS_ALLOWED_ORIGINS ||\n    (Array.isArray(options?.origin)\n      ? options.origin.join(',')\n      : options?.origin) ||\n    '*'\n  )\n    .split(',')\n    .map((origin) => origin.trim());\n\n  const CORS_HEADERS = {\n    'Access-Control-Allow-Methods':\n      process.env.REMOTE_COMPONENTS_ALLOW_METHODS ||\n      (Array.isArray(options?.method)\n        ? options.method.map((m) => m.trim()).join(',')\n        : options?.method) ||\n      'GET,HEAD,POST,PUT,PATCH,DELETE,OPTIONS',\n    'Access-Control-Allow-Headers':\n      process.env.REMOTE_COMPONENTS_ALLOW_HEADERS ||\n      (Array.isArray(options?.headers)\n        ? options.headers.map((h) => h.trim()).join(',')\n        : options?.headers) ||\n      'Content-Type,Authorization',\n    ...(process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS || options?.credentials\n      ? {\n          'Access-Control-Allow-Credentials':\n            process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS || 'true',\n        }\n      : {}),\n    'Access-Control-Max-Age': options?.maxAge || '600',\n  };\n\n  return { ALLOWED_ORIGINS, CORS_HEADERS };\n}\n\n/**\n * This middleware is used to handle CORS and other remote component related tasks.\n * It can be used to wrap a Next.js middleware function to add CORS headers and handle preflight requests.\n *\n * @param middleware - The Next.js middleware function to wrap.\n * @param options - Optional configuration for handling remote components.\n * @returns A Next.js middleware function that handles CORS and preflight requests\n */\nexport function withRemoteComponents(\n  middleware?: (request: NextRequest) => NextResponse | Promise<NextResponse>,\n  options?: RemoteComponentMiddlewareOptions,\n) {\n  return async (request: NextRequest) => {\n    const { ALLOWED_ORIGINS, CORS_HEADERS } = corsFromOptions(options?.cors);\n\n    const origin =\n      request.headers.get('origin') ??\n      (request.headers.has('referer')\n        ? new URL(request.headers.get('referer') ?? '*').origin\n        : '*');\n    const isAllowed =\n      ALLOWED_ORIGINS.includes('*') || ALLOWED_ORIGINS.includes(origin);\n\n    // Handle preflight\n    if (request.method === 'OPTIONS') {\n      return new Response(null, {\n        status: 200,\n        headers: isAllowed\n          ? {\n              'Access-Control-Allow-Origin': origin,\n              Vary: 'Origin',\n              ...CORS_HEADERS,\n            }\n          : {},\n      });\n    }\n\n    // For all other requests, continue and attach CORS\n    const response =\n      typeof middleware === 'function'\n        ? await middleware(request)\n        : NextResponse.next();\n\n    if (isAllowed) {\n      response.headers.set('Access-Control-Allow-Origin', origin);\n      response.headers.set('Vary', 'Origin');\n    }\n\n    Object.entries(CORS_HEADERS).forEach(([k, v]) =>\n      response.headers.set(k, v),\n    );\n\n    return response;\n  };\n}\n\n/**\n * This configuration is used to specify the paths that the middleware should match.\n * It matches all paths by default.\n */\nexport const config = {\n  matcher: '/:path*',\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA+C;AAY/C,SAAS,gBAAgB,SAAoD;AAC3E,QAAM,mBACJ,QAAQ,IAAI,sCACX,MAAM,QAAQ,SAAS,MAAM,IAC1B,QAAQ,OAAO,KAAK,GAAG,IACvB,SAAS,WACb,KAEC,MAAM,GAAG,EACT,IAAI,CAAC,WAAW,OAAO,KAAK,CAAC;AAEhC,QAAM,eAAe;AAAA,IACnB,gCACE,QAAQ,IAAI,oCACX,MAAM,QAAQ,SAAS,MAAM,IAC1B,QAAQ,OAAO,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,IAC5C,SAAS,WACb;AAAA,IACF,gCACE,QAAQ,IAAI,oCACX,MAAM,QAAQ,SAAS,OAAO,IAC3B,QAAQ,QAAQ,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,IAC7C,SAAS,YACb;AAAA,IACF,GAAI,QAAQ,IAAI,uCAAuC,SAAS,cAC5D;AAAA,MACE,oCACE,QAAQ,IAAI,uCAAuC;AAAA,IACvD,IACA,CAAC;AAAA,IACL,0BAA0B,SAAS,UAAU;AAAA,EAC/C;AAEA,SAAO,EAAE,iBAAiB,aAAa;AACzC;AAUO,SAAS,qBACd,YACA,SACA;AACA,SAAO,OAAO,YAAyB;AACrC,UAAM,EAAE,iBAAiB,aAAa,IAAI,gBAAgB,SAAS,IAAI;AAEvE,UAAM,SACJ,QAAQ,QAAQ,IAAI,QAAQ,MAC3B,QAAQ,QAAQ,IAAI,SAAS,IAC1B,IAAI,IAAI,QAAQ,QAAQ,IAAI,SAAS,KAAK,GAAG,EAAE,SAC/C;AACN,UAAM,YACJ,gBAAgB,SAAS,GAAG,KAAK,gBAAgB,SAAS,MAAM;AAGlE,QAAI,QAAQ,WAAW,WAAW;AAChC,aAAO,IAAI,SAAS,MAAM;AAAA,QACxB,QAAQ;AAAA,QACR,SAAS,YACL;AAAA,UACE,+BAA+B;AAAA,UAC/B,MAAM;AAAA,UACN,GAAG;AAAA,QACL,IACA,CAAC;AAAA,MACP,CAAC;AAAA,IACH;AAGA,UAAM,WACJ,OAAO,eAAe,aAClB,MAAM,WAAW,OAAO,IACxB,2BAAa,KAAK;AAExB,QAAI,WAAW;AACb,eAAS,QAAQ,IAAI,+BAA+B,MAAM;AAC1D,eAAS,QAAQ,IAAI,QAAQ,QAAQ;AAAA,IACvC;AAEA,WAAO,QAAQ,YAAY,EAAE;AAAA,MAAQ,CAAC,CAAC,GAAG,CAAC,MACzC,SAAS,QAAQ,IAAI,GAAG,CAAC;AAAA,IAC3B;AAEA,WAAO;AAAA,EACT;AACF;AAMO,IAAM,SAAS;AAAA,EACpB,SAAS;AACX;","names":[]}