Open adrienharnay opened 3 years ago
Hi @adrienharnay,
Thanks for reaching out and for the detailed bug report.
I followed the steps you described but ended up with a different error:
Error: error:0308010C:digital envelope routines::unsupported
I suppose this has nothing to do with the issue you’re facing. Then again, I don’t have too much experience with next, webpack, and friends, to figure this out.
In any case, I recently updated @leafac/rehype-shiki to support the latest versions of unified and TypeScript. Can you please update, give it another try, and report back? Maybe the issue solved itself…
Best.
Hi @leafac,
Sorry I took so long to answer. I upgraded next, next-mdx-remote, and @leafac/shiki to latest then tested again. Unfortunately the error persists.
Oh, that’s too bad. No free lunch today 😛
The issue really seems to be coming from some other part of the infrastructure that isn’t directly related to Shiki or rehype-shiki. Note how the error message is about MDXContent, which isn’t a part of these libraries. Do you think you can isolate the issue further? Maybe try removing rehype-shiki and see if the issue persists, maybe try removing Shiki entirely—that sort of thing.
I already tested commenting shikiHighlighter
and the problem goes away (you can test it on the simple repro). I'm not sure where the problem comes from but I believed it is linked to shiki or rehype-shiki.
I believe that the issue is somewhere else in the infrastructure. Shiki & rehype-shiki are surfacing the issue, but the issue lies somewhere else. Note how Shiki’s & rehype-shiki’s codebases aren’t concerned with MDX—there aren’t even references to MDXContent in the codebases. Can you please check with the maintainers of the projects related to MDX?
Got the same issue that is mentioned here and on #1 by @monodyle.
An easy fix is to update to next-mdx-remote@v4.0.0rc-1. This uses the latest MDX version which is a bit more explicit with compilation errors.
Once you've done this, you should be getting an error like Cannot handle unknown node raw
. This can be fixed by adding rehype-raw to your rehype plugins:
import rehypeShiki from '@leafac/rehype-shiki'
import rehypeRaw from 'rehype-raw'
import { getHighlighter } from 'shiki'
import { nodeTypes } from '@mdx-js/mdx'
export const getMdxOptions = async () => ({
remarkPlugins: [],
rehypePlugins: [
[
rehypeShiki,
{
highlighter: await getHighlighter({
theme: 'nord',
}),
},
],
[rehypeRaw, { passThrough: nodeTypes }],
],
})
@leafac According to this comment, the way this plugin inserts the output from Shiki into the ast might be the reason for the above? I don't nearly have enough experience with unified to be sure though 😅
@harrisjose, thanks for the extra information and for finding a workaround. @adrienharnay can you please add rehype-raw to your case and see if it helps?
@leafac According to this comment, the way this plugin inserts the output from Shiki into the ast might be the reason for the above? I don't nearly have enough experience with unified to be sure though 😅
Oh, that’s interesting. But I don’t think it applies here. As far as I understand, unlike remark-shiki-twoslash, rehype-shiki doesn’t inject HTML into the syntax tree. We parse the HTML and inject the resulting nodes, just like wooorm recommended.
Hi,
When using @leafac/rehype-shiki with next-mdx-remote, I have an error (linked to babel transpilation?).
Here is the most simple reproduction with steps to reproduce: https://github.com/adrienharnay/leafac-rehype-shiki-next-mdx-remote-bug-repro
Thanks in advance for looking into it!