クライアントのみで動くパッケージを実行した時のエラーとその対応

Error Message

window is not defined

サーバーサイドで処理できないエラーです。

原因

Editorコンポーネントはサーバーで処理されません。

import { Editor, EditorProps } from "react-draft-wysiwyg";
...
 return (
    <Editor>
 )
...

対策

dynamic関数を使用します。

js

+ import dynamic from "next/dynamic";
- import { Editor, EditorProps } from "react-draft-wysiwyg";
+ import { EditorProps } from "react-draft-wysiwyg";

+ const Editor = dynamic(
+   () => import("react-draft-wysiwyg").then((mod) => mod.Editor),
+   { ssr: false },
+ );
...
 return (
    <Editor>
 )
...

クライアント側でのみコンポーネントが読み込まれます。