Upgrade to 15.2.1 breaks dev server on markdown pages

[florianmartens]

I'm seeing this error when trying to render pages with mdx in next 15.2.1. Everything works in 15.1.6.

error:

 ⨯ [TypeError: Cannot read properties of undefined (reading 'stack')] {
  digest: '1846137025'
}
 ⨯ [TypeError: Invalid state: ReadableStream is already closed] {
  code: 'ERR_INVALID_STATE',
  digest: '2590112666'
}
[TypeError: Cannot read properties of undefined (reading 'stack')] {
  digest: '1846137025'
}
 ⨯ [Error: failed to pipe response] {
  [cause]: [TypeError: Cannot read properties of undefined (reading 'stack')] {
    digest: '1846137025'
  }
}
 GET /docs/quick-start 500 in 1703ms
 ⨯ [TypeError: Cannot read properties of undefined (reading 'stack')] {
  digest: '1846137025'
}
 ⨯ [TypeError: Invalid state: ReadableStream is already closed] {
  code: 'ERR_INVALID_STATE',
  digest: '2590112666'
}
[TypeError: Cannot read properties of undefined (reading 'stack')] {
  digest: '1846137025'
}
 ⨯ [Error: failed to pipe response] {
  [cause]: [TypeError: Cannot read properties of undefined (reading 'stack')] {
    digest: '1846137025'
  }
}

path: `docs/[slug]/page.tsx_

export default async function DocPage(props: DocPageProps) {
  const params = await props.params;
  const docPage = await getDocPageBySlug(params.slug);
  return (
        <div>{docPage.content}</div>
  );
}

This is how markdown is compiled:

export async function compileMdxContent(
  content: string,
  mdxComponents: MDXComponents
) {
  const result = await compileMDX({
    source: content,
    options: {
      parseFrontmatter: true,
      mdxOptions: {
        remarkPlugins: [
          remarkGfm, // Handles tables, strikethrough, etc.
          remarkMath, // For math equations
          remarkMermaid,
        ],
        rehypePlugins: [
          rehypeSlug,
          [rehypeHighlight, { detect: true }], // Code highlighting
          rehypeKatex, // Math rendering
        ],
      },
    },
    components: mdxComponents,
  });
  return result.content;
}

Current behavior:

Markdown pages break on dev server. I am able to build the website and it runs in production.

Expected behavior:

Dev server does not break

[soleoak]

@florianmartens I experienced this too. Adding transpilePackages: ["next-mdx-remote"] in the next.config fixes the issue.

// 📂 next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  transpilePackages: ["next-mdx-remote"],
};

export default nextConfig;

See this developing issue here: #488 (comment).

There is a note in the readme to transpile if you are using Turbopack but it points to a different issue https://github.com/hashicorp/next-mdx-remote?tab=readme-ov-file#installation.