How do I use ReactMarkdown with Deno's Fresh framework?

Question

I'm a deno/fresh newbie and really appreciate the help.

I'm importing ReactMarkup per the docs like this:

import ReactMarkdown from "https://esm.sh/react-markdown@7";

But it's unclear how to use it in the fresh/preact world. Naively I've tried the below, but that generates this error: TypeError: Cannot convert a Symbol value to a string...at E (https://esm.sh/v102/[email protected]/X-ZS8q/deno/preact-render-to-string.js:12:1829).

<ReactMarkdown>
  ### hey there
</ReactMarkdown>

Answer 1

FreshJs uses Preact instead of ReactJs which has some significant differences but to make it easier to move from ReactJs to Preact, Preact has a compatibility layer. To use the Preact compatibility layer instead of ReactJs you can specify to Esm that you want to alias (change a dependency) react as preact/compat aswell as any other external dependencies. To do that you can add ?alias to specify that you want to alias one of the dependencies. Then add =module, module being the name of the module you are aliasing. Finally add :module, module being the name of the module you want it to use instead. Then to add another alias you can add & and follow the same rules as before for as many modules as you need. One final thing that is important for modules that have dependencies is aliasing external, as it will also include any dependencies that the module needs to work properly.

For me, this worked perfectly.

import ReactMarkdown from 'https://esm.sh/react-markdown@7?alias=react:preact/compat&alias=external:preact/compat';

In my opinion the best thing to do would be to not use the react-markdown module and instead read about FreshJs Markdown Rendering and use the modules they suggest using.