examples(with-mdx): update to MDX 3 #62503
Conversation
The example was 2 major versions behind. The `@mdx-js/react` dependency was removed, as it doesn’t work with the app directory. Users should use `mdx-components.tsx` instead. Refs vercel#59693
remcohaszing
requested review from
timeyoutakeit and
leerob
and removed request for
a team
|
Allow CI Workflow Run
Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer |
| @@ -6,8 +6,7 @@ | |||
| "start": "next start" | |||
| }, | |||
| "dependencies": { | |||
| "@mdx-js/loader": "^1.5.1", | |||
| "@mdx-js/react": "^1.6.18", | |||
There was a problem hiding this comment.
There's a separate example for app router, should this dep remain?
https://github.com/vercel/next.js/tree/canary/examples/app-dir-mdx
There was a problem hiding this comment.
True, it's being covered there.
There was a problem hiding this comment.
The benefit that @mdx-js/react offers, is that it allows users to provide components for MDX files for different files in the React tree. IMO this is a niche use case. I think the mdx-components file is a much better solution for Next.js. Kudos to whoever came up with that.
@mdx-js/react works for the pages directory, but not for the app directory. It just crashes with a weird error. I personally found this confusing and I’ve heard so from others too.
Regardless of what works or doesn’t work, IMO it’s good to have a single blessed way to use MDX with Next.js. I think it’s hard to explain what the type of router has to do with this.
Using the mdx-components file better aligns with the DX after I implement support for provided components in the MDX language server. Just define them once globally, then use them in every MDX file.
What is missing from this PR though, is the addition of the mdx-components file. I could add it, but even better would be to merge #59693.
There was a problem hiding this comment.
FYI: The mdx-components file is only for the App Router, not for the Pages Router.
There was a problem hiding this comment.
FYI: The
mdx-componentsfile is only for the App Router, not for the Pages Router.
This confused me, because I see no special handling depending on the router type in https://github.com/vercel/next.js/blob/canary/packages/next-mdx/index.js. So I just tried it and this is simply not true. The mdx-components file works perfectly fine with either type of router.
|
@samcx would it be possible to get another review of this PR? |
Reverts #62503 This is currently failing tests that use this example [x-ref](https://github.com/vercel/next.js/actions/runs/9699835771/job/26771391310)
What?
Update the
with-mdxexample to MDX 3.Why?
The example was 2 major versions behind.
How?
By updating the version in
package.json. Also the@mdx-js/reactdependency was removed, as it doesn’t work with the app directory. Users should usemdx-components.tsxinstead.Refs #59693