Error enabling VIM mode in CodeMirror

[barreiros]

Hi!

I trying to use VIM mode keybindings in Strudel and I get errors. I'm adding my code in repl package App.jsx.

import { javascript } from "@codemirror/lang-javascript";
import { vim } from "@replit/codemirror-vim";

<div className="grow relative flex overflow-auto" id="code">
          {/* onCursor={markParens} */}
          <CodeMirror 
                    **extensions={[vim(), javascript({ jsx: true })]}**
            value={code} onChange={setCode} onViewChanged={setView} />
          <span className="z-[20] py-1 px-2 absolute top-0 right-0 text-xs whitespace-pre text-right pointer-events-none">
            {!cycle.started ? `press ctrl+enter to play\n` : dirty ? `ctrl+enter to update\n` : 'no changes\n'}
          </span>
          {error && (
            <div className={cx('absolute right-2 bottom-2 px-2', 'text-red-500')}>
              {error?.message || 'unknown error'}
            </div>
          )}
        </div>

The error is:

Uncaught Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.
    at inner (index.js:1347:23)
    at inner (index.js:1322:17)
    at inner (index.js:1348:13)
    at inner (index.js:1322:17)
    at inner (index.js:1348:13)
    at inner (index.js:1322:17)
    at inner (index.js:1322:17)
    at inner (index.js:1322:17)
    at flatten (index.js:1351:5)
    at Configuration.resolve (index.js:1259:25)
react-dom.development.js:20085 The above error occurred in the <CodeMirrorLite2> component:

    at CodeMirrorLite2 (http://localhost:3000/node_modules/.vite/deps/react-codemirror6.js?v=062f5154:5539:22)
    at CodeMirror2 (http://localhost:3000/node_modules/.vite/deps/react-codemirror6.js?v=062f5154:5630:18)
    at CodeMirror (http://localhost:3000/@fs/home/barreiros/Documents/Barreiros_Strudel_Fork/packages/react/dist/index.es.js:232:3)
    at div
    at section
    at div
    at App (http://localhost:3000/src/App.jsx:55:27)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
scheduler.development.js:171 Uncaught Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.
    at inner (index.js:1347:23)
    at inner (index.js:1322:17)
    at inner (index.js:1348:13)
    at inner (index.js:1322:17)
    at inner (index.js:1348:13)
    at inner (index.js:1322:17)
    at inner (index.js:1322:17)
    at inner (index.js:1322:17)
    at flatten (index.js:1351:5)
    at Configuration.resolve (index.js:1259:25)

I'm trying in both Windows and Linux and same error happens. If I use the CodeMirror VIM package in a new React project it works perfectly.

Thanks!

[barreiros]

I've changed the issue to @uiw/react-codemirror repo.

uiwjs/react-codemirror#349

Regards.

[felixroos]

are you aware that the repl uses the package react-codemirror6 and not @uiw/react-codemirror?
(I did not even know that package exists, might be worth a look, as it seems far more matured..)

[barreiros]

The problem was due to inconsistence of dependencies in @codemirror/state packages.

uiwjs/react-codemirror#216

Regards.

[felixroos]

I meant, the package you are referring to (@uiw/react-codemirror) was never used in strudel. Instead, we are using react-codemirror6, although the uiw one looks quite good. So their fix won't help us here.. Nevertheless, the root of the problem can still be the same, meaning you are probably using 2 different versions of @codemirror/state . you can check that by running npm ls @codemirror/state inside the repl folder.

[felixroos]

Just checked, @replit/codemirror-vim uses ^6.0.1, while react-codemirror6 uses ^0.19.9. This difference looks pretty drastic, but they just seem to have jumped from 0.20 to 6 ~2 weeks ago.

[felixroos]

created an issue for the switch #143

[felixroos]

I actually switched now: #173