RangeError with ProseMirror Image Plugin

Hey everyone,

Struggling with a RangeError I’m getting in certain cases while using ProseMirror image plugin in a React application.

The component in question supports rich text editing as well as drag-and-drop image uploading and resizing, and appears to work fine with no issues. But the console is logging this error every time the component seems to be mounted:

RangeError: Index 2 out of range for <paragraph("Test text"), paragraph(image)>
    at Fragment.child (index.js:238:1)
    at Fragment.findIndex (index.js:288:1)
    at Node.nodeAt (index.js:1327:1)
    at f (index.es.js:15:1)
    at index.es.js:15:1
    at Generator.next (<anonymous>)
    at l (index.es.js:15:1)

I’m having trouble tracking this down, or seeing if it’s worth checking out. To me, this seems like the document is reporting a length that’s 1 item longer than it really is, so when the node tree is constructed it’s trying to access something that’s not there, hence the RangeError.

What’s weird is we haven’t run into this before. The component stores the boundaryElement and the EditorView for the editor in a useRef, and then initializes the editor with an effect. This is done within the overall context of react-hook-form as well.

useEffect(() => {
    if (!initialValue) {

    view.current = new EditorView(boundaryElement.current, {
      state: EditorState.create({
        doc: markdownParser.parse(initialValue ?? "")!,
        plugins: basePlugins,
      dispatchTransaction(tr) {

    return () => {
      if (view.current) {
        view.current.dom.setAttribute("contenteditable", "false");
  }, []);

Does anything look immediately off in how we’re setting up our editor here? We’re primarily using ProseMirror with a very basic setup with the following versions:

  • “prosemirror-commands”: “1.1.12”,
  • “prosemirror-dropcursor”: “^1.4.0”,
  • “prosemirror-gapcursor”: “^1.2.1”,
  • “prosemirror-history”: “^1.2.0”,
  • “prosemirror-image-plugin”: “^2.3.2”,
  • “prosemirror-inputrules”: “^1.1.3”,
  • “prosemirror-keymap”: “^1.1.5”,
  • “prosemirror-markdown”: “^1.7.1”,
  • “prosemirror-menu”: “^1.1.4”,
  • “prosemirror-schema-basic”: “^1.1.2”,
  • “prosemirror-schema-list”: “^1.1.6”,
  • “prosemirror-state”: “^1.3.4”,
  • “prosemirror-view”: “^1.23.5”,
1 Like

It’s hard to see what the bottom of that stacktrace is about due to minification. Specifically, it’d be interesting to know what this f function that makes the call to nodeAt is, and what document and position it is passing in.

1 Like

Hey, I wrote prosemirror-image-plugin, if you create a stackblitz reproduction I’ll check it out.

Update, turning off React StrictMode gets rid of the error, guessing it’s coming from the effect rerunning in dev mode. Still doesn’t explain why it happens in this component and not in another implementation elsewhere in our application (with YJS) but it might just be some React rendering issues.