importing MDX dynamically but getting createContext error

[khayden73]

Summary

I followed the docs for importing MDX files dynamically, and I'm getting this createContext error in a server component where I'm not using createContext.

createContext only works in Client Components. Add the "use client" directive at the top of the file to use it.

in app/blog/[slug]/page.tsx (3:29) @ Page

export default async function Page({params}: { params: Promise<{ slug: string }> }) {
  2 |     const {slug} = await params;
> 3 |     const {default: Post} = await import(`@/content/${slug}.mdx`)
    |                             ^

I'm not using createContext anywhere in my app so I'm not sure where it's getting that from.
If I comment out that import line, the page renders fine.

If I add use client it renders with content, but then I get errors about using async/await with a dynamic import in a client component

This entire app is built following the guides. So I haven't really done much customizations yet that I would expect to get me in trouble.
I confirmed that the slug has a value and the filename for that slug exists.

thank you

Additional information

• Node: 25.1.0
• npm: 11.6.2
• next: 16.1.1 // Latest available version is detected (16.1.1).
• eslint-config-next: N/A
• react: 19.2.3
• react-dom: 19.2.3
• typescript: 5.9.3

Example

No response

[Guddu-06]

Hi Khayden73,
so whats happening is that the MDX file itself is pulling in @mdx-js/react which uses creatcontext internally, though your page doesnt call createcontext, the imported MDX component does it.

thats why importing it in a server throws error, adding use client does fix it but it breaks async/await...

Keep the page as a server component, move the mdx render into a separate client component then dynamically import that client and then pass the MDX to it.

[khayden73]

thanks for the explanation. It's strange that would be the exact example from the docs and it doesn't work as shown.

So I added this inside my server component

const DynamicClientPost = dynamic(() => import('./ClientPost'), {
    loading: () => <p>loading...</p>
})

export default async function Page({params}: { params: Promise<{ slug: string }> }) {
    const {slug} = await params;

    return (
        <div>
            <h2>blog post page</h2>
            <h3>slug: {slug}</h3>
            <DynamicClientPost slug={slug}/>
        </div>
    )
}

But then in ClientPost.tsx I still can't seem to dynamically grab the mdx file and render it without running into an error.
I imagine MDX is still using a hook, because it's throwing this error.

Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. You can only call Hooks at the top level of your React function. For more information, see https://react.dev/link/rules-of-hooks
content/hello-world.mdx (7:1) @ MDXContent


  5 | what the heck is happening?
  6 |
> 7 | hello?
    | ^

And this is what I have inside ClientPost.tsx

'use client'

import {ReactNode, useEffect, useState} from "react";

interface ClientPostProps {
    slug: string
}

export default function ClientPost({slug}: ClientPostProps) {
    const [Post, setPost] = useState<ReactNode | null>(null);
    useEffect(() => {
        if (Post === null) {
            import(`@/content/${slug}.mdx`)
                .then((module) => {
                    const {default: MDXContent} = module;
                    setPost(MDXContent)
                });
        }
    });

    return (
        <div>
            {Post}
        </div>
    );
}

[pouriya73]

Hi @khayden73

ClientPost.tsx

'use client'

import { useEffect, useState } from 'react'

type Props = { slug: string }

export default function ClientPost({ slug }: Props) {
  const [MDX, setMDX] = useState<React.ComponentType | null>(null)

  useEffect(() => {
    let cancelled = false

    ;(async () => {
      const mod = await import(`@/content/${slug}.mdx`)
      if (!cancelled) setMDX(() => mod.default) // : function wrapper
    })()

    return () => {
      cancelled = true
    }
  }, [slug])

  if (!MDX) return <p>loading...</p>

  return <MDX />
}

app/blog/[slug]/page.tsx

import ClientPost from './ClientPost'

export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params

  return (
    <div>
      <h2>blog post page</h2>
      <ClientPost slug={slug} />
    </div>
  )
}

if you want use of lazy-load :

import dynamic from 'next/dynamic'

const ClientPost = dynamic(() => import('./ClientPost'), {
  ssr: false,
  loading: () => <p>loading...</p>,
})

[khayden73]

Thanks for the help. Turns out I just needed to modify my code to use ComponentType and then make sure I use the function wrapper in the state call, which I had tried earlier, but because I was using the wrong type, it was throwing errors, so thank you for that correction. I also modified my useEffect to return the cleanup function, that was a good call.

updated ClientPost.tsx

'use client'

import {ComponentType, useEffect, useState} from "react";

interface ClientPostProps {
    slug: string
}

export default function ClientPost({slug}: ClientPostProps) {
    const [MdxContent, setMdxContent] = useState<ComponentType | null>(null); // updated naming, this makes more sense

    useEffect(() => {
        let contentFetched = false;

        const fetchContent = async () => {
            const data = await import(`@/content/${slug}.mdx`);

            if (!contentFetched) {
                setMdxContent(() => data.default)
            }
        };

        fetchContent();

        return () => {
            contentFetched = true;
        };
    }, [slug]);

    if (!MdxContent) return <p>loading...</p>;

    return (
        <div>
            <MdxContent/>
        </div>
    );
}