MDX breaks with "use client" in Next app router

Question

I've configured MDX with Next.js 14, but upon navigating to the mdx page, it throws the error:

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

My mdx-components.tsx is located at the root of the app directory. (app/mdx-components.tsx)

Here's my next.config.mjs:

import nextMDX from "@next/mdx";

/** @type {import('next').NextConfig} */

const nextConfig = {
  env: {
    AIRTABLE_API_KEY: process.env.AIRTABLE_API_KEY,
  },
  pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
};

const withMDX = nextMDX({
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
});

export default withMDX(nextConfig);

And here's mdx-components.tsx:

import type { MDXComponents } from "mdx/types";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  };
}

The page I'm trying to render is located at app/work/page.mdx

page.mdx simply contains the title in markdown format.

Tried Solutions:

• Configured from : Official Docs
• This GH issues (Issue persists. Most of them were suggesting to add mdx-components.tsx at root directory which I already have)
• Using MDX with NextJS 13 returning useContext error

Answer 1

I found a way around to deal this. All you need to have is create a page.jsx file or .tsx it's upto you. There you can import this mdx file with "use client" directive.

"use client";
import AnyNameOfYourChoice from "./page.mdx";

export default function Page() {
  return <AnyNameOfYourChoice />;
}

for more see this https://github.com/vercel/next.js/discussions/50897#discussioncomment-6122518