Node is empty when using remarkGfm and react-remark

[bouteillerAlan]

It's seem I'm missing something, when I want to use remarkGfm with react-remark I got an empty div:

I have followed the example here: https://github.com/remarkjs/react-remark?tab=readme-ov-file#pass-options-to-component

content is:

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

**Bold text**
*Italic text*
~~Strikethrough~~
`Inline code`
==Highlight==

> Blockquote

The resulting is:

<div class="markdown-reader"><div class="reader-content"></div></div>

My component:

import { useEffect } from "react";
import { Remark } from "react-remark";
import remarkGfm from "remark-gfm";
import rehypeHighlight from "rehype-highlight";
import rehypeStringify from "rehype-stringify";
import "highlight.js/styles/github.min.css";
import "highlight.js/styles/github-dark.css";

interface MarkdownReaderProps {
  content: string;
  filePath: string | null;
}

const MarkdownReader: React.FC<MarkdownReaderProps> = ({ content, filePath }) => {

  useEffect(() => {
    console.log(content);
  }, [content])

  if (!filePath) {
    return (
      <div className="reader-empty">
        <p>Select a markdown file to view its content</p>
      </div>
    );
  }

  if (!content.trim()) {
    return (
      <div className="reader-empty">
        <p>This file is empty</p>
        <p>Switch to editor mode to add content</p>
      </div>
    );
  }

  return (
    <div className="markdown-reader">
      <div className="reader-content">
        <Remark
          remarkPlugins={[remarkGfm]}
          remarkToRehypeOptions={{ allowDangerousHtml: true }}
          rehypePlugins={[rehypeHighlight, rehypeStringify]}
        >
          {content}
        </Remark>
      </div>
    </div>
  );
};

export default MarkdownReader;

[remcohaszing]

react-rehype hasn’t been updated for a while. Try react-markdown instead.

[bouteillerAlan]

That does the job thanks :)