Unrecognized extension value in extension set ([object Object])

v6
1

Hi All,

I am just getting started with CodeMirror 6 and am just trying to create a basic example. However, I keep running into this error:
Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.
I have already tried removing package-lock and reinstalling node_modules, but this did not work. I have also ensured that all of my codemirror state versions are the same:

├─┬ @codemirror/autocomplete@6.8.1
│ └── @codemirror/state@6.2.1 deduped
├─┬ @codemirror/commands@6.2.4
│ └── @codemirror/state@6.2.1 deduped
├─┬ @codemirror/lang-html@6.4.5
│ ├─┬ @codemirror/lang-css@6.2.0
│ │ └── @codemirror/state@6.2.1 deduped
│ └── @codemirror/state@6.2.1 deduped
├─┬ @codemirror/lang-javascript@6.1.9
│ ├─┬ @codemirror/lint@6.4.0
│ │ └── @codemirror/state@6.2.1 deduped
│ └── @codemirror/state@6.2.1 deduped
├─┬ @codemirror/language@6.8.0
│ └── @codemirror/state@6.2.1 deduped
├─┬ @codemirror/search@6.5.0
│ └── @codemirror/state@6.2.1 deduped
├── @codemirror/state@6.2.1
├─┬ @codemirror/view@6.14.1
│ └── @codemirror/state@6.2.1 deduped
└─┬ codemirror@6.0.1
  └── @codemirror/state@6.2.1 deduped

Here’s my simple example:

import React, {useRef, useEffect} from 'react';
import {EditorView} from "codemirror"
import {EditorState} from "@codemirror/state"
import {tags} from "@lezer/highlight"
import {lineNumbers} from "@codemirror/view"
import {HighlightStyle} from "@codemirror/language"


let myHighlightStyle = HighlightStyle.define([
    { tag: tags.keyword, color: "#569cd6" },
    { tag: tags.comment, color: "#6a9955" },
]);


function TestComponent({ code, editorRef }) {
    const editorDiv = useRef(null);

    useEffect(() => {
        if (editorDiv.current) {
            const view = new EditorView({
                state: EditorState.create({
                    doc: code,
                    extensions: [
                        lineNumbers(),
                        myHighlightStyle,
                    ],
                }),
                parent: editorDiv.current,
            });

            editorRef.current = view;

            return () => {
                // Cleanup editor on unmount
                view.destroy();
            };
        }
    }, [code, language]);

    return <div ref={editorDiv} style={{ height: "100%", width: "100%" }} />;
}

Does anyone know what causes this error or how to fix it? I looked at other posts about this error, but none of them seemed to fix the issue.

2

myHighlightStyle is not an extension. Try syntaxHighlighting(myHighlightStyle).

1 Like
3

I’m having the exact same problem, except that I’m attempting to utilize a custom line numbers extension (I’m trying to attach a click handler).

Even without the myHighlightStyle the invalid extension error occurs.

        let view = new EditorView({
            state: EditorState.create({
                doc: code,
                extensions: [
                    lineNumbers(),
                ],
            }),
            parent: parentElement
        });

I’ve also tried passing the line numbers example

const hexLineNumbers = lineNumbers({
    formatNumber: n => n.toString(16)
});

        let view = new EditorView({
            state: EditorState.create({
                doc: code,
                extensions: [
                    hexLineNumbers,
                ],
            }),
            parent: parentElement
        });

The issue seems to occur whenever ‘LineNumbers’ is used. I appreciate that chances are, there’s something basic that I’m missing.

4

Update: I’ve solved my issue. It turns out I was getting ‘LineNumbers’ from @codemirror/gutter. This lives now in @codemirror/view.

import {EditorView, Decoration, keymap, lineNumbers} from '@codemirror/view';
//import {lineNumbers} from '@codemirror/gutter';

^^ This fixes the linenumbers issue for my case.

5

You probably do have duplicated packages in your dependency tree. Usually easiest to remove it (and the package lock) and reinstall.