[Trouble Shotting] next js 에서의 react-quill 빌드 에러

발단

 

react-quill ( react 의 text 편집 라이브러리 ) 을 빌드 했을때 document undefiend 에러 발생

 

원인

next js 의 빌드시 ssr 관점에서 빌드 하기 때문에 브라우저의 window 나 document 를 사용하는 react quill 에서 빌드 에러 발생하는것으로 추정

 

해결책 1: dynamic import

 

 

Next js 공식문서에서는 다음과 같이 설명을 한다

 

By using next/dynamic, the header component will not be included in the page's initial JavaScript bundle.

 

With no SSR
To dynamically load a component on the client side, you can use the ssr option to disable server-rendering. This is useful if an external dependency or component relies on browser APIs like window.

 

import dynamic from 'next/dynamic'
 
const DynamicHeader = dynamic(() => import('../components/header'), {
  ssr: false,
})

 

간단히 말해서 초기 자바스크립터 번들에 포함 되지 않는다는것 같다.

 

많은 스택오버 플로우에서도 하지만 지속해서 에러가 난다. 

 

해결책 2:

usememo 사용 

사실 뭣도 모르고 그냥 써본것이다 

usememo 란 단순히 값을 재사용 하는것 뿐인데 위 문제랑 큰 관련이 없다 근본은 CSR 형식으로 구현되어있지만  SSR식으로 빌드 하려고 하기에 발생하는충돌이다.

 

마지막 해결책

빌드 에러 문구를 다시 보니 page data 를 모으는 과정에서 에러가 발생했다. 그 말인 즉슨 페이지 밖의 컴포넌트를 선언한다면 되지않을까??

 

성공했다. 그리고 더불어 next js 는 페이지별로 최적화 한다는 사실도 발견했다. 

 

참조

https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic