ReactQuill 이미지 삽입 시 "getEditor is not a functuin" 에러 해결 방법

Question

문제현재 NextJS(13), nodejs 환경에서 react-quill 라이브러리로 게시판을 만들고 있습니다. react-quill에서 제공한 이미지를 삽입하면 multer 저장소에 이미지가 저장이 되지만, 클라이언트에서는 이미지가 삽입이 되지 않고 아래와 같은 에러가 발생합니다. ReactQuill의 quillRef.current.getEditor() 메서드를 호출해 Quill 에디터 인스턴스에 접근하려고 하면 다음과 같은 에러가 발생합니다.TypeError: _quillRef$current.getEditor is not a function시도한 방법ref를 이용한 Quill 인스턴스 접근 시도const quill = quillRef.current.getEditor(); Next.js에서 ReactQuill 동적 로딩 시도결과 : 두 방법 모두 같은 에러가 발생하고 있습니다. 제 생각에는 ReactQuill의 인스턴스를 참조하지 못해서 발생하는 에러라고 추측하고 있고, 로딩과 관련 에러 같은데 next 와 ReactQuill을 처음 써봐서 개념도 부족하다보니 문제 해결이 쉽지 않습니다 아래는 이슈 관련 코드 입니다. const ReactQuill = dynamic( async () => { const { default: RQ } = await import("react-quill"); return ({ forwardedRef, ...props }) => ; }, { ssr: false, } ); export default function Write(){ const quillRef = useRef(null); 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]; if (file) { 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(); if (!range) { console.error("No selection range found."); return; } // 서버에서 반환된 URL을 Quill 에디터에 삽입 quill.insertEmbed(range.index, "image", data.url); // React 상태 업데이트 const updatedContent = quill.root.innerHTML; setContent(updatedContent); } catch (error) { console.error("이미지 업로드 실패 : ", error); } } }; }; return ( ) }

ReactQuill 이미지 삽입 시 "getEditor is not a functuin" 에러 해결 방법

0개의 답변

기술 목록