When I try to use any language plugin with CodeMirror (let’s say, Python), and load it in EditorState.create, no syntax highlighting actually happens. The plugin in the console simply says:
CodeMirror plugin crashed: TypeError: can't access property Symbol.iterator, tags is undefined
Sometimes, it says tags3 is undefined.
I have already checked the other posts and on other internet forums where people have had this issue. Their fixes of downgrading to "@lezer/highlight": "1.1.6", doesnt actually work on bun.js but only node. I am using vite, I found a solution whereby someone added everything CodeMirror/Lezer related to optimizeDeps.exclude which still doesn’t work. With @lezer/highlight on the latest version, nothing works, therefore the only way in which I can get this module to not crash is to do the following:
- use
@lezer/highlightversion . 1.1.6 - When installing dependencies, you cannot use bun.js at all. you must run
npm installand then when you run it, you must runnpx vite devand only then doesbun run dev/bunx vite devlead to the plugin not crashing.
If any of those requirements are not met, it gives this stack trace:
CodeMirror plugin crashed: TypeError: can’t access property Symbol.iterator, tags3 is undefined
style index.js:284
highlightTags index.js:301
highlightRange index.js:388
highlightTree index.js:329
buildDeco index.js:1784
update index.js:1775
update index.js:1465
updatePlugins index.js:7838
update index.js:7736
dispatchTransactions index.js:7638
dispatch index.js:7662
Editor Editor.svelte:158
update_reaction runtime.js:264
update_effect runtime.js:439
flush_queued_effects batch.js:699
process batch.js:195
flush_effects batch.js:642
flush batch.js:345
ensure batch.js:523
run_all utils.js:45
run_micro_tasks task.js:10
queue_micro_task task.js:28
queue_micro_task task.js:19
enqueue batch.js:533
ensure batch.js:517
internal_set sources.js:187
set sources.js:166
set proxy.js:303
changeFile editor_state.svelte.ts:41
fileResponseCallback EditorWindow.svelte:146
handleWorkerEvent handle_worker.svelte.ts:57
setupWorker handle_worker.svelte.ts:94
EditorWindow EditorWindow.svelte:79
untrack runtime.js:715
onMount index-client.js:100
update_reaction runtime.js:264
update_effect runtime.js:439
flush_queued_effects batch.js:699
process batch.js:195
flush_effects batch.js:642
flush batch.js:345
ensure batch.js:523
run_all utils.js:45
run_micro_tasks task.js:10
flush_tasks task.js:40
flushSync batch.js:579
Svelte4Component legacy-client.js:127
legacy-client.js:54
initialize client.js:587
_hydrate client.js:2855
start client.js:361
async* editor:1963
promise callback* editor:1962
index.js:1354:17
I’m using SvelteKit with Svelte 5, if that helps.
The dependencies section of my package.json is as follows:
"dependencies": {
"@battlefieldduck/xterm-svelte": "^2.2.0",
"@catppuccin/palette": "^1.7.1",
"@codemirror/autocomplete": "^6.20.0",
"@codemirror/lang-python": "^6.2.1",
"@codemirror/language": "^6.12.1",
"@codemirror/lint": "^6.9.2",
"@codemirror/theme-one-dark": "^6.1.3",
"@fontsource/ibm-plex-mono": "^5.2.7",
"@fontsource/inter": "^5.2.8",
"@lezer/generator": "^1.8.0",
"@lezer/highlight": "1.1.6",
"@lezer/lr": "^1.4.5",
"@xterm/xterm": "^6.0.0",
"codemirror": "6",
"jszip": "^3.10.1",
"typescript-svelte-plugin": "^0.3.50"
}
Why does this strange error happen only with the latest version? This happens for any and every grammar and language support extensoin, including the official ones.