Error testing with Vitest

[somecho]

I get the following error when I test a component with codemirror:

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

Here is a minimal project reproducing this error: https://github.com/somecho/react-codemirror-vitest

Someone else is also facing this issue.

[jaywcjlove]

@somecho looks unsolvable

https://discuss.codemirror.net/t/error-multiple-instances-of-codemirror-state/5174/2

[somecho]

Is this a problem with Vite then?

[jaywcjlove]

@somecho I have no problem writing test cases with jest. I think vitest may need to be configured or modified.

[Nepomuceno]

Tried the project with react-codemirror version 4.21.3 and the error still there.

[Irev-Dev]

I've got this issue too.

[boy-bizzmine]

We are experiencing the same issue (Vitest+react-codemirror) from the moment we introduced the following code (relevant parts):

import { Compartment, EditorState } from '@codemirror/state';
import { insertTab, indentLess } from '@codemirror/commands';
import { keymap } from '@codemirror/view';

const tabSize = new Compartment();

let extensions = [
    [tabSize.of(EditorState.tabSize.of(4))],
    [keymap.of([{ key: 'Tab', run: insertTab }])],
    [keymap.of([{ key: 'Tab', run: insertTab, shift: indentLess }])],
];

editType && extensions.push(xml());
<CodeMirror
    ...
    extensions={extensions}
    ...
/>

This error only appears in tests and not in dev/production

[Irev-Dev]

We're likely going to use jest. We had already being using jest from having started with CRA, but migrating to vite we were going to try and use vitest as well, but haven't been able to.

[AlanGreene]

@somecho fyi I managed to resolve the error in your reproduction repo with the following changes:

-import { clojure } from '@nextjournal/lang-clojure'
+import { langs } from '@uiw/codemirror-extensions-langs';
function App() {
  return (
    <>
      <div>Bug Reproduction</div>
      <CodeMirror
        value={'(+ 1 1)'}
-       extensions={[clojure()]}
+       extensions={[langs.clojure()]}

It's still using @nextjournal/lang-clojure under the hood, see https://github.com/uiwjs/react-codemirror/blob/fd6a8dbc731d87344f7c9016bbf151006a5b89a2/extensions/langs/src/index.ts#L45

[jestfuljoker]

Any updates about this? I'm facing the same issue :/

[yogiduzit]

alias: {
  '@codemirror/state': path.resolve(
    __dirname,
    './node_modules/@codemirror/state/dist/index.cjs'
  ),
  '@codemirror/lang-yaml': path.resolve(
    __dirname,
  ),
  '@codemirror/lang-json': path.resolve(
    __dirname,
    './node_modules/@codemirror/lang-json/dist/index.cjs'
  )
}

Basically, you need to force the CJS version of @codemirror/state and all other packages depending on it.