ReactQuill when using dynamic import in NextJS Error

[khteh]

Thanks for filing an issue!

If at all possible, please provide a Codesandbox or Codepen to demonstrate the problem you're having with React Quill. Here's a template to get you started.

⚠️ Make sure that your bug hasn't already been fixed by ReactQuill v2.0.0-beta.2. See the homepage for instructions on how to upgrade.

const ReactQuillNoSSR = dynamic(import("react-quill"), { ssr: false });
export interface HtmlFieldProps {
  className?: string;
}

const HtmlField: React.FC<HtmlFieldProps> = (props) => {
  const { className, ...rest } = props;

  return (
    <StyledRoot>
      <ReactQuillNoSSR
        modules={{
          clipboard: {
            matchVisual: false,
          },
        }}
        theme={"snow" as any}
        className={clsx(classes.root, className)}
        {...rest}
      />
    </StyledRoot>
  );
};

export default HtmlField;

bumps into the following error:

Type error: No overload matches this call.
  Overload 1 of 2, '(props: ReactQuillProps, context?: any): ReactElement<any, any> | Component<ReactQuillProps, any, any>', gave the following error.
    Type '{ children?: ReactNode; modules: { clipboard: { matchVisual: boolean; }; }; theme: any; className: string; }' is not assignable to type 'ReactQuillProps'.
      Types of property 'children' are incompatible.
        Type 'ReactNode' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
          Type 'string' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
  Overload 2 of 2, '(props: PropsWithChildren<ReactQuillProps>, context?: any): ReactElement<any, any> | Component<ReactQuillProps, any, any>', gave the following error.
    Type '{ children?: ReactNode; modules: { clipboard: { matchVisual: boolean; }; }; theme: any; className: string; }' is not assignable to type 'ReactQuillProps'.
      Types of property 'children' are incompatible.
        Type 'ReactNode' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.

  49 |   return (
  50 |     <StyledRoot>
> 51 |       <ReactQuillNoSSR
     |        ^

How to fix this?

Ticket due diligence

• [ x] I have verified that the issue persists under ReactQuill v2.0.0-beta.2
• [ ] I can't use the beta version for other reasons

ReactQuill version

• [ x] master
• [ ] v2.0.0-beta.2
• [ ] v2.0.0-beta.1
• [ ] 1.3.5
• [ ] 1.3.4 or older
• [ ] Other (fork)

FAQ

Is this a bug in Quill or ReactQuill?

ReactQuill is just a ~thin~ wrapper on top of the Quill editor. Often, what looks like a bug in ReactQuill, is actually a bug in the Quill editor itself. Before opening a ticket, please check the Quill documentation, and the issues page, and see if that answers your question first.

How do I access the wrapped Quill instance?

See the instance methods and API documentation.