CodeMirror says Unrecognized extension value in extension set

Question

Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.

import React, { useEffect, useState, useRef } from 'react'
import { EditorState } from '@codemirror/state'
import { lineNumbers, EditorView, keymap, highlightActiveLine } from '@codemirror/view'
import { defaultKeymap } from '@codemirror/commands'
import { history, historyKeymap } from '@codemirror/history'
import { indentOnInput, foldGutter, foldKeymap, syntaxHighlighting } from '@codemirror/language'
import { bracketMatching } from '@codemirror/matchbrackets'
import { highlightActiveLineGutter } from '@codemirror/gutter'
import { defaultHighlightStyle } from '@codemirror/highlight'
import { javascript } from '@codemirror/lang-javascript'
import { highlightSelectionMatches, searchKeymap } from '@codemirror/search'
import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete'
import { lintKeymap } from '@codemirror/lint'
import { basicSetup } from 'codemirror'
import { crosshairCursor, drawSelection, dropCursor, highlightSpecialChars, rectangularSelection } from '@codemirror/view'

const Editor = () => {
    const initialText = 'console.log("hello, world")'
    const targetElement = document.querySelector('#realtimeeditor')
    new EditorView({
        parent: targetElement,
        state: EditorState.create({
            doc: initialText,
            extensions: [
                lineNumbers(),
                highlightActiveLineGutter(),
                highlightSpecialChars(),
                history(),
                foldGutter(),
                drawSelection(),
                dropCursor(),
                EditorState.allowMultipleSelections.of(true),
                indentOnInput(),
                syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
                bracketMatching(),
                closeBrackets(),
                autocompletion(),
                rectangularSelection(),
                crosshairCursor(),
                highlightActiveLine(),
                highlightSelectionMatches(),
                keymap.of([
                    ...closeBracketsKeymap,
                    ...defaultKeymap,
                    ...searchKeymap,
                    ...historyKeymap,
                    ...foldKeymap,
                    ...completionKeymap,
                    ...lintKeymap,
                ]),
                javascript(),
            ],
        }),
    })
    return <textarea id='realtimeeditor'></textarea>
}


export default Editor

here is my code idk what is wrong in this

I've tried to upgrading npm upgrading all the dependecies nothing is working can anyone help me here

Answer 1

I got the same error, i solved it by changing the 'syntaxHighlighting' extension:

EditorState.create({
   doc: initialText,
   extensions: [
     ...
     syntaxHighlighting(CUSTOM_HIGHLIGHT_STYLE),
     ...
   ],
});

And here is the custom highlight style:

const CUSTOM_HIGHLIGHT_STYLE = HighlightStyle.define([
  { tag: tags.keyword, color: '#fc6' },
  { tag: tags.comment, color: '#f5d', fontStyle: 'italic' },
]);

I hope it helps