Next 14버전 프로젝트에서 Editor 를 사용하기 위해 Toast ui 설치를 한 상황에서 발생한 에러 정리

개발 모드로 실행 했을땐 잘 표시 되는데 build 를 시도하면 아래와 같은 에러 발생

...
ReferenceError: navigator is not defined

빌드시에 ssr 할 페이지를 생성하다가 editor 라이브러리안에서 window에 있는 navigator 에 접근하려고 해서 생기는 에러

해결방법

dynamic import 와 ssr을 시키지 않는 방법으로 해결했다.
(어차피 에디터를 서버에서 랜더링 해서 가지고 있을 필요는 없는것 같다.)

1. dynamic import 할 컴포넌트를 만든다

   import { Editor, EditorProps } from "@toast-ui/react-editor";
   import React from "react";
   
   const DynamicEditor = ({ ...rest }: EditorProps) => {
     return <Editor {...rest} />;
   };
   
   export default DynamicEditor;

2. dynamic import를 하면서 ssr 를 사용하지 않겠다고 설정한다

   const DynamicEditor = dynamic(() => import("@/components/input/DynamicEditor"), {
     ssr: false,
     loading: () => <Skeleton width={908} height={600} />,
   });