MDX breaks as now requires "use client"

[LunaticMuch]

Link to the code that reproduces this issue

https://github.com/LunaticMuch/redesigned-octo-fortnight

To Reproduce

1. Install NextJS v14
2. Follow the [manual](https://nextjs.org/docs/app/building-your-application/configuring/mdx) for installing MDX
3. Create a sample mdx page
4. Run npm run dev

Current vs. Expected behavior

You would expect to see the mdx page, instead

 ⨯ node_modules/@mdx-js/react/lib/index.js (30:19) @ React
 ⨯ 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 __webpack_require__ (/Users/stefano/_TEST/potato-world/.next/server/webpack-runtime.js:33:42)
    at eval (./app/mdx/page.mdx:6:85)
    at (rsc)/./app/mdx/page.mdx (/Users/stefano/_TEST/potato-world/.next/server/app/mdx/page.js:184:1)
    at Function.__webpack_require__ (/Users/stefano/_TEST/potato-world/.next/server/webpack-runtime.js:33:42)
    at async Promise.all (index 0)
    at async Promise.all (index 0)

Verify canary release

• [X] 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.0.0: Fri Sep 15 14:41:43 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T6000
Binaries:
  Node: 20.5.1
  npm: 9.8.0
  Yarn: 1.22.19
  pnpm: 8.7.6
Relevant Packages:
  next: 14.0.0
  eslint-config-next: 14.0.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

MDX (@next/mdx)

Additional context

I just did a simple test following the manual.

[irawel]

Make sure you have mdx-components.tsx file at the root of your poject.

[BastKakrolot]

I also encountered the same problem, this was my solution, I once thought if I had configured it wrong!

[kyldvs]

Had the same issue, specifically mdx-components.tsx needs to be inside the root directory, NOT root/app like in your example: https://github.com/LunaticMuch/redesigned-octo-fortnight/blob/main/app/mdx-components.tsx

I wish the documentation made this more clear, or the error called out that it couldn't find mdx-components.tsx in the appropriate file location.

[rohan-kiratsata]

Make sure you have mdx-components.tsx file at the root of your poject.

The problem persists, even though I have mdx-components.tsx at root of app directory, the error remains unchanged.

[kyldvs]

The problem persists, even though I have mdx-components.tsx at root of app directory, the error remains unchanged.

See my previous comment, mdx-components.tsx should not be in the /app directory.

[CaseSens]

See my previous comment, mdx-components.tsx should not be in the /app directory.

Tested: 9/22/2024.

Result: Success

Added mdx-components.tsx file which contains:

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

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

Note: Make sure to restart the server once it's added.