[react-markdown] Youtube embeds in Markdown (remark, rehype, react)

[teinett]

I created blog:

• frontend - Next.js
• backend - Strapi for API

Post has content (full text) in markdown in Strapi.

Next.js has component PostFull.js:

import Markdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import rehypeSanitize from 'rehype-sanitize';
import Typograf from 'typograf';
import styles from './PostFull.module.css';

const PostFull = ({ id, fulltext }) => {

    const tp = new Typograf({ locale: ['ru', 'en-US'] });
    const postFulltextTypografed = tp.execute(`${fulltext}`);

    return (
        <article className={styles.article} itemScope={true} itemType="http://schema.org/Article">
            ...
            <div className={styles.body}>
                <div className={styles.content} itemProp="articleBody">
                    <Markdown rehypePlugins={[rehypeRaw, rehypeSanitize]}>
                            {postFulltextTypografed}
                    </Markdown>
                </div>
            </div>
        </article>
    );
};

export default PostFull;

Some posts have youtube embeds, for example:

Text paragraph 1

https://www.youtube.com/watch?v=PRfV5TvRjEA

Text paragraph 2

How can I show this youtube video as an iframe?

I found https://github.com/sergioramos/remark-oembed, but can't understand the code.

I tried:

import remarkOembed from 'remark-oembed';
...
<Markdown 
    rehypePlugins={[rehypeRaw, rehypeSanitize]}
    remarkPlugins={[remarkOembed]}
>
    {postFulltextTypografed}
</Markdown>

Error in console:

error - ./node_modules/cacheable-lookup/source/index.js:10:1
Module not found: Can't resolve 'dns'
null
Error: `runSync` finished async. Use `run` instead
    at assertDone (/Users/teine/Development/traffic-exchange-media/media-frontend/node_modules/unified/index.js:452:11)
    at Function.runSync (/Users/teine/Development/traffic-exchange-media/media-frontend/node_modules/unified/index.js:311:5)
    at ReactMarkdown (/Users/teine/Development/traffic-exchange-media/media-frontend/node_modules/react-markdown/src/react-markdown.js:119:30)
    at processChild (/Users/teine/Development/traffic-exchange-media/media-frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/Users/teine/Development/traffic-exchange-media/media-frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/Users/teine/Development/traffic-exchange-media/media-frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/Users/teine/Development/traffic-exchange-media/media-frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/Users/teine/Development/traffic-exchange-media/media-frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage (/Users/teine/Development/traffic-exchange-media/media-frontend/node_modules/next/dist/next-server/server/render.js:54:854)
    at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:211:19)
    at Function.getInitialProps (webpack-internal:///./src/pages/_document.js:21:85)
    at loadGetInitialProps (/Users/teine/Development/traffic-exchange-media/media-frontend/node_modules/next/dist/next-server/lib/utils.js:5:101)
    at renderToHTML (/Users/teine/Development/traffic-exchange-media/media-frontend/node_modules/next/dist/next-server/server/render.js:54:1145)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async /Users/teine/Development/traffic-exchange-media/media-frontend/node_modules/next/dist/next-server/server/next-server.js:112:97

• Node: 14.16.1
• "react": "17.0.2",
• "react-dom": "17.0.2",
• "react-markdown": "^6.0.2",
• "rehype-raw": "^5.1.0",
• "rehype-sanitize": "^4.0.0",
• "remark": "^13.0.0",
• "remark-oembed": "^1.2.2",
• "typograf": "^6.12.0"

[teinett]

Is it problem with plugin remark-oembed?

module "/Users/teine/Development/traffic-exchange-media/media-frontend/node_modules/remark-oembed/index"
Could not find a declaration file for module 'remark-oembed'. '/Users/teine/Development/traffic-exchange-media/media-frontend/node_modules/remark-oembed/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/remark-oembed` if it exists or add a new declaration (.d.ts) file containing `declare module 'remark-oembed';`ts(7016)

[ChristianMurphy]

There are a number of things going on here

rehypeSanitize

This removes iframes, the schema would need to be updated to include iframe tags https://github.com/rehypejs/rehype-sanitize#schema

Module not found: Can't resolve 'dns'

this is coming from next/webpack not polyfilling the package dns.

Error: runSync finished async. Use run instead

this is because react-markdown currently expects all plugins to be syncronous
https://github.com/remarkjs/react-markdown/blob/8ed18dafa8de638ab72a8db29f156f9fd9cf9e2e/src/react-markdown.js#L119
remark-oembed is async https://github.com/sergioramos/remark-oembed/blob/6df241fbb4ae07bcf1222d3a8ece36835273b8e1/index.js#L310
A closely related package https://github.com/remarkjs/react-remark does support async plugins.

Is it problem with plugin remark-oembed?

Could not find a declaration file for module 'remark-oembed'. '/Users/teine/Development/traffic-exchange-media/media-frontend/node_modules/remark-oembed/index.js' implicitly has an 'any' type.
 Try `npm i --save-dev @types/remark-oembed` if it exists or add a new declaration (.d.ts) file containing `declare module 'remark-oembed';`ts(7016)

remark-oembed does not currently provide typescript typings.
You could request the feature is added, or add typings for the package to definitely typed.
Or // @ts-ignore could be applied.

[ChristianMurphy]

MDX/XDM also offer alternatives for rendering youtube like https://www.mdx-embed.com and https://github.com/CookPete/react-player

[teinett]

@ChristianMurphy Thank you very much for your such detailed answer!

I followed your advices.

1. I replaced react-markdown with react-remark:

// import Markdown from 'react-markdown';
import { Remark } from 'react-remark';
...
<Remark rehypePlugins={[rehypeRaw, rehypeSanitize]}>
    {postFulltextTypografed}
</Remark>

It works the same as react-markdown, it's good :)

2)rehypeSanitize removes iframes
I read the docs and googled possible code: I failed.

I understand that the code should be smth like this:

<Remark 
    rehypePlugins={[rehypeRaw, rehypeSanitize]}
    rehypeSanitizeOptions={{...}}
>
    {postFulltextTypografed}
</Remark>

But I didn't understand, which options should be there. Could you give me an advice, please?

3. next/webpack not polyfilling the package dns
   I asked for help in discussions Next/webpack not polyfilling the package dns (youtube embeds in markdown with remark) vercel/next.js#26035

4. remark-oembed does not currently provide typescript typings.
   I added issue Provide typescript typings (youtube embeds in markdown) sergioramos/remark-oembed#295

Also I tried comment // @ts-ignore, and it didn't help.

Answers https://stackoverflow.com/questions/51145180/how-to-use-ts-ignore-for-a-block said that it's an open issue.
Maybe, I didn't understand your advice properly. :(

[teinett]

The website will be not static.
We expect to have 10K+ pages, and static generation of the webpages would take very long time.
We are using SSR, getServerSideProps function of Next.js, and cache on Nginx side.

[wooorm]

SSR and such are “static” in this comparison. Dynamic here is used for things like an editor where you can both type markdown and view it. Sounds like you don’t need that at all.

---

There is no rehypeSanitizeOptions. you can pass a plugin with options like so: ...Plugins: [onePlugin, [anotherPlugin, {withOptions}]]

[ChristianMurphy]

Also I tried comment // @ts-ignore, and it didn't help.

Each TypeScript ignores applies to the next line after it, so it would need to be the line above import reactOembed from 'react-oembed';