5

I am getting Invariant Violation: block is not a BlockNode when using convertToRaw in draft js.

Unfortunately, it works fine in code sandbox but not in local which makes it hard for me to debug the issue: https://codesandbox.io/s/vibrant-ramanujan-c6h4u?file=/src/App.js:0-1194

The line that throws the error in my local is:

const v2 = convertToRaw(v1);

Here is the complete code:

import { useState, useRef } from "react";
import { Editor, createEditorState } from "medium-draft";
import Button from "@material-ui/core/Button";
import { convertToRaw } from "draft-js";

export default function PostEditor() {
  const [editorState, setEditorState] = useState(createEditorState());

  //update medium editor
  const changeEditor = (editorState) => {
    setEditorState(editorState);
  };
  const editorRef = useRef();
  const handleSubmit = async (event) => {
    console.log(editorState.getCurrentContent());
    const v1 = editorRef.current.props.editorState.getCurrentContent();
    const v2 = convertToRaw(v1);
    console.log(v2);
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Editor
        ref={editorRef}
        editorState={editorState}
        onChange={changeEditor}
      />

      <Button
        variant="contained"
        color="primary"
        size="large"
        onClick={(event) => {
          handleSubmit(event);
        }}
      >
        Submit
      </Button>
    </div>
  );
}
Kal
  • 1,656
  • 4
  • 26
  • 41
  • I've encounted this error too. Can't remember now what the problem was, but do look at if you are running the wrong version https://github.com/jpuri/react-draft-wysiwyg/issues/599 – dwjohnston Oct 10 '20 at 03:15
  • @dwjohnston I have visited that issue 5 times and played around with different versions of draft js. I even downgraded draft-js to 0.10.0 but no matter what the same error. If you can recollect what it was, it would be great. Thanks for chiming in. – Kal Oct 10 '20 at 03:18

3 Answers3

3

Did you downgrade to draft-js v0.10.4, it seems to solve the problem to me. see https://github.com/HubSpot/draft-convert/issues/143

Hamza Boukhtam
  • 91
  • 1
  • 6
1

In my case, I was deep cloning an object that contains editorState object (using a utility function), while passing from one function to another. It was fixed once I passed the original object that is returned in onChange.

Jay Surya
  • 540
  • 1
  • 8
  • 18
0

If u have 2 package.json files try to remove draft-js from the child one.

Марсианский Пончик
  • 27
  • 4