bug: @next/mdx strips line breaks when using jsx

[lloydrichards]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:14:38 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6020
  Available memory (MB): 32768
  Available CPU cores: 12
Binaries:
  Node: 20.9.0
  npm: 10.8.3
  Yarn: 1.22.21
  pnpm: 8.10.5
Relevant Packages:
  next: 15.2.0-canary.8 // Latest available version is detected (15.2.0-canary.8).
  eslint-config-next: 15.1.4
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.7.3
Next.js Config:
  output: N/A

Which example does this report relate to?

https://github.com/lloydrichards/err_nextjs-mermaid-mdx

What browser are you using? (if relevant)

Arc (Chromium Engine) Version 131.0.6778.265

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

While adding Mermaid charts to my personal site (lloydrichards/proj_portfolio-website@3c37eb9) I ran into an issue where mermaid charts from local paths using @next/mdx would render incorrectly compared to those I render remotely using next-mdx-remote.

remote version

local version

I found a quick work around which was to add semi-colons (;) to the end of every line which would cause the mermaid chart to render. But it was bugging me that this was an issue so dug into it further:

What turns out to be happening is that when I have the {jsx: true} prop set in the createMDX() it would strip the return characters from the charts prop that are fed to the Mermaid component:

remote version

local version

I'm not sure if this expected behaviour? maybe something to do with how the JSX is being generated in different places? But it was unexpected and very hard to debug so maybe it can be useful to align the behaviours.

Expected Behavior

My expectation would be that the createMDX() passes the props through to the components in the same formatting (with line breaks) regardless of if the JSX prop is set to true or false.

To Reproduce

I've created a minimal repo to show the bug: https://github.com/lloydrichards/err_nextjs-mermaid-mdx

To get it started you can npm install && npm run dev and then click on the two links to see the different results.

The architecture works by using next-mdx-remote to build the exact same content from the ./app/local/page.mdx into the ./app/remote/page.tsx and renders the content using compileMDX() inside the ./server/get-remote.ts

To make things extra verbose, i've also console logged out the props.charts in the Mermaid component so you can see in the terminal whats getting rendered.

graph TD A-->B A-->C B-->D C-->D
graph TD; A-->B; A-->C; B-->D; C-->D;
 GET /local 200 in 57ms
 ✓ Compiled /favicon.ico in 171ms (2310 modules)
 GET /favicon.ico 200 in 224ms
graph TD
  A-->B
  A-->C
  B-->D
  C-->D
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
 GET /remote 200 in 51ms

I would recommend checking it out with the bug, then going into the next.config.ts and removing the jsx prop to see it working as expected.