ReactQuill: “getEditor is not a function” error when inserting images

I am building a post-writing page using Next.js (13), React (18), Apollo Client, and ReactQuill. The goal is to allow users to insert images into the editor, upload them to a server, and display the images within the editor.

Problem

When I try to use ReactQuill’s quillRef.current.getEditor() method to access the Quill editor instance and insert an image using insertEmbed, I get the following error:

TypeError: _quillRef$current.getEditor is not a function

This issue prevents images from being displayed in the editor after upload.

---

What I’ve Tried

1. Accessing the Quill instance directly through the ref:

   const quill = quillRef.current.getEditor();

However, this results in the getEditor method being undefined.

2. Dynamically importing ReactQuill in Next.js to avoid SSR issues:

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

Even with dynamic import, the same error occurs.

3. Ensuring the quillRef.current is not null by adding a useEffect to check initialization.

I want to:

1. Allow users to upload images via ReactQuill.
2. Use the Quill editor instance to insert the image URL at the current selection.
3. Display the image in the editor after upload.

Minimum Reproducible Code

Here’s the simplified code where the issue occurs:

import dynamic from "next/dynamic";
import { useRef, useState } from "react";

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

export default function Write() {
  const quillRef = useRef(null);
  const [content, setContent] = useState("");

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

    input.onchange = async () => {
      const file = input.files[0];
      const formData = new FormData();
      formData.append("file", file);

      try {
        const response = await fetch("http://localhost:4000/api/upload", {
          method: "POST",
          body: formData,
        });
        const data = await response.json();

        const quill = quillRef.current.getEditor(); // 여기서 에러 발생
        const range = quill.getSelection();

        quill.insertEmbed(range.index, "image", data.url);
      } catch (error) {
        console.error("이미지 업로드 실패:", error);
      }
    };
  };

  const modules = {
    toolbar: {
      handlers: { image: imageHandler },
    },
  };

  return (
    <ReactQuill
      ref={quillRef}
      value={content}
      onChange={setContent}
      modules={modules}
      theme="snow"
    />
  );
}