ReactQuill with NextJS

Hey everyone, just wanted to share this with you. So I've been trying to find rich editors that were compatible with NextJS. Couldn't find any but I found a way to get ReactQuill working.

Import dynamic

import dynamic from 'next/dynamic'

After that import ReactQuill using dynamic

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

Now you can easily use it!
Example:

import { useState } from "react";
import dynamic from 'next/dynamic';
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import 'react-quill/dist/quill.snow.css';

function App() {
    const [value, setValue] = useState('')
    return(
       <ReactQuill value={value} onChange={setValue}/>
    )
}

export default App;

I hope this helps 😊

Comments

[Amresh Prasad Sinha]

Thanks a lot! You saved my time!

[Munir Ali Mohammed]

Arigato Guzaimas

[Umesh Chaudhary]

How do you import ReactQuill modules (quill-image-resizing -module) on the dynamic imports ?

[foysal]

same pblm

[CY]

Thank you! This is very helpful.

[Yoza Wiratama]

can not use ref for image upload handler

[Wendell D. Enc]

ref does not work with dynamic import. you can use this

dynamic import

const QuillNoSSRWrapper = dynamic(
  async () => {
    const { default: RQ } = await import('react-quill');
    // eslint-disable-next-line react/display-name
    return ({ forwardedRef, ...props }) => <RQ ref={forwardedRef} {...props} />;
  },
  { ssr: false }
);

create ref
const quillRef = useRef(null)

jsx

<QuillNoSSRWrapper
            forwardedRef={quillRef}
            ...
          />

then in image cllback handler you can now access the quill object and range
const quillObj = quillRef?.current?.getEditor();
const range = quillObj?.getSelection();

then append the image url after upload to the editor's current range

quillObj.editor.insertEmbed(range.index, 'image', data?.secure_url);

here the handler:

const quillImageCallback = async () => {
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.click();

    input.onchange = async () => {
      const file = input.files ? input.files[0] : null;
      let data = null;
      const formData = new FormData();
      formData.append('upload_preset', 'fixer-upper-v1');

      const quillObj = quillRef?.current?.getEditor();
      const range = quillObj?.getSelection();

      if (file) {
        formData.append('file', file);
        formData.append('resource_type', 'raw');
        formData.append('folder', `- ${fileData?.name}`);

        const responseUpload = await fetch(
          `${process.env.NEXT_PUBLIC_IMAGE_UPLOAD}/upload`,
          { method: 'POST', body: formData }
        );

        data = await responseUpload.json();
        if (data.error) {
          console.error(data.error);
        }

        quillObj.editor.insertEmbed(range.index, 'image', data?.secure_url);
      }
    };
  };

[Ivan Farkas]

Getting an error for forwardedRef
Property 'forwardedRef' does not exist on type '{}'.ts(2339)

return ({ forwardedRef, ...props }) => <RQ ref={forwardedRef} {...props} />;

[GaminiRainMaker]

Same Issue I am facing @ivanfarkas .Did you got any solution to it.

[L. Rommy Arbantas]

Many thanks for this!! ❤️

[Karthikeyan Dharmalingam]

Server Error
TypeError: Quill.register is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.

dev-to-uploads.s3.amazonaws.com/up...

dev-to-uploads.s3.amazonaws.com/up...

[A7U]

Can you show me how you imported React-quill?

[uttam vishvakarma]

Did you solution to it?

[Mobiot Yves André]

i believe , you made a typpo in the beginning of your post

import dynamic from 'react/dynamic'

(that library don't exist), instead of

import dynamic from 'next/dynamic';

you corrected in your final code

[A7U]

Thank you for noticing. Fixed!

[Ankit kumar]

toolbar is appearing twice. i don't know how to fix it.. i am using quill inside form element

[Robersom Aquino]

Add this CSS in your global style:

.quill > .ql-toolbar:first-child {
display: none !important;
}

Or in your next.config.js
reactStrictMode: false,

[MarceloPatropi]

SAme here. Didi you find a solution?

[Marco Mesen Campos]

Simple solution, I guess not the best:

// component:
<Editor value={html} onChange={setHtml} id="html-editor" />

// css
  #html-editor > div:nth-child(1) {
    display: none !important;
  }

I don't think it's the best either, but definitely better than the previous one

export function TextEditor(props: TextEditorProps) {
  const refElement = useRef<HTMLDivElement>(null);
  const [html, setHtml] = useState('The template will be here');

  useEffect(() => {
    if (refElement.current?.firstChild) {
      const children = Array.from(
        refElement.current.firstChild.childNodes
      ) as HTMLElement[];
      const duplicateTooltips = children.filter((el) => {
        return el.classList.contains('ql-toolbar');
      });
      if (duplicateTooltips.length > 1) {
        duplicateTooltips[0].remove();
      }
    }
  }, [refElement.current]);

  return (
    <div ref={refElement}>
      <Editor value={html} onChange={setHtml} />
    </div>
  );
}

[reachmeatanytime7]

Thank you!! This helped me :)

[foysal]

const QuillNoSSRWrapper = dynamic(() => import("react-quill"), {
ssr: false,
});
QuillNoSSRWrapper.register("modules/imageResize", ImageResize,);

but I want to register imageResizer it's showing error that imageResizer not exist