remark-directive plugin with react-markdown

[hakankaraduman]

Hi,

I'm trying to add react-directive to my app.

Here is the error I get

Error: Renderer for type `containerDirective` not defined or is not renderable

Here is how I added the plugin to my code

<ReactMarkdown
  plugins={[[gfm, { singleTilde: false }], [directive]]}
  source={doc.content}
  renderers={{ code: CodeHighlighter }}
/>

Below version didn't work too (directive not inside an array), and gave the same exact error

<ReactMarkdown
  plugins={[[gfm, { singleTilde: false }], directive]}
  source={doc.content}
  renderers={{ code: CodeHighlighter }}
/>

[wooorm]

remark-directive handles the parsing, not what component it gets turned into (it doesn’t know about React). The error reason that a renderer is missing, so the solution would be to look into adding a renderer for containerDirective (similar to how you have a renderer for code!)

[hakankaraduman]

Thank you so much for quick response. I understand now, it works.

Can I ask one more? Is there a way to import react components within markdown file, without using mdx, because it seems not compatible with react-markdown. and I like react-markdown gives more control.

[wooorm]

No, that is not possible. react-markdown really focusses on the markdown part. Components are more for developers.

without using mdx, because it seems not compatible with react-markdown. and I like react-markdown gives more control.

They are indeed not compatible, but I don’t understand what you mean by control? There’s a lot of things you can do with MDX! Maybe I can help there?

I published xdm yesterday, a modern MDX compiler, which you might be interested in

[hakankaraduman]

Main problem with mdx is, when using it with next.js, it accepts those md files as pages. So you don't have control over the page from other than md file.
I am developing a documentation site and if I use react-markdown, I can create metadata for table of content, navigation items etc. also put components around the react-markdown component for reusability.

I was explaining in detail why I need react component but while explaining to you, I figured out a solution. I only need a single component, I can get it with the directive plugin, just by adding another type.

Thank you very much for your quick help. I will checkout xdm too, if it helps me in any way.

[rjantoine]

Here is a plugin I created that adds remark-directive to react-markdown. :FancyCode[my code] will become and use the component you pass in as an argument. https://github.com/rjantoine/react-markdown-remark-directive