remarkjs/react-markdown

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

steebchen opened this issue · 4 comments

steebchen commented

Initial checklist

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/next@15.0.1_@babel+core@7.25.8_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/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/next@15.0.1_@babel+core@7.25.8_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/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/next@15.0.1_@babel+core@7.25.8_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/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 commented

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 commented

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

IntelliJ IDEA 2024-10-26 22 53 11 IntelliJ IDEA 2024-10-26 22 53 26

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 commented

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.

  • 😄2
github-actions commented

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.