CodeMirror says Unrecognized extension value in extension set

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

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