Open LudoLogical opened 9 months ago
+1
Edit by maintainers: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!
Seems to have changed between v14.0.3 and v14.0.4, it was working for me with v14.0.3.
Running into exactly the same issue. Following the steps from the tutorial and then trying to manipulate/read children
in the wrapper returns no usable result.
Our use case is reading the content and creating a table of content for all heading elements.
Did you find any solution for this?
I can confirm it works in v14.0.3
. We were using 14.2.0-canary.0
where it definitely doesn't work.
Also not working in v14.1.3
after following docs
Hi folks! Someone has a solution with the app router to get the TOC ?
Link to the code that reproduces this issue
https://github.com/LudoLogical/next-mdx-custom-wrapper-demo
To Reproduce
npx create-next-app@latest -e reproduction-template
Follow the steps from App Router > Building Your Application > Configuring > MDX in the docs:
npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx
Create
/mdx-components.tsx
and add the following:Change
/next.config.js
to read as follows:Create
/app/test/page.mdx
and add the following:Edit
/mdx-components.tsx
to add a custom component definition forwrapper
:npm run dev
and navigate tolocalhost:3000/test
Current vs. Expected behavior
Current
The following is the result of the first
console.log()
:The second
console.log()
outputsundefined
.Expected
The behavior shown in "The X in MDX," a short talk by Rodrigo Pombo on the Vercel YouTube channel. Note that the talk concerns the pages router, but the equivalent behavior is highly desirable in app router so that the effect that Pombo creates can be replicated. The console output should be something like what Pombo shows here - i.e., it should be possible to manipulate the
ReactElement
s generated from the input MDX to, for example, create a table of contents from the headers.Verify canary release
Provide environment information
Which area(s) are affected? (Select all that apply)
App Router, MDX (@next/mdx)
Additional context
Current workarounds:
remark
and/orrehype
plugins as detailed here<MyMDXContent />
ReactElement
in adiv
and apply a callback ref in which you either manipulate theElement
s directly or set auseState()
variable whose contents are rendered if they exist with newReactElement
(s). (Of course,useEffect()
with an empty dependency array can also be used to achieve this, but there can be some problems with that approach.)Notably absent from this list is the use of a
layout.tsx
file, asconsole.log()
ing thechildren
prop there produces the same output shown in the "Current vs. Expected behavior" section above. The issue stems from the fact that the translation from MDX to React code has not yet taken place.Possibly related reading (the potential fixes discussed within do not resolve this issue):