[SOLVED] Cannot read property 'getIn' of undefined in nextjs

Cannot read property 'getIn' of undefined in nextjs

Iam facing the error "Cannot read property 'getIn' of undefined" when running my code. Does anyone know how to fix this.

How to reproduce: just write "aa"

this is my code:

import React from "react";
import { Editor, EditorState } from "draft-js";
import "draft-js/dist/Draft.css";
import Head from "next/head";

export default function MyEditor() {
  const [editorState, setEditorState] = React.useState(() =>
    EditorState.createEmpty()
  );

  const editor = React.useRef(null);
  function focusEditor() {
    editor.current.focus();
  }

  return (
    <>
      <Head>
        <meta charset="utf-8" />
      </Head>
      <div
        style={{ border: "1px solid black", minHeight: "6em", cursor: "text" }}
        onClick={focusEditor}
      >
        <Editor
          ref={editor}
          editorState={editorState}
          onChange={setEditorState}
          placeholder="Write something!"
        />
      </div>
    </>
  );
}

Thank you for your help.

Solution

i found the solution, you can try my way

//just use dynamic import 
const Editor = dynamic(() => import("draft-js").then((mod) => mod.Editor), {
  ssr: false,
});