Problems parsing frontmatter

[sebald]

Hey! First of all thanks for continuing with this lib! 🥳

I tried to upgrade our project but ran into an issue. It seems like contentlayer2 has an issue with parsing frontmatter in .mdx files:

I tried to add the remark plugin like described here. But it seems like the issue is contentlayer internal. Looking at the code, contentlayer should be able to parse frontmatter already.

Is this a known issue or is it something on our side?

[fixtse]

Hi, I ran into the same issue when trying the updated packages.

[lloydrichards]

Had the same issue. The problem is apparent remark-gfm v3. By upgrading to v4 it solved the problem. (also make sure to remove contentlayer from node-modules and update imports to contentlayer2 since the first time I did this It was still using the first package 🤦 )

[timlrx]

contentlayer2 only supports remark / rehype packages using the latest unified js packages (v11+) e.g. remark-gfm@4.0.0. If you have upgraded the packages and it still throws an error, could you share a link to the repository?

[sebald]

@timlrx thanks for the quick reply. I just checked again and at least I hope i updated all the plugins (luckily typescript also warns if you forget!).

This is the repo/branch I am trying to update: https://github.com/marigold-ui/marigold/tree/contentlayer2

You find the next app under /docs. Here is the package.json and contentlayer config:

• https://github.com/marigold-ui/marigold/blob/contentlayer2/docs/package.json
• https://github.com/marigold-ui/marigold/blob/contentlayer2/docs/contentlayer.config.ts

pnpm start start the next app.

[sebald]

If I can help investigate, let me know!

[sebald]

I investigated a bit more, it seems like our rehype plugin is the reason it breaks.

Specifically this code:

https://github.com/marigold-ui/marigold/blob/contentlayer2/docs/lib/mdx/rehype-component-demo.tsx#L108-L127

The unist-builder seems to break thinkgs 🤔

[sebald]

Since this is not an issue with contentlayer2 I will close this. Thanks for all the feedback and picking up the project 🥳

[lishaduck]

It seems that the order matters.

This works:

    rehypePlugins: [
      [
        rehypePrettyCode,
        {
          ...DEFAULT_REHYPE_PRETTY_CODE_OPTIONS,
          theme: {
            dark: "github-dark",
            light: "github-light"
          },
          transformers: [
            // FIXME: Make it actually work. Currently it doesn't transform the code blocks.
            transformerTwoslash({
              explicitTrigger: true,
              renderer: rendererClassic()
            })
          ]
        } satisfies RehypePrettyCodeOptions
      ],
      [rehypeRaw, { passThrough: nodeTypes }],
      rehypeMdxCodeProps,
      rehypeSlug
    ]

This works, but incorrectly:

    rehypePlugins: [
      [rehypeRaw, { passThrough: nodeTypes }],
      [
        rehypePrettyCode,
        {
          ...DEFAULT_REHYPE_PRETTY_CODE_OPTIONS,
          theme: {
            dark: "github-dark",
            light: "github-light"
          },
          transformers: [
            // FIXME: Make it actually work. Currently it doesn't transform the code blocks.
            transformerTwoslash({
              explicitTrigger: true,
              renderer: rendererClassic()
            })
          ]
        } satisfies RehypePrettyCodeOptions
      ],
      rehypeSlug,
      rehypeMdxCodeProps
    ]

Any other config (haven't tried them all, but most of them) lead to the frontmatter error.