Odd behavior for Search functionality

Need a help for search functionality when initialize an editor view. After upgrading all codemirror packages to the latest version, the search extension seems not to be working.

Currently, all examples that CodeMirror provides initialize an editor view by importing “extensions” as below. the search is working well.

I tried to use following code to initialize an editor view. The search doesn’t work and nothing happened when i press the shortcut “Cmd + F”.

import { EditorView, lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine, keymap,
} from "@codemirror/view";
import { EditorState } from '@codemirror/state';
import { foldGutter, indentOnInput, syntaxHighlighting, defaultHighlightStyle, bracketMatching, foldKeymap } from '@codemirror/language';
import { indentWithTab, history, defaultKeymap, historyKeymap } from '@codemirror/commands';
import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
import { closeBrackets,closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete';
import { lintKeymap } from '@codemirror/lint';

let editorview = new EditorView({
    doc: "console.log('hello')\n",
    parent: document.body,
    extensions: [
        lineNumbers(),
        highlightActiveLineGutter(),
        highlightSpecialChars(),
        history(),
        foldGutter({
            markerDOM: (open) => {
                let icon = document.createElement("span");
                icon.innerText = open ? "⊟" : "⊞";
                return icon;
            },
        }),
        drawSelection(),
        dropCursor(),
        EditorState.allowMultipleSelections.of(true),
        indentOnInput(),
        bracketMatching(),
        closeBrackets(),
        rectangularSelection(),
        crosshairCursor(),
        highlightActiveLine(),
        highlightSelectionMatches(),
        keymap.of([
            indentWithTab,
            ...closeBracketsKeymap,
            ...defaultKeymap,
            ...searchKeymap,
            ...historyKeymap,
            ...foldKeymap,
            ...completionKeymap,
            ...lintKeymap,
        ]),
        syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
    ],
});

But the interesting thing is that the code above is working when i tried it in console below.

Are you using yarn? If so, clear your package lock first, since yarn is very dumb about upgrading, and will often duplicate packages. You’ll end up loading multiple versions alongside each other, which breaks this library.

1 Like

@marijn Thanks! I just tried and that’s what exactly happened! For anyone who might run into this, just 2 steps to fix this:

  1. Delete yarn.lock in your project
  2. Run command yarn install to re-generate the lock file

(Or, what I recommend, unless you are heavily reliant on some yarn-specific feature, is to stop using yarn. At this point, npm is superior again.)