[Next.js] Qull Editor Error : ReferenceError: document is not defined

🚨 에러 발생

Next.js 프로젝트 에서 Qull Editor 사용을 위해 샘플 컴포넌트를 만들던 중 `ReferenceError: document is not` 에러를 만났다

⨯ ReferenceError: document is not defined at __webpack_require__ (/Users/victor/Desktop/soulware/project/ttokD/next-publish-demo/next-publish-demo/.next/server/webpack-runtime.js:33:43) at __webpack_require__ (/Users/victor/Desktop/soulware/project/ttokD/next-publish-demo/next-publish-demo/.next/server/webpack-runtime.js:33:43) at eval (./components/ui/editor.tsx:9:69) at (ssr)/./components/ui/editor.tsx (/Users/victor/Desktop/soulware/project/ttokD/next-publish-demo/next-publish-demo/.next/server/app/test/page.js:184:1) at Object.__webpack_require__ [as require] (/Users/victor/Desktop/soulware/project/ttokD/next-publish-demo/next-publish-demo/.next/server/webpack-runtime.js:33:43) digest: "3831800141"

 

 

🍏 소스코드

'use client';

import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

export function CommonEditor() {
  const [value, setValue] = useState('');

  return <ReactQuill className="h-60" theme="snow" value={value} onChange={setValue} />;
}

 

 

 

🍎 해결 코드

'use client';

import dynamic from 'next/dynamic';
import React, { useState } from 'react';
import 'react-quill/dist/quill.snow.css';

const ReactQuill = dynamic(() => import('react-quill'), { ssr: false });
export function CommonEditor() {
  const [value, setValue] = useState('');

  return <ReactQuill className="h-60" theme="snow" value={value} onChange={setValue} />;
}

 

 

💊 분석

원인은 Next.js 서버사이드에서 Qull Editor 컴포넌트를 컴파일 하던 와중 document 객체를 찾을 수 없어 발생하는 에러이다. 

'use client'를 사용하면 서버사이드에서 렌더링을 하지 않아 이런 문제가 발생하지 않을 줄 알았는데 그게 아니었던 것 같다.

 

컴포넌트에서 'use client'를 사용해도 quill editor 구현부에서는 document에 접근하기 때문에 컴파일 과정에서 js 번들을 만들 때 document 객체에 접근하게 되고 `ReferenceError: document is not` 에러가 발생하는 것 같다.

 

해결 방법은 Qull Editor를 Next.js dynamic(동적 임포트)을 통해 ssr에서는 Qull Editor를 임포트 하지 않고 csr에서만 임포트 하여 사용하면 에러가 해결된다.