Collaborate: mismatched transaction

[joppehoekstra]

What’s the bug you are facing?

I cannot get the Collaboration plugin working. As soon as I start typing I get the following error: "RangeError: Applying a mismatched transaction"

Uncaught RangeError: Applying a mismatched transaction
    at EditorState.applyInner (index.js?6ffb:830:1)
    at EditorState.applyTransaction (index.js?6ffb:794:1)
    at EditorState.apply (index.js?6ffb:770:1)
    at Editor.dispatchTransaction (tiptap-core.esm.js?9980:3457:1)
    at EditorView.dispatch (index.js?703f:5176:1)
    at eval (sync-plugin.js?9b6a:401:1)
    at ProsemirrorBinding.eval [as mux] (mutex.js?3edb:35:1)
    at ProsemirrorBinding._typeChanged (sync-plugin.js?9b6a:384:1)
    at Module.callAll (function.js?2163:19:1)
    at callEventHandlerListeners (yjs.mjs?7428:1885:1)

Which browser was this experienced in? Are any special extensions installed?

Chrome, Safari

How can we reproduce the bug on our side?

Strangely enough, when replicating the issue in my Codesandbox I do not get the error. However, when I download that exact code on my local device, and run yarn followed by yarn serve, I do get the error.

I've already run yarn upgrade, cleared my yarn cache, removed the node_modules folder, and I'm kinda stuck at this point. It's quite frustrating to see different behaviour in CodeSandbox and my local device.

Can you provide a CodeSandbox?

See above

What did you expect to happen?

Not to get an error.

Anything to add? (optional)

No response

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. 💖

[gustavotoyota]

Same problem here. Seems to be related to @tiptap/vue-3@2.0.0-beta.91

Uncaught RangeError: Applying a mismatched transaction
at EditorState.applyInner (index.js:830:19)
at EditorState.applyTransaction (index.js:794:45)
at EditorState.apply (index.js:770:21)
at Editor2.dispatchTransaction (Editor.ts:337:30)
at EditorView.dispatch (index.js:5176:33)
at readDOMChange (index.js:4659:10)
at DOMObserver.handleDOMChange (index.js:4832:81)
at DOMObserver.flush (index.js:4336:18)
at DOMObserver.observer (index.js:4215:26)

Happening to these guys too: #1515

[gustavotoyota]

I just realized the same thing is happening in the Vue collaborative demos:
https://tiptap.dev/examples/collaborative-editing

[bdbch]

Thanks for your issues. We'll look into this issue as fast as possible to resolve this bug. From what we can see for now it seems to only affect the Vue examples.

[bdbch]

Hey @gustavotoyota @joppehoekstra

I was able to fix this issue. It was introduced by y-prosemirror@1.1.0 which caused this transaction mismatch, for more information - see this issue:
yjs/y-prosemirror#117

As soon as there is a working solution, we'll update the package back to the latest stable version.

[bdbch]

Hey @joppehoekstra this should be resolved with our latest release of the collaboration plugin. Could you update and try again?

[joppehoekstra]

All seems to work well now with the latest update. Thanks!

[Flamenco]

y-prosemirror 1.2.4 and 1.2.5 both cause a regression having this same error.

Pinning to 1.2.3 still works.

[hamzanouali42]

@Flamenco how can you force the installation of y-prosemirror version 1.2.3? I see that it's been used inside @tiptap/extension-collaboration and @tiptap/extension-collaboration-cursor, using the npm overrides property didn't solve the issue, I also tried the npm package npm-force-resolutions but without luck.

[Flamenco]

@hamzanouali42 in your package.json file, set the version without any range prefixes.

You might also consider setting the resolutions option in your package.json file as well.

[volarname]

i can confirm too, 1.2.3 is latest working version, both above are broken to use