Ckeditor 이슈 이유 추측

Cannot find module '@ckeditor/ckeditor5-react' or its corresponding type declarations. 오류 발생

해결

declare module '@ckeditor/*' {
  const classes: any;
  export default classes;
}
// types/index.d.ts

출처 : https://stackoverflow.com/questions/59636065/how-to-find-declaration-for-my-typescript-react-module

window,self is not defined 오류 발생

해결

import React, { useState, useEffect, useRef } from "react";

export default function MyEditor({ props }: any) {
  const editorRef = useRef();
  const [editorLoaded, setEditorLoaded] = useState(false);
  const { CKEditor, ClassicEditor } = editorRef.current || {};

  useEffect(() => {
    editorRef.current = {
      // CKEditor: require('@ckeditor/ckeditor5-react'), // depricated in v3
      CKEditor: require("@ckeditor/ckeditor5-react").CKEditor, // v3+
      ClassicEditor: require("@ckeditor/ckeditor5-build-classic"),
    };
    setEditorLoaded(true);
  }, []);

  return editorLoaded ? (
    <CKEditor
      editor={ClassicEditor}
      data="<p>Hello from CKEditor 5!</p>"
      onInit={(editor) => {
        // You can store the "editor" and use when it is needed.
        console.log("Editor is ready to use!", editor);
      }}
      onChange={(event, editor) => {
        const data = editor.getData();
        console.log({ event, editor, data });
      }}
    />
  ) : (
    <div>Editor loading</div>
  );
}

출처 : https://stackoverflow.com/questions/58447134/ckeditor-window-is-not-defined-reactjs-while-implementing?rq=1

import dynamic from "next/dynamic";

const MyComp = () => {
   const Editor = dynamic(() => import("./MyEditor"), { ssr: false });
   return (
     <Editor            
        value={"Foo"}
        onChange={(v) => console.log(v)}
     />
)};

이런 방법도 있다는데 이건 잘모르겠다.

이슈 발생 원인 추측 : next js 에서는 페이지를 처음 렌더링할떄 window나 document같은 전역 객체가 존재하지 않는다.

출처 : https://handhand.tistory.com/272