[Bug]: Uncaught TypeError: Cannot read properties of undefined (reading 'props') at ReactNodeView.handleSelectionUpdate

[rushillshah]

Affected Packages

tiptap/react

Version(s)

2.9.1

Bug Description

We are encountering an issue where this.renderer is initialized correctly but becomes undefined during certain interactions. This typically occurs when repositioning floating variables in our editor. Occasionally, this issue also arises in production during regular text editing.

This issue appears to be related to a lifecycle problem, where the renderer is not properly cleaned up or initialized under specific circumstances. Using null coalescing operators (e.g., this.renderer?.props?.selected) in @tiptap/react/dist/index.js:1367 seems to mitigate the issue, but this feels like a workaround rather than a proper solution.

Stacktrace:

index.js:1376 Uncaught TypeError: Cannot read properties of undefined (reading 'props')
    at ReactNodeView.handleSelectionUpdate (index.js:1376:1)
    at eval (index.js:159:1)
    at Array.forEach (<anonymous>)
    at Editor.emit (index.js:159:1)
    at Editor.dispatchTransaction (index.js:4601:1)
    at EditorView.dispatch (index.js:5611:1)
    at Object.method [as focus] (index.js:66:1)
    at eval (variable.js:161:1)
    at invokePassiveEffectCreate (react-dom.development.js:23487:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)

Environment

• Tiptap version: @tiptap/react v2.9.1
• Prosemirror version: prosemirror-view v1.28.0
• Node.js version: 20.13.1
• Browser: Chrome 118.0.5993.89
• React version: 17.0.2
• Webpack 5.94.0

Steps to Reproduce

1.	Use @tiptap/react with a custom addNodeView setup, particularly one involving floating elements.
2.	Interact with floating variables (e.g., reposition or edit them).
3.	Observe the error during these interactions or general text editing

Expected Behavior

No TypeError and for the renderer to handle intermittent undefined values, or not take undefined values

Additional Context (Optional)

The issue seems to stem from the ReactNodeView lifecycle. Using null coalescing operators for accessing this.renderer.props.selected appears to resolve the issue temporarily but does not address the root cause.

Dependency Updates

• Yes, I've updated all my dependencies.

[nperez0111]

Would be ideal to have a codesandbox that reproduces this issue. I agree that adding null checks is not ideal so I would prefer to find the root cause

[rushillshah]

Sorry for the delay, setting up a sandbox for reproducing the issue.

[kongweiying2]

@rushillshah @nperez0111 I'm facing this exact issue with virtually the same stack trace.

I tried adding null coalescing

this.renderer.props.selected
to
this.renderer?.props?.selected

But unlike for @rushillshah this doesn't change the error at all for me.

My minimal reproduction attempt below doesn't reproduce the error

https://codesandbox.io/p/sandbox/tiptap-react-qidlsv

So I've linked the full repo below:

https://github.com/Eusaybia/lifemap/tree/sales-guide

You can just
git clone https://github.com/Eusaybia/lifemap.git
git checkout sales-guide
yarn install
yarn dev-web

And go to

http://localhost:3000/q/b964627a-30be-42dd-b8aa-b2cb9006e79b

And then refresh the page after it's loaded once. The error should appear at that point.

Note: You need access to your own TipTap Pro key, otherwise yarn install will fail due to not being able to access the TipTap Pro extensions I'm using.

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'props')

Source
ReactNodeView.handleSelectionUpdate
node_modules/@tiptap/react/dist/index.js (1376:1)
eval
node_modules/@tiptap/core/dist/index.js (159:1)
Array.forEach
<anonymous>
Editor.emit
node_modules/@tiptap/core/dist/index.js (159:1)
Editor.dispatchTransaction
node_modules/@tiptap/core/dist/index.js (4487:1)
EditorView.dispatch
node_modules/prosemirror-view/dist/index.js (5699:1)
Object.method [as command]
node_modules/@tiptap/core/dist/index.js (66:1)
ReactNodeView.updateAttributes
node_modules/@tiptap/core/dist/index.js (5058:1)
Object.updateAttributes
node_modules/@tiptap/react/dist/index.js (1283:47)
src/view/structure/GroupTipTapExtension.tsx (287:19) @ updateAttributes

  285 |       const updateAttentionTo = (newAttention: number) => {
  286 |           if (props.updateAttributes) {
> 287 |             props.updateAttributes({ attention: newAttention });
      |                   ^
  288 |           } else {
  289 |             console.warn('updateAttributes is not available.');
  290 |           }
Call Stack

[nperez0111]

Sorry but to help you here, I'd need a repo that is much more minimal than this, way too many things to check