Using react-markdown with Next.js 15 app dir results in error

[steebchen]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

9.0.1

Link to runnable example

No response

Steps to reproduce

Use Next.js >=15.0.0 and render <Markdown>...</Markdown> in a server component.

NOTE: adding use client in the component which renders Markdown fixes the build, however any route will always return 500 even though it still renders fine.

Expected behavior

No error. It works fine in Next 14.

Actual behavior

Error: Failed to collect configuration for /product/[id]/[slug]
    at /Users/a/b/c/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/utils.js:1130:23
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Span.traceAsyncFn (/Users/a/b/c/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/trace/trace.js:157:20) {
  [cause]: ReferenceError: document is not defined
      at 29265 (/Users/a/b/c/.next/server/edge-chunks/829.js:1:52366)
      at t (/Users/a/b/c/.next/server/edge-runtime-webpack.js:1:485)
      at 78130 (/Users/a/b/c/.next/server/app/product/[id]/[slug]/page.js:1:28452)
      at t (/Users/a/b/c/.next/server/edge-runtime-webpack.js:1:485)
      at 27165 (/Users/a/b/c/.next/server/app/product/[id]/[slug]/page.js:1:3661)
      at Function.t (/Users/a/b/c/.next/server/edge-runtime-webpack.js:1:485)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
}

> Build error occurred
Error: Failed to collect page data for /product/[id]/[slug]
    at /Users/a/b/c/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/utils.js:1233:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
 ELIFECYCLE  Command failed with exit code 1.

Affected runtime and version

node v20

Affected package manager and version

pnpm v9.12.0

Affected OS and version

macos

Build and bundle tools

Next.js

[ChristianMurphy]

Welcome @steebchen! 👋
Sorry you ran into a spot of trouble.

This project doesn't use document https://github.com/search?q=repo%3Aremarkjs%2Freact-markdown+document&type=code

The error is coming from somewhere else.
My guess is that next.js isn't correctly resolving exports for a dependency somewhere and chose the browser version instead of the server version.

[steebchen]

Hey thanks for the quick reply. Hmm it's super weird. I can basically comment this out and it works fine:

It is the same when my markdown content is just foo or something.

Any idea how I could figure out how an other dependency might be related?

[wooorm]

Closing as you indicate this is related to a very new Next 15; not Next 14; I haven’t seen this outside of Next. The problem and the fix are probably in Next 15. Not here.

Issues are for issues. General debugging help can go in other places.

I would recommend asking the multi-million dollar company for help with their new tools that do complex resolving things, which sounds like where the bug is.