ResizeObserver is not defined

[aspnetde]

When adding the markdown editor to a current NextJs client component, building fails with a rather generic ReferenceError: ResizeObserver is not defined.

I don't have time for a reproduction test right now (sorry), but a quick workaround is using the polyfill as described here: https://stackoverflow.com/a/78560100/271150

[jaywcjlove]

@aspnetde You might need to move it to client-side rendering instead of server-side. Add 'use client'; at the top of the code.

[joelrb]

@aspnetde You might need to move it to client-side rendering instead of server-side. Add 'use client'; at the top of the code.

I have this issue. Both the parent and the component have "use client"; at the top of code. First time to use Markdown.

<MarkdownEditor value={description} enablePreview enableScroll height="600px" className="w-full" onChange={(value, viewUpdate) => setDescription(value)} />

[joelrb]

Indeed, adding this to the component seems to have fixed the issue.

import ResizeObserver from 'resize-observer-polyfill';
global.ResizeObserver = ResizeObserver;

When adding the markdown editor to a current NextJs client component, building fails with a rather generic ReferenceError: ResizeObserver is not defined.

I don't have time for a reproduction test right now (sorry), but a quick workaround is using the polyfill as described here: https://stackoverflow.com/a/78560100/271150