Error [ERR_REQUIRE_ESM]: require() of ES Module

[lhjeong60]

Hi, I m using Next.js v13 and I already use next-remove-imports, And I also check issue #184.
In my project, I have to render markdown in server side.

I got below Error when I import react-markdown-preview directly or dynamic import (next/dynamic) with ssr option as true.

error - Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/react-markdown/index.js from .../node_modules/@uiw/react-markdown-preview/lib/index.js not supported.

In my opinion, this error is caused by module between CommonJS and ES Module.
#184 and I both import out of browser which is electron, node.js, maybe they use CommonJS module System.
In node_modules/@uiw/react-markdown-preview/lib/index.js, some project was imported by CommonJS, but I Guess, they export ES module system only.

Now, I solve this problem by changing require() to (async () => await import())() in node_modules/@uiw/react-markdown-preview/lib/index.js
But I think this way is a bad idea.

Has anyone solved this problem?

[jaywcjlove]

@lhjeong60 uiwjs/react-md-editor#52 (comment)

[jaywcjlove]

@lhjeong60 https://codesandbox.io/embed/nextjs-example-react-md-editor-qjhn7?fontsize=14&hidenavigation=1&theme=dark

[lhjeong60]

thank you for replying.

I tested your suggestion. but when I changed ssr option of dynamic import as true, I got same error in codesandbox.
(In my project, I already use next-remove-imports and dynamic import)

@lhjeong60 https://codesandbox.io/embed/nextjs-example-react-md-editor-qjhn7?fontsize=14&hidenavigation=1&theme=dark

I want to use like below.

const Markdown = dynamic(
    () => import("@uiw/react-markdown-preview").then((mod) => mod.default),
    { ssr : true }
);

I want to import react-markdown-preview in server side. Is it possible?

[jaywcjlove]

@lhjeong60 The code highlight library does not support ssr

[lhjeong60]

Ok, then I'll find another way.

Thank you

[Yagasaki7K]

@lhjeong60 https://codesandbox.io/embed/nextjs-example-react-md-editor-qjhn7?fontsize=14&hidenavigation=1&theme=dark

If you has a problem in the future with "Error [ERR_REQUIRE_ESM]: require() of ES Module", just follow this code, in my case specially when I try to import a react-markdown-preview on my code.

That's work to me, using this code below and import dynamic from 'next/dynamic':

const MarkdownPreview = dynamic(
  () => import("@uiw/react-markdown-preview").then((mod) => mod.default),
  { ssr: false }
);

Of course with SSR false.

[RukshanJS]

This is such a frustrating issue. Wasn't able to solve in Nextjs with typescript