CodeMirror plugin crashed - tags is not iterable

[Lawndlwd]

CodeMirror plugin crashed: TypeError: tags is not iterable

maybe related to @lezer

Check if there were any 0.x versions of @codemirror of @lezer packages kept back. This error occurs when mixing pre-6.0 and post-6.0 versions (1.0 for @lezer).

highlight colors are gray all time

version 4.21.15 node v18.18.0

import { langs } from '@uiw/codemirror-extensions-langs'
import { material } from '@uiw/codemirror-theme-material'
import CodeMirror from '@uiw/react-codemirror'
.
.
.

 <CodeMirror
      readOnly={readOnly}
      width="100%"
      height={height}
      theme={material}
      onChange={onChange}
      value={value} 
      extensions={[langs[extensions]()]} // javascript
      onBlur={onBlur}
      basicSetup={{
        highlightActiveLine: false,
        highlightActiveLineGutter: false,
      }}
  />

[jaywcjlove]

@Lawndlwd Upgrade v4.21.18

• https://github.com/uiwjs/react-codemirror/issues/566

[jaywcjlove]

@Lawndlwd https://codesandbox.io/embed/react-codemirror-example-codemirror-6-slvju?fontsize=14&hidenavigation=1&theme=dark

[jaywcjlove]

@Lawndlwd https://codesandbox.io/embed/react-codemirror-example-codemirror-6-forked-zyccpn?fontsize=14&hidenavigation=1&theme=dark

[Lawndlwd]

thanks for your reply,

but i am using import { langs } from '@uiw/codemirror-extensions-langs' Because i have different languages that change dynamically as you see here

      extensions={[langs[extensions]()]} // javascript

where extensions is keyof typeof langs

the problem accord after renovate so it worked before.

[jaywcjlove]

@Lawndlwd

import { loadLanguage, langNames, langs } from '@uiw/codemirror-extensions-langs';

loadLanguage('tsx');

langs.tsx();

console.log('langNames:', langNames); // => "jsx" | "typescript" | "javascript" | "tsx"

import { loadLanguage, langNames, langs } from '@uiw/codemirror-extensions-langs';
const name = 'jsx';

if (langNames.includes(name)) {
console.log('extensions:', langNames[name]); // => extensions
}

[SpencerDuball]

I had this issue and moved to @lezer/highlight@1.1.6 and got syntax highlight working properly for anyone that might come across this.

Here are the relevant packages:

{
    "@codemirror/lang-markdown": "^6.2.4",
    "@codemirror/language-data": "^6.4.0",
    "@lezer/highlight": "1.1.6",
    "@replit/codemirror-vim": "^6.1.0",
    "@uiw/codemirror-themes": "^4.21.21",
    "@uiw/react-codemirror": "^4.21.21",
}