The copy button is not working
Ryu1218 opened this issue · comments
After following the steps for configuring MDX as outlined on Next.js at https://nextjs.org/docs/app/building-your-application/configuring/mdx and implementing it according to the Expressive Code documentation, I encountered an error stating 'Error: page.mdx:Error: Cannot handle unknown node raw'. While I managed to make it display by using rehype-raw, a new issue arose with 'my-md-page:10 Uncaught SyntaxError: Unexpected token ')' in the console, leading to the copy button not working.
I'm having the exact same issue. There is also a hydration issue between the html escaped > to >
but that could be caused by whatever else is wrong.
├── @auth/drizzle-adapter@0.7.0
├── @expressive-code/plugin-line-numbers@0.34.1
├── @libsql/client@0.6.0
├── @mdx-js/loader@3.0.1
├── @mdx-js/react@3.0.1
├── @next/mdx@14.2.0
├── @t3-oss/env-nextjs@0.9.2
├── @types/better-sqlite3@7.6.9
├── @types/eslint@8.56.8
├── @types/mdx@2.0.13
├── @types/node@20.12.7
├── @types/react@18.2.76
├── @types/react-dom@18.2.25
├── @typescript-eslint/eslint-plugin@7.6.0
├── @typescript-eslint/parser@7.6.0
├── drizzle-kit@0.20.14
├── drizzle-orm@0.29.5
├── eslint@8.57.0
├── eslint-config-next@14.2.0
├── eslint-plugin-drizzle@0.2.3
├── next@14.2.0
├── next-auth@4.24.7
├── postcss@8.4.38
├── prettier@3.2.5
├── prettier-plugin-tailwindcss@0.5.13
├── react@18.2.0
├── react-dom@18.2.0
├── rehype-raw@7.0.0
├── remark-expressive-code@0.34.1
├── tailwindcss@3.4.3
├── typescript@5.4.5
└── zod@3.22.4
The "Uncaught SyntaxError: Unexpected token ')'" is coming from the javascript being html escaped. The () => { is being serialized into () => {
Thanks for reporting! I was able to reproduce the issue on my end as well and will fix it in a few days.
If you don't have time to get to this soon, I could give fixing it a shot. I have no idea where to start code location wise, but I did read through the CONTRIBUTING.md doc.
Where in the markdown to html transformation toolchain does the html escaping happen in Next.js? I looked through the remark-expressive-code package but that doesn't seem to be the problem.
First of all, thank you very much for offering help!
As promised, your report caused me to reproduce the error locally and have a look at what is causing it. The escaping seems to be happening in the Next.js MDX loader and affects the contents of any regular HAST elements, unfortunately including <script> and <style> element contents.
I found a solution to this issue, which consists of two parts:
- Moving EC processing one level later in the processing chain, from remark to rehype. This provides performance benefits by avoiding reparsing the raw HTML nodes and provides access to MDX JSX element nodes. I already released this part in v0.35.0.
- When the rehype plugin is processing pages in an environment like Next.js, use
mdxJsxFlowElementwithdangerouslySetInnerHTMLto create inline asset elements instead of using regular HASTElementnodes. This prevents the unwanted escaping from happening.
I'll commit part 2 of this solution later today and publish a patch. Then the issue should be gone. It's already working locally for me.
Sorry for not updating you earlier! After looking at this I realized that the changes required are probably too complex for a new contributor to fix, plus I didn't understand them myself fully yet, so I had to take a shot at fixing them myself.
I just released the fix in v0.35.1 of rehype-expressive-code. Please try switching from remark-expressive-code to the latest version of this new package, move it to rehypePlugins in your config, and let me know if it works for you!
I changed all the things mentioned in the docs and upgraded the packages, but I'm now getting a hydration error with a basic setup of nextjs with mdx.
Hmm, that's odd. I have added an example project to the EC repo and used this to test that the fix is working:
I can run the dev script in that folder, open the /mdx-page URL in my browser and get a fully working code block with no errors.
Could you have a look at this example and see if it works for you, and if so, what the difference to your repo is? Feel free to share a link to your repo or a minimal reproduction on StackBlitz.
I tried the example in the repo and I'm still getting the hydration error. I'll open another issue to keep this one in scope.
As discussed in the new issue #200, it wasn't actually an error in Expressive Code, but apparently some package manager fluke which @AlexanderHott fixed by deleting node_modules, upgrading pnpm and reinstalling packages. It's working now!