Error "Cannot read properties of null (reading 'matchesNode')" on hot-reload in @tiptap/react

What’s the bug you are facing?

I have the case that I want to update the content of the editor when the content prop changes. It looks somewhat like this:

function Editor({ content }) {
    const editor = useEditor({
        extensions: [StarterKit],
        content
    })
    
    useEffect(() => {
        editor?.commands.setContent(content)
    }, [editor, content])
    
    return <EditorContent editor={editor} />
}

When I use that setup during development, Tiptap throws an error right after hot-reloading, crashing the app:

Uncaught TypeError: Cannot read properties of null (reading 'matchesNode')
    at EditorView.updateStateInner (index.es.js:4984:1)
    at EditorView.updateState (index.es.js:4955:1)
    at Editor.dispatchTransaction (tiptap-core.esm.js:3368:1)
    at EditorView.dispatch (index.es.js:5240:30)
    at Object.method [as setContent] (tiptap-core.esm.js:1926:1)
    at Editor.tsx:8:25
    at invokePassiveEffectCreate (react-dom.development.js:23487:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)

I’m wondering whether setContent() must not be used like that or whether this is a bug within Tiptap. 🤔

How can we reproduce the bug on our side?

1. Go to https://codesandbox.io/s/tiptap-react-reload-bug-7iqpc?file=/src/App.js
2. Wait until app renders
3. Change comment on line 11 to trigger a hot-reload
4. Error should appear instead of rendered app

Can you provide a CodeSandbox?

https://codesandbox.io/s/tiptap-react-reload-bug-7iqpc?file=/src/App.js

What did you expect to happen?

No error when calling setContent()

Anything to add? (optional)

I could observe that the component gets un- and re-mounted during a hot-reload. The only difference to a normal mount is that the editor is instantiated during the mounting render already. Probably React keeps that around to not lose its state as Tiptap code wasn’t changed. Maybe swapping out the instance after mount causes the issue?

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[duhaime]

Any chance this can be patched internally @philippkuehn? I have a feeling others will end up on this thread and the linked issues…

[branlok]

Also, got this error, the solution isn’t working for me. Error seems to occur when i save resave my ‘styled.tsx’ related to this component.

function Index({ title = "Post Title" }: Props) {
  const editor = useEditor({
    extensions: [StarterKit],
    content: "<p>Leave a Mark!</p>",
  })

  const mutation = useMutation(async () => {
    console.log("ur data was sent")
  })

  return (
    <StyledEditor>
      <div className="wrapper">
        <h1 className="title">{title}</h1>
        <div className="editor-wrapper">
          <EditorContent editor={editor} />
        </div>
      </div>
      <div className="toolset-wrapper">
        <button className="submit-button" onClick={mutation.mutate}>
          Submit
        </button>
      </div>
    </StyledEditor>
  )
}

Uncaught TypeError: Cannot read properties of null (reading 'matchesNode')
    at EditorView.updateStateInner (index.js:4913:49)
    at EditorView.update (index.js:4868:14)
    at EditorView.setProps (index.js:4882:14)
    at Editor2.createNodeViews (Editor.ts:299:15)
    at PureEditorContent.init (EditorContent.tsx:67:14)
    at PureEditorContent.componentDidMount (EditorContent.tsx:42:10)
    at invokeLayoutEffectMountInDEV (react-dom.development.js:25133:22)
    at invokeEffectsInDev (react-dom.development.js:27351:11)
    at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27327:5)
    at flushPassiveEffectsImpl (react-dom.development.js:27056:5)


The above error occurred in the <PureEditorContent> component:

    at PureEditorContent (https://staqpad.dev/node_modules/.vite/deps/@tiptap_react.js?v=ea150a46:3257:5)
    at div
    at div
    ...