[오류해결] ReferenceError: document is not defined

웹 에디터 사용을 위한 작업 중 NextJS 터미널에서 아래와 같은 오류가 출력되었다.

 

 

⨯ ReferenceError: document is not defined
at __webpack_require__ (C:\Users\PC-144\vscode\test\.next\server\webpack-runtime.js:33:43)
at __webpack_require__ (C:\Users\PC-144\vscode\test\.next\server\webpack-runtime.js:33:43)
at eval (./src/app/reference/testView1.tsx:10:69)
at (ssr)/./src/app/reference/testView1.tsx (C:\Users\PC-144\vscode\test\.next\server\app\page.js:184:1)
at __webpack_require__ (C:\Users\PC-144\vscode\test\.next\server\webpack-runtime.js:33:43)
null

 

 

 

 

 

1. 오류 발생 원인

NextJS는 SSR(Server Side Rendering) 방식으로 서버 사이드 렌더링이 일어난다. 서버 사이드에선 document를 찾을 수 없으며, SSR구조는 서버 측에서 렌더링이 먼저 이루어진 뒤 클라이언트로 보내지는 구조이다 보니 해당 오류가 발생하는 것이다. 

 

즉, document는 클라이언트 사이드에서 정의되는 기능인데 SSR이 동작하고 렌더링이 일어날 때 서버 사이드에서 정의가 되고 사용이 될려고 하기에 ReferenceError: document is not defined 오류가 발생하는 것이다.

 

// WebEditor.tsx

'use client'

import ReactQuill from "react-quill"; // 오류 발생 지점
import 'react-quill/dist/quill.snow.css';

const WebEditor = () => {
    return (
        <div>
            <ReactQuill theme="snow" /> 
        </div>
    )	
}

 

 

나 같은 경우엔 터미널에선 오류 메시지가 출력이 되지만 실제 브라우저 상에선 기능이 제대로 동작했었다.

동작은 잘 되더라도 추후에 문제가 될 수도 있기에 확실히 오류를 잡고 가기로 했다.

 

728x90

반응형

 

 

 

 

 

 

 

 

2. 오류 해결

대표적인 해결 방안으로 3가지가 있다.

첫번째는 단순한 방법으로 if문을 통해 document가 undefined인지 확인하는 방법이다.

if(typeof document !== undefiend) {
	'동작할 document 작성'
}

 

 

 

 

두 번째는 useEffect를 사용하는 것으로 deps에 빈 배열을 넣어서 컴포넌트가 마운트 후 진행하게 하는 것이다.

useEffect(() => {
	'동작할 document 작성'
}, []);

 

 

 

 

마지막 세 번째는 dynamic import를 사용한 방법으로 나는 이 방법을 오류를 해결하였다.

해당 방법은 공식 문서에서도 브라우저 상에서만 동작하는 기능을 정의할 때 사용하는 방법으로 추천한다고 한다.

// WebEditor.tsx

'use client'

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

const WebEditor = () => {
    return (
        <div>
            <ReactQuill theme="snow" /> 
        </div>
    )	
}