Error when using with next-mdx-remote

[adrienharnay]

Hi,

When using @leafac/rehype-shiki with next-mdx-remote, I have an error (linked to babel transpilation?).

error - SyntaxError: unknown: Unexpected token (17:2)

  15 | export default function MDXContent({
  16 |   components,
> 17 |   ...props
     |   ^
  18 | }) {
  19 |   return <MDXLayout {...layoutProps} {...props} components={components} mdxType="MDXLayout">
  20 |     <pre {...{

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!

[leafac]

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.

[adrienharnay]

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.

[leafac]

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.

[adrienharnay]

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.

[leafac]

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?

[harrisjose]

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 😅

[leafac]

@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.