Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

MDX breaks as now requires "use client" #57538

Open
1 task done
LunaticMuch opened this issue Oct 26, 2023 · 6 comments
Open
1 task done

MDX breaks as now requires "use client" #57538

LunaticMuch opened this issue Oct 26, 2023 · 6 comments
Labels
bug Issue was opened via the bug report template. Markdown (MDX) Related to Markdown with Next.js.

Comments

@LunaticMuch
Copy link

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

  • 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.
@LunaticMuch LunaticMuch added the bug Issue was opened via the bug report template. label Oct 26, 2023
@github-actions github-actions bot added the Markdown (MDX) Related to Markdown with Next.js. label Oct 26, 2023
@irawel
Copy link

irawel commented Oct 31, 2023

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

@BastKakrolot
Copy link

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

@kyldvs
Copy link

kyldvs commented Feb 8, 2024

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
Copy link

rohan-kiratsata commented Mar 3, 2024 •
edited
Loading

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
Copy link

kyldvs commented Mar 3, 2024

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template. Markdown (MDX) Related to Markdown with Next.js.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@LunaticMuch @kyldvs @irawel @BastKakrolot @rohan-kiratsata @CaseSens