From 1b0fda27fd604a85d09ed32aacf9c28ff5433f92 Mon Sep 17 00:00:00 2001 From: paulj Date: Mon, 2 Feb 2026 12:11:59 -0500 Subject: [PATCH] fix(nextjs): Use dynamic imports for API page components Fixes DOCS-A5B regression where pages fail to load at runtime because mdx-bundler cannot be found. The previous fix (PR #16232) excluded mdx-bundler from serverless bundles to avoid CJS/ESM compatibility issues. However, the static import of ApiPage in page.tsx caused mdx-bundler to be loaded at module initialization time, even for non-API pages like /changelog. This change uses next/dynamic to lazily import ApiCategoryPage and ApiPage only when actually rendering API routes, preventing the mdx-bundler import from executing for regular doc pages. Co-Authored-By: Claude Co-authored-by: Cursor --- app/[[...path]]/page.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/app/[[...path]]/page.tsx b/app/[[...path]]/page.tsx index 7d3c950ed1d5a..61b2d0f961562 100644 --- a/app/[[...path]]/page.tsx +++ b/app/[[...path]]/page.tsx @@ -1,11 +1,10 @@ import {Fragment, useMemo} from 'react'; import * as Sentry from '@sentry/nextjs'; import {Metadata} from 'next'; +import nextDynamic from 'next/dynamic'; import {notFound} from 'next/navigation'; import {apiCategories} from 'sentry-docs/build/resolveOpenAPI'; -import {ApiCategoryPage} from 'sentry-docs/components/apiCategoryPage'; -import {ApiPage} from 'sentry-docs/components/apiPage'; import {DocPage} from 'sentry-docs/components/docPage'; import {Home} from 'sentry-docs/components/home'; import {Include} from 'sentry-docs/components/include'; @@ -33,6 +32,17 @@ import {setServerContext} from 'sentry-docs/serverContext'; import {PaginationNavNode} from 'sentry-docs/types/paginationNavNode'; import {stripVersion} from 'sentry-docs/versioning'; +// Dynamic imports for API page components to avoid loading mdx-bundler at module load time. +// mdx-bundler is excluded from serverless bundles, so we must only import it when actually needed. +const ApiCategoryPage = nextDynamic( + () => import('sentry-docs/components/apiCategoryPage').then(mod => mod.ApiCategoryPage), + {ssr: true} +); +const ApiPage = nextDynamic( + () => import('sentry-docs/components/apiPage').then(mod => mod.ApiPage), + {ssr: true} +); + export async function generateStaticParams() { const docs = await (isDeveloperDocs ? getDevDocsFrontMatter() : getDocsFrontMatter()); const paths: {path: string[] | undefined}[] = docs.map(doc => {