MDX support width appDir enabled

[Doodidan]

Verify canary release

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

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Home
    Binaries:
      Node: 18.14.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.2.5-canary.16
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), MDX (@next/mdx)

Link to the code that reproduces this issue

https://github.com/GoshaEgorian/next-mdx-bug-reproduction

To Reproduce

1. npm run dev
2. localhost:3000

Describe the Bug

MDX cannot be rendered with new app dir 'cause of context

Expected Behavior

MDX renders normally

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[KonstantinSimeonov]

I've ran into this as well. I tried splitting up the mdx code as components, adding a "use client" directive in them and then rendering them in a page, but this didn't work.

// stuff.mdx

"use client"

# hello

// page.tsx
import Hello from "./stuff.mdx"

export default function DoesntWork() {
  return <Hello />
}

[traversng]

@Doodidan I believe you need to import your mdx file in your page.tsx. Your example code shows just a page.md file with markdown.

1. Turn that page into content.mdx
2. Create a page.tsx file
3. Import that content into page.tsx like

import Content from './content.mdx'

export default function ShouldWork() {
  return <Content />
}

This should work in @latest

[MatthewCaseres]

I am having the same issue and have a reproduction with an mdx file - https://github.com/MatthewCaseres/mdx-repro. I am going to close my duplicate issue and just follow this issue.

@traversng do you have an example I can clone from where it is working properly with latest version?

[tannerabread]

Hi @MatthewCaseres for your case, if you move mdx-components.tsx to the root of your project it fixes the issue

[MatthewCaseres]

@tannerabread Thank you! The repo is updated to help as a working example for others who are having issues.

[Doodidan]

@Doodidan I believe you need to import your mdx file in your page.tsx. Your example code shows just a page.md file with markdown.

1. Turn that page into `content.mdx`

2. Create a `page.tsx` file

3. Import that content into `page.tsx` like

import Content from './content.mdx'

export default function ShouldWork() {
  return <Content />
}

This should work in @latest

Yes, I found working eample with this. But plain .mdx files without page.tsx work fine with old architecture. So, I find it as a bug.

[kossidts]

Thanks for the solution @Doodidan. It only works when I set the "use client"; directive at the top of page.tsx. Without that I am still getting the createContext-error.
To me it's not clear why the directive is necessary since I am using plain md and it's not mentioned once in the official documentation.

[mnieber]

@kossidts In my case, it was fixed when adding the mdx-components.tsx file as mentioned in the docs, and adding mdxRs: true in the config. It does work (for me) without use client.

[damien]

Hey folks! Chiming in that I've encountered this error as a somebody new to NextJS and getting up to speed with MDX. The instructions as is in the live docs invariably result in the same message reported above:

error createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

So my question: What's the intended path for usage of MDX going forward? What should I expect?

I'm fine using the implementation proposed (import MDX content into a TSX component and render from there with the appropriate client/server pragma)--but it'd be nice to know if the documentation is out of date or this is an ephemeral implementation issue within NextJS 13.x.

Cheers!

[mnieber]

@damien Are you using the mdx-components.tsx file and setting mdxRs: true in the config?