Next/webpack not polyfilling the package dns (youtube embeds in markdown with remark)

[teinett]

I have a problem with Markdown and Youtube embeds.
I use react-markdown or react-remark for Markdown and tried to use remark-oembed for Youtube embeds inside Markdown

Example of Markdown:

Text paragraph 1

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

Text paragraph 2

Everything is OK without package remark-oembed (but Youtube link stays as a string, not transforming to iframe).
After adding remark-oembed I receive the error in console:

error - ./node_modules/cacheable-lookup/source/index.js:10:1
Module not found: Can't resolve 'dns'
null

Maintainer of remark said:

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

Could you add polyfill for the dns, please?
Or could you help me with possible solutions?

The full problem is described in remarkjs/remark#742.

My code

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

The same problem stays after I changed the Markdown package from react-markdown to react-remark(it was mentioned in answer remarkjs/remark#742 (comment)):

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

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