Code highlighting causes errors

mrdrogdrog commented 1 year ago

Describe the issue

Hello everybody,

during the development of HedgeDoc2 we've encountered strange bugs lately, which are related to CodeMirror. These problems appear since one of the last updates of @codemirror/view. They cause side effects like not being able to insert new lines after the last line if empty in firefox or crash of other parts of the application. The problem doesn't occur if we deactivate code highlighting.

Currently we use:

“@codemirror/lang-markdown”: “6.2.2”
“@codemirror/language”: “6.9.1”
“@codemirror/language-data”: “6.3.1”
“@codemirror/view”: “6.21.3”

The browser console contains these errors in dev mode:

CodeMirror plugin crashed: TypeError: tree.resolveStack is not a function
    at syntaxFolding (webpack-internal:///(app-pages-browser)/../node_modules/@codemirror/language/dist/index.js:1301:22)
    at foldable (webpack-internal:///(app-pages-browser)/../node_modules/@codemirror/language/dist/index.js:1336:12)
    at Object.buildMarkers (webpack-internal:///(app-pages-browser)/../node_modules/@codemirror/language/dist/index.js:1656:23)
    at new eval (webpack-internal:///(app-pages-browser)/../node_modules/@codemirror/language/dist/index.js:1642:33)
    at ViewPlugin.eval [as create] (webpack-internal:///(app-pages-browser)/../node_modules/@codemirror/view/dist/index.js:1928:42)
    at PluginInstance.update (webpack-internal:///(app-pages-browser)/../node_modules/@codemirror/view/dist/index.js:1947:44)
    at EditorView.plugin (webpack-internal:///(app-pages-browser)/../node_modules/@codemirror/view/dist/index.js:7352:31)
    at Object.markers (webpack-internal:///(app-pages-browser)/../node_modules/@codemirror/language/dist/index.js:1668:56)
    at new SingleGutterView (webpack-internal:///(app-pages-browser)/../node_modules/@codemirror/view/dist/index.js:10163:39)
    at eval (webpack-internal:///(app-pages-browser)/../node_modules/@codemirror/view/dist/index.js:9965:68)
    at Array.map (<anonymous>)
    at new eval (webpack-internal:///(app-pages-browser)/../node_modules/@codemirror/view/dist/index.js:9965:56)
    at ViewPlugin.eval [as create] (webpack-internal:///(app-pages-browser)/../node_modules/@codemirror/view/dist/index.js:1928:42)
    at PluginInstance.update (webpack-internal:///(app-pages-browser)/../node_modules/@codemirror/view/dist/index.js:1947:44)
    at new EditorView (webpack-internal:///(app-pages-browser)/../node_modules/@codemirror/view/dist/index.js:6958:20)
    at eval (webpack-internal:///(app-pages-browser)/../node_modules/@uiw/react-codemirror/esm/useCodeMirror.js:93:27)
[...]

CodeMirror plugin crashed: TypeError: tags is not iterable
    at HighlightStyle.style (webpack-internal:///(app-pages-browser)/../node_modules/@lezer/highlight/dist/index.js:263:29)
    at highlightTags (webpack-internal:///(app-pages-browser)/../node_modules/@lezer/highlight/dist/index.js:280:33)
    at HighlightBuilder.highlightRange (webpack-internal:///(app-pages-browser)/../node_modules/@lezer/highlight/dist/index.js:336:22)
    at highlightTree (webpack-internal:///(app-pages-browser)/../node_modules/@lezer/highlight/dist/index.js:306:13)
    at TreeHighlighter.buildDeco (webpack-internal:///(app-pages-browser)/../node_modules/@codemirror/language/dist/index.js:1830:76)
    at TreeHighlighter.update (webpack-internal:///(app-pages-browser)/../node_modules/@codemirror/language/dist/index.js:1822:37)
    at PluginInstance.update (webpack-internal:///(app-pages-browser)/../node_modules/@codemirror/view/dist/index.js:1960:32)
    at EditorView.updatePlugins (webpack-internal:///(app-pages-browser)/../node_modules/@codemirror/view/dist/index.js:7141:29)
    at EditorView.update (webpack-internal:///(app-pages-browser)/../node_modules/@codemirror/view/dist/index.js:7048:22)
    at EditorView.dispatchTransactions (webpack-internal:///(app-pages-browser)/../node_modules/@codemirror/view/dist/index.js:6952:28)
    at EditorView.dispatch (webpack-internal:///(app-pages-browser)/../node_modules/@codemirror/view/dist/index.js:6974:14)

Browser and platform

Chrome & Firefox

Reproduction link

https://alpha.hedgedoc.dev/n/dxwbrkare7bmhpprjmbst27knm

marijnh commented 1 year ago

You seem to somehow be using a recent version of @codemirror/language with a version of @lezer/common that is older than the one required as a dependency by that package (1.1.0). Most likely npm (or yarn) made a mess of your dependency tree, duplicating some of them, and causing trees created with the old @lezer/common to be used by the new @codemirror/language. Delete your package lock and reinstall, that usually help.

mrdrogdrog commented 1 year ago

Wow. That was one of the fastest useful-non-bot-reply to an issue I ever had.

Problem solved by renewing the yarn.lock

Thank you a lot ❤️

marijnh commented 1 year ago

I recommend dropping yarn at this point (it's no longer really any better than npm, and worse on some points) and using npm 9+

codemirror / dev