Can't get rehypeReact to parse HTML into React nodes.

[gillescoolen]

I want to parse markdown to React nodes, and replace some of the nodes. For example, I want to replace <a> tags with NextJS <Link>.

After reading the documentation, I assumed that the following code would do the trick.

  const result = unified()
    .use(remarkParse)
    .use(remarkRehype)
    .use(rehypeReact, {
      createElement,
      Fragment,
      components: {
        a: CustomLink
      }
    })
    .processSync(markdown);

That did not work, so I searched around and found rehypejs/rehype-react#15, which is a bit different from the basic examples. However, this too produced the same result.

When replacing rehypeReact with rehypeStringify, the markdown parses to HTML. When using rehypeReact however, the output is still normal markdown. When using rehypeStringify after rehypeReact, the result is normal HTML, without my custom component.

I'm probably missing something, but I can't seem to find it. Does anyone have a working example?

Thanks!

[wooorm]

Hi! What didn’t work?

What you call const result, isn’t the result. That’s a VFile. Which has a property called .result.
The example in the readme is a working example: https://github.com/rehypejs/rehype-react#use

[gillescoolen]

Ah I see now, I've been using .value all along. My bad. Thanks for the swift reply.