search

TeemuKoivisto / prosemirror-dev-toolkit

Injectable developer tools for ProseMirror rich-text editors implemented in Svelte and TypeScript.
https://teemukoivisto.github.io/prosemirror-dev-toolkit/
MIT License
116 stars 6 forks source link

When using HMR with TipTap, throws error on module reload. #30

Closed hitsthings closed 1 year ago

hitsthings commented 1 year ago 
TypeError: Cannot read properties of null (reading 'matchesNode')
    at EditorView.updateStateInner (http://localhost:3000/static/js/bundle.js:183490:45)
    at EditorView.update (http://localhost:3000/static/js/bundle.js:183442:10)
    at EditorView.setProps (http://localhost:3000/static/js/bundle.js:183454:10)
    at subscribeToDispatchTransaction (http://localhost:3000/static/js/bundle.js:171086:8)
    at applyDevTools (http://localhost:3000/static/js/bundle.js:171140:3)
    at http://localhost:3000/static/js/bundle.js:3994:77
    at commitHookEffectListMount (http://localhost:3000/static/js/bundle.js:113152:30)
    at commitPassiveMountOnFiber (http://localhost:3000/static/js/bundle.js:114645:17)
    at commitPassiveMountEffects_complete (http://localhost:3000/static/js/bundle.js:114617:13)
    at commitPassiveMountEffects_begin (http://localhost:3000/static/js/bundle.js:114607:11)

Looking at what's in updateStateInner, this happens because editorView.docView is null, which happens when the editorView is destroyed. I suspect HMR (maybe TipTap?) is destroying the editor view, but prosemirror-dev-toolkit is still listening to the dispatch event and updating props. I suspect this is fixed by a if (!view.docView) { return } at the top of the subscribeToDispatchTransaction function.

hitsthings commented 1 year ago

I'm also using React 18 so maybe there is some weird complication with the double useEffect in dev that they've added.

TeemuKoivisto commented 1 year ago

Hey @hitsthings thanks for the bug report! Yeah probably something like that is happening, it's not entirely bullet-proof hack. Any chance you can link a reproduction where the bug occurs? Like a TipTap example with dev-toolkit added? I want to add a test case for it if possible so I won't accidentally break it down the road.

hitsthings commented 1 year ago

https://github.com/hitsthings/prosemirror-dev-toolkit-tiptap-test shows it.

Commands I ran to set it up:

npx create-react-app@5.0.1 prosemirror-dev-toolkit-tiptap-test --template tiptap npm install prosemirror-dev-toolkit npm start

Then I edited Tiptap.jsx to add an "s" after "World". This worked fine.

Then I ran applyDevTools() in a useEffect in the TipTap component. This worked fine.

Then I removed the "s" from "Worlds". This caused a console error similar to the reported one and the message no longer printed in the browser.

Every other edit thereafter had a similar error.

Hope that helps! I dunno how you would test HMR stuff. 😬 Thanks for the toolkit!

TeemuKoivisto commented 1 year ago

Thanks, that helped a lot! Should be fixed in 1.0.6 version

hitsthings commented 1 year ago

Awesome, thank you!