Incompatible types when used with next-mdx-remote

[plushugh]

When I was trying to highlight code with next-mdx-remote:

const mdxSource = await serialize(content, {
    mdxOptions: {
      rehypePlugins: [
        [
          rehypeShiki,
          {
            highlighter: await shiki.getHighlighter({
              langs: [
                "html",
                "css",
                "scss",
                "jsx",
                "tsx",
                "javascript",
                "typescript",
                "docker",
                "markdown",
                "json",
                "mdx",
              ],
              theme: "nord",
            }),
          },
        ],
        rehypeSlug,
        rehypeAutolinkHeadings,
      ],
    },
    scope: data,
  });

It shows the following error

Type 'Plugin<[{ highlighter: Highlighter | { [key: string]: Highlighter; }; throwOnUnsupportedLanguage?: boolean | undefined; }], Settings>' is not assignable to type 'Plugin<[(Settings | undefined)?], Settings>'.
  Types of parameters 'settings_0' and 'settings_0' are incompatible.
    Type 'Settings | undefined' is not assignable to type '{ highlighter: Highlighter | { [key: string]: Highlighter; }; throwOnUnsupportedLanguage?: boolean | undefined; }'.
      Type 'undefined' is not assignable to type '{ highlighter: Highlighter | { [key: string]: Highlighter; }; throwOnUnsupportedLanguage?: boolean | undefined; }'.ts(2322)

[leafac]

This is a type error that seems to come from MDX, which seems to not handle too well the case of a plugin with required arguments (which is the case here, we require the highlighter). When using the plain unified pipeline, it seems to work well (see, for example, https://github.com/courselore/courselore/blob/aa3bd864c592311dc35dddce7d160af88b75da40/source/index.ts#L9098-L9103). Can you please check with MDX?

[adrienharnay]

Hi @plushugh, did you manage to make next-mdx-remote and @leafac/rehype-shiki work together?

With a simple example:

import rehypeShiki from '@leafac/rehype-shiki';
import { serialize } from 'next-mdx-remote/serialize';
import * as shiki from 'shiki';

...

serialize(source.toString(), {
  mdxOptions: {
    rehypePlugins: [
      [
        rehypeShiki,
        { highlighter: await shiki.getHighlighter({ theme: 'nord' }) },
      ],
    ],
  },
})

I am facing the following error:

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

@leafac if you have an idea also, I would be thankful!

[leafac]

That looks like a different issue. And it’s a weird one: Why would it complain about this syntax, which looks valid to me? I think we’d need a bit more context to figure it out. Can you please create a repository that with minimal reproduction of the situation?

[adrienharnay]

Hi, of course! I created a new issue with a reproduction repo here: https://github.com/leafac/rehype-shiki/issues/3. Thanks!

[leafac]

@plushugh: I recently updated this package to support the latest versions of unified & TypeScript. I didn’t address this issue directly, because I’m not even sure I understand what’s going on. But can you please update to the latest version and try it out anyway. Maybe it’s one of those problems that solves itself…

[monodyle]

I'm using the latest version and get the same error with this comment.

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

  27 | export default function MDXContent({
  28 |   components,
> 29 |   ...props
     |   ^
  30 | }) {
  31 |   return <MDXLayout {...layoutProps} {...props} components={components} mdxType="MDXLayout">
  32 |     <pre {...{

The code goes like this:

  const mdxSource = await serialize(content, {
    mdxOptions: {
      remarkPlugins: [remarkImages],
      rehypePlugins: [
        rehypeSlug,
        [
          rehypeShiki,
          { highlighter: await shiki.getHighlighter({ theme: "min-light" }) },
        ],
        rehypeAutolinkHeadings,
      ],
    },
    scope: data,
  })

Did anyone resolve this problem?

[leafac]

We’re investigating over https://github.com/leafac/rehype-shiki/issues/3

I believe this issue has to do not with rehype-shiki, but with something in the infrastructure—either Babel, webpack, or something like that. Note how the error messages refer to lines of code that don’t belong to this project.

@adrienharnay was kind enough to come up with a repository to reproduce the problem. But unfortunately I can’t get the code in the repository to work, and I don’t understand enough about the infrastructure (Babel, webpack, and so forth) to continue…