[Next.js] react-quill 관련 document is not defined 오류 해결

Next.js react-quill 관련 document is not defined 오류 해결

ReferenceError: document is not defined

💡 에러가 발생한 상황

• 회사에서 Next.js로 개발된 관리자 페이지 배포를 맡아 진행하고 있었는데, AWS S3에 소스코드를 업로드 하기 위해 yarn build 명령어를 실행 시켰는데 위와 같은 오류가 발생하였다.
• 그런데 에러를 읽어보면 document가 정의 되지 않았다는 말과 함께 문제의 원인이 되는 파일은 quill.js 라는 라이브러리 모듈 파일,,? 이었기에 오류를 해석해도 원인이 뭔지 잘모르겠었다.

• 그러던 중 나와 같은 이슈를 겪은 글을 보니 react-quill 라이브러리를 가져다 쓴 컴포넌트 코드에 문제가 있었다는 것을 깨달았다!

const QuillBundle =
	// 해결 코드 typeof window === "object" ? ... : () => false
  typeof window === "object"
    ? dynamic({
        modules: () => {
          const components = {
            ReactQuill: import("react-quill"),
            ImageResize: import("quill-image-resize-module"),
          };
          return components;
        },
        ssr: false,
        render: (props, { ReactQuill, ImageResize }) => {
          const { Quill } = ReactQuill;
          Quill.register("modules/imageResize", ImageResize, true);

          return (
            <ReactQuill
              ref={(el) => props.setRef(el)}
              modules={props.module}
              className={props.className}
              defaultValue={props.defaultValue}
              onChange={props.onChange}
            />
          );
        },
      })
    : () => false;

• 위의 코드에서 typeof window === "object" ? ... : () => false 이 부분을 추가해주었더니 빌드가 정상적으로 이루어지고 마침내 success 되었다는 결과를 볼 수 있었다! (꽤 오래 고민했었다,,🥲)

💡 도움을 받은 github issue 글,,
document is not defined #292