Unable to access Editor instance with dynamically imported react-quill in NextJS

[sanderfish]

I'm using react-quill in a NextJS app. I'm looking to extend a part of the app where I want to force users to use the Quill instance with a specific formatting option enabled by default (list). To achieve this, I believe I need access to the Quill Editor instance.

However, when attempting to use a ref, I'm unable to call the getEditor method on the ref. The only method available is retry.

I've made a CodeSandbox: https://codesandbox.io/s/nextjs-dynamic-react-quill-ref-example-sxm64
Check the browser console to see what the ref object is.

Expected behavior:
I would expect the ref to contain a getEditor method

Actual behavior:
The ref only contains a retry method

Version:
2.0.0-beta.2

[jularbs]

have you found a solution for this. I am also experiencing this issue as well.

[sanderfish]

@jularbs I have not.

[alexkrolick]

Are you trying to do this in server-side render (SSR) mode? If so, does NextJS provide a window.document object? You can't SSR React-Quill without it.

[alexkrolick]

I am not an expert on Next, but it looks like this creates a dynamic component wrapper around ReactQuill.

const ReactQuill = dynamic(() => import("react-quill"), {
  ssr: false
});

When you render it, it's not giving you a ref to RQ, it's a ref to the wrapper that Next creates:

    <ReactQuill ref={quillRef} theme="snow" value={value} onChange={setValue} />

Here is an issue on the Next side that describes some potential solutions. Can you try one of them and see if it works for you?

vercel/next.js#4957

[mrgoonie]

Perhaps we could switch into this: https://www.npmjs.com/package/react-quilljs

Code example: https://codesandbox.io/s/laughing-surf-ox7q5

[kt3k]

When next/dynamic wraps the component, it doesn't seem forwarding ref to the internal component. If I wrapped ReactQuill component with ref renamed to forwardedRef, it seemed working.

https://codesandbox.io/s/nextjs-dynamic-react-quill-ref-example-forked-gyhz3

[CooperHash]

When next/dynamic wraps the component, it doesn't seem forwarding ref to the internal component. If I wrapped ReactQuill component with ref renamed to forwardedRef, it seemed working.

https://codesandbox.io/s/nextjs-dynamic-react-quill-ref-example-forked-gyhz3

but what about tsx file in next.js? your codesandbox is js

[hadarhubara10]

When next/dynamic wraps the component, it doesn't seem forwarding ref to the internal component. If I wrapped ReactQuill component with ref renamed to forwardedRef, it seemed working.
https://codesandbox.io/s/nextjs-dynamic-react-quill-ref-example-forked-gyhz3

but what about tsx file in next.js? your codesandbox is js

With TS

const ReactQuillComponent = dynamic(
  async () => {
    const { default: RQ } = await import('react-quill');

    const Component = ({ forwardedRef, ...props }: { forwardedRef: RefObject<ReactQuill> } & ReactQuillProps) => (
      <RQ ref={forwardedRef} {...props} />
    );

    Component.displayName = 'ReactQuillComponent';
    return Component;
  },
  {
    ssr: false,
  }
);

ReactQuillComponent.displayName = 'ReactQuillComponent';
);

[syed-shoaib-ali]

When next/dynamic wraps the component, it doesn't seem forwarding ref to the internal component. If I wrapped ReactQuill component with ref renamed to forwardedRef, it seemed working.

https://codesandbox.io/s/nextjs-dynamic-react-quill-ref-example-forked-gyhz3

brooooo 🙌🏻