Open plushugh opened 3 years ago
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?
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!
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?
Hi, of course! I created a new issue with a reproduction repo here: https://github.com/leafac/rehype-shiki/issues/3. Thanks!
@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…
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?
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…
When I was trying to highlight code with next-mdx-remote:
It shows the following error