reactjsnext.jsresize-observer

Next.js: ReferenceError: ResizeObserver is not defined

I'm new to Next.js and I am trying to implement a markdown editor in my Next.js app but I am getiing the below error.

 ⨯ node_modules\@uiw\react-markdown-editor\esm\commands\fullscreen.js (29:29) @ ResizeObserver
 ⨯ Internal error: ReferenceError: ResizeObserver is not defined
    at Fullscreen (./node_modules/@uiw/react-markdown-editor/esm/commands/fullscreen.js:37:71)

I am using @uiw/react-markdown-editor and have tried installing @react-hook/resize-observer but it doesn't work,

I found this Stack Overflow question: getting ReferenceError: ResizeObserver is not defined, while not using it

Can anyone help me fixing this error if possible?

Solution

  • The problem is likely that Next.js is attempting to server-side render the editor component, and the web APIs that the editor use are not available in Node.js.

    There are instructions in the library's repository for using it with Next.js that tell us to load the package dynamically with ssr=false so that the component will not be rendered on the server:

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

    [Snippet taken from here]