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>
);
}
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같은 전역 객체가 존재하지 않는다.