Open Doodidan opened 1 year ago
I've ran into this as well. I tried splitting up the mdx code as components, adding a "use client"
directive in them and then rendering them in a page, but this didn't work.
// stuff.mdx
"use client"
# hello
// page.tsx
import Hello from "./stuff.mdx"
export default function DoesntWork() {
return <Hello />
}
@Doodidan I believe you need to import your mdx file in your page.tsx. Your example code shows just a page.md file with markdown.
content.mdx
page.tsx
filepage.tsx
like
import Content from './content.mdx'
export default function ShouldWork() {
return
This should work in `@latest`
I am having the same issue and have a reproduction with an mdx file - https://github.com/MatthewCaseres/mdx-repro. I am going to close my duplicate issue and just follow this issue.
@traversng do you have an example I can clone from where it is working properly with latest version?
Hi @MatthewCaseres for your case, if you move mdx-components.tsx
to the root of your project it fixes the issue
@tannerabread Thank you! The repo is updated to help as a working example for others who are having issues.
@Doodidan I believe you need to import your mdx file in your page.tsx. Your example code shows just a page.md file with markdown.
1. Turn that page into `content.mdx` 2. Create a `page.tsx` file 3. Import that content into `page.tsx` like
import Content from './content.mdx' export default function ShouldWork() { return <Content /> }
This should work in
@latest
Yes, I found working eample with this. But plain .mdx files without page.tsx work fine with old architecture. So, I find it as a bug.
Thanks for the solution @Doodidan. It only works when I set the "use client";
directive at the top of page.tsx
. Without that I am still getting the createContext
-error.
To me it's not clear why the directive is necessary since I am using plain md
and it's not mentioned once in the official documentation.
@kossidts In my case, it was fixed when adding the mdx-components.tsx file as mentioned in the docs, and adding mdxRs: true in the config. It does work (for me) without use client
.
Hey folks! Chiming in that I've encountered this error as a somebody new to NextJS and getting up to speed with MDX. The instructions as is in the live docs invariably result in the same message reported above:
error 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
So my question: What's the intended path for usage of MDX going forward? What should I expect?
I'm fine using the implementation proposed (import MDX content into a TSX component and render from there with the appropriate client/server pragma)--but it'd be nice to know if the documentation is out of date or this is an ephemeral implementation issue within NextJS 13.x.
Cheers!
@damien Are you using the mdx-components.tsx file and setting mdxRs: true in the config?
@damien Are you using the mdx-components.tsx file and setting mdxRs: true in the config?
I did this but am still experiencing the error. I don't know how to debug what is causing this, in part because I don't understand how mdx-components.tsx
is supposed to fix this.
@mizlan Just to be sure, I followed these instructions: https://nextjs.org/docs/app/building-your-application/configuring/mdx (there is a possible gotcha of following the instructions for pages
instead of app
).
Hmm, yeah I followed that. Also to note, I am trying to use it via a dynamic import, like as here (except his works and mine doesn't, for some reason...)
@mizlan I am not sure if this is the solution but I think you need to configure pageExtensions to include md and mdx as shown in https://nextjs.org/docs/pages/building-your-application/configuring/mdx
// next.config.js
...
const nextConfig = {
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
...
}
...
Ah I resolved it, I did something dumb. (I had the "if you're gonna use MDXProvider" part uncommented without actually using that)
Thanks for your time and help!
Hi @MatthewCaseres for your case, if you move
mdx-components.tsx
to the root of your project it fixes the issue
This is the solution!
Yes, in my experience mdx-components.tsx
is necessary even if you don't want to customize markdown elements. Just create that file and put it in the root folder with content like this:
import React from "react"
import type { MDXComponents } from "mdx/types"
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
...components
}
}
placing mdx-components.tsx in the root of project fix this issue
Ensure mdx-components.tsx
is at the root ie src/mdx-components.tsx
Not working with contentlayer + mdx + app
This seems to work:
'use client';
import Content from "./content.mdx";
export default function Page() {
return <Content />;
}
How I moved from ContentLayer to Next MDX. ContentLayer seems to no longer be maintained and has a lot of bugs:
elie222/inbox-zero@cf42b0b
(#79)
Hi @MatthewCaseres for your case, if you move
mdx-components.tsx
to the root of your project it fixes the issue
Thanks! It helped.
Anyone that has a good explanation to why I have to add "use client" to my page for it to render?
This is what my page.tsx looks like:
"use client";
import { Slide } from "../_slides/config";
type Props = {
params: {
id: string;
};
};
const page = ({ params }: Props) => {
const slideId = parseInt(params.id, 10);
return (
<div>
<Slide slideId={slideId} />
</div>
);
};
export default page;
As I see it that should completely valid without "use client".
Okay,after 30mins checking,I finally found the solution for me:
mdx-components.tsx
to the ./src
or the parent folder of /app
(as the official document said).mdx-components.tsx
,which I dumbly wrote it for trying solving client-components error. .next
folder. That's the major evil bug for me.The bad cache made me even done right thing,the error still occurs.Okay,after 30mins checking,I finally found the solution for me:
- Move the
mdx-components.tsx
to the./src
or the parent folder of/app
(as the official document said).- Delete the "use client" annotation at the top of
mdx-components.tsx
,which I dumbly wrote it for trying solving client-components error.- Delete the
.next
folder. That's the major evil bug for me.The bad cache made me even done right thing,the error still occurs.
Still doesn't work for me :(
@Doodidan I believe you need to import your mdx file in your page.tsx. Your example code shows just a page.md file with markdown.
1. Turn that page into `content.mdx` 2. Create a `page.tsx` file 3. Import that content into `page.tsx` like
import Content from './content.mdx' export default function ShouldWork() { return <Content /> }
This should work in
@latest
Yes, I found working eample with this. But plain .mdx files without page.tsx work fine with old architecture. So, I find it as a bug.
this works but need to add "use client" directive on page.tsx
Verify canary release
Provide environment information
Which area(s) of Next.js are affected? (leave empty if unsure)
App directory (appDir: true), MDX (@next/mdx)
Link to the code that reproduces this issue
https://github.com/GoshaEgorian/next-mdx-bug-reproduction
To Reproduce
Describe the Bug
MDX cannot be rendered with new app dir 'cause of context
Expected Behavior
MDX renders normally
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response