nextra icon indicating copy to clipboard operation
nextra copied to clipboard

TypeError: createContext only works in Client Components

Open nick-skriabin opened this issue 5 months ago • 3 comments

Describe the bug

Facing the following

TypeError: 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
  1 | /*@jsxRuntime automatic*/
  2 | /*@jsxImportSource react*/
> 3 | import {HOC_MDXWrapper} from "nextra/setup-page";
    | ^
  4 | import {useMDXComponents as _provideComponents} from "next-mdx-import-source-file";
  5 | export const metadata = {
  6 |   "title": "Welcome to My Documentation",

To Reproduce

Follow the official guide for nextra-theme-docs.

Environment:

Next 15, React 19 (wihtout compiler), Turbopack

"next": "15.3.4"
"nextra": "^4.2.17"
"nextra-theme-docs": "^4.2.17"
"react": "^19.0.0"
"react-dom": "^19.0.0"

Expected behavior

An MDX page rendered correctly

Screenshots

Image

Desktop (please complete the following information):

  • OS: macOS
  • Browser Arc, Chrome

nick-skriabin avatar Jul 03 '25 13:07 nick-skriabin

I'm also getting this issue on Ubuntu, with the following error:

 ⨯ TypeError: 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
    at [project]/content/docs/concepts.mdx.tsx [app-rsc] (ecmascript) (content/docs/concepts.mdx.tsx:3:0)
  1 | /*@jsxRuntime automatic*/
  2 | /*@jsxImportSource react*/
> 3 | import {useMDXComponents as _provideComponents} from "next-mdx-import-source-file";
  4 | export const metadata = {
  5 |   "title": "🧩 Concepts",
  6 |   "description": "This section contains the concepts for Rig.", {
  type: 'TypeError',
  page: '/'
}

joshua-mo-143 avatar Oct 15 '25 20:10 joshua-mo-143

Upgraded to next 16 and now seeing this :(

florianmartens avatar Oct 26 '25 17:10 florianmartens

Hi!

I’d like to work on this issue and submit a fix.

Plan: Reproduce the error with Next 15 + React 19 (app/ directory). Make the MDX components provider a client boundary (or refactor to a small client-only provider) so createContext isn’t called in a server component. Add a minimal example / test that covers the app-dir MDX case and a PR with the change + docs/changelog notes. I’ll work from a branch named fix/mdx-provider-client-boundary in my fork and open a PR that links this issue. Could you please assign this to me or add any guidance I should follow before starting?

Thanks

Faitholo avatar Nov 08 '25 16:11 Faitholo