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

[dungbv99]

I have a project using uiw/react-codemirror version 4.0.6 It is run okay until mid night yesterday, when I clone my project and re install it. When it start some thing wrong is happended like this picture

I think some bug happend when you update new version confile with the codemirror dependency. Can you check for me? Thank you!

[dungbv99]

@jaywcjlove Hopefully you can check it for me . Error happend in this file : https://github.com/uiwjs/react-codemirror/blob/master/src/useCodeMirror.ts#L80

[jaywcjlove]

I see the error message, not the error caused by codemirror. @dungbv99

[jaywcjlove]

@dungbv99

[dungbv99]

@jaywcjlove sorry I have send wrong picture. I have updated this

[dungbv99]

@jaywcjlove Can you check again

[dungbv99]

I have check your code in IDE and something wrong like this @jaywcjlove

[dungbv99]

@jaywcjlove I have down grade uiw/code-mirror to version 3.2.7 and it is ok to run but something like color or code-mirror extension is not use. Hopefully when you update your live you can notice me to update new version. Thank you.

[NguyenTruongThanh-74]

I have same problem. Did you solve this? @jaywcjlove @dungbv99

[NguyenTruongThanh-74]

I have tried to create a basic project with a code mirror and an error still happened @dungbv99 @jaywcjlove

[dungbv99]

@jaywcjlove @NguyenTruongThanh-74 I have know this problem, when i run yarn add @uiw/react-codemirror --save or npm install @uiw/react-codemirror --save now it will install 1 node module in this package @uiw/react-codemirror so the duplicate is happened

[abc444873863]

I have the same problem. Hope it can be solved recently.

[jaywcjlove]

@dungbv99 upgrade @uiw/react-codemirror to v4.2.3

[jaywcjlove]

@abc444873863 @NguyenTruongThanh-74 Seems to be a dependency problem. upgrade @uiw/react-codemirror to v4.2.3

[dungbv99]

@jaywcjlove okay let me try it

[dungbv99]

@jaywcjlove I have check new version, The error is remove but the line number is disable. I must remove /node_module/@uiw/react-codemirror/node_module to show line number. Can you check again. You can tried my easy test source to check this bug. https://github.com/dungbv99/react-code-mirror-error

[dungbv99]

@abc444873863 you can run rm -rf ./node_module/@uiw/react-codemirror/node_module to temporary solve this problem

[jaywcjlove]

npm ls @codemirror/view
my-app@0.1.0 /Users/wangchujiang/git-project/@uiw/demo/react-code-mirror-error
├─┬ @codemirror/lang-javascript@0.19.3
│ ├─┬ @codemirror/autocomplete@0.19.6
│ │ ├─┬ @codemirror/tooltip@0.19.6
│ │ │ └── @codemirror/view@0.19.16 deduped
│ │ └── @codemirror/view@0.19.16 deduped
│ ├─┬ @codemirror/highlight@0.19.6
│ │ └── @codemirror/view@0.19.16 deduped
│ ├─┬ @codemirror/language@0.19.3
│ │ └── @codemirror/view@0.19.16 deduped
│ ├─┬ @codemirror/lint@0.19.3
│ │ ├─┬ @codemirror/gutter@0.19.5
│ │ │ └── @codemirror/view@0.19.16 deduped
│ │ ├─┬ @codemirror/panel@0.19.0
│ │ │ └── @codemirror/view@0.19.16 deduped
│ │ └── @codemirror/view@0.19.16 deduped
│ └── @codemirror/view@0.19.16
└─┬ @uiw/react-codemirror@4.2.3
  ├─┬ @codemirror/basic-setup@0.19.0
  │ ├─┬ @codemirror/closebrackets@0.19.0
  │ │ └── @codemirror/view@0.19.16 deduped
  │ ├─┬ @codemirror/commands@0.19.5
  │ │ └── @codemirror/view@0.19.16 deduped
  │ ├─┬ @codemirror/comment@0.19.0
  │ │ └── @codemirror/view@0.19.16 deduped
  │ ├─┬ @codemirror/fold@0.19.1
  │ │ └── @codemirror/view@0.19.16 deduped
  │ ├─┬ @codemirror/history@0.19.0
  │ │ └── @codemirror/view@0.19.16 deduped
  │ ├─┬ @codemirror/matchbrackets@0.19.3
  │ │ └── @codemirror/view@0.19.16 deduped
  │ ├─┬ @codemirror/rectangular-selection@0.19.1
  │ │ └── @codemirror/view@0.19.16 deduped
  │ ├─┬ @codemirror/search@0.19.2
  │ │ └── @codemirror/view@0.19.16 deduped
  │ └── @codemirror/view@0.19.16 deduped
  ├─┬ @codemirror/theme-one-dark@0.19.1
  │ └── @codemirror/view@0.19.16 deduped
  └── @codemirror/view@0.19.15

@codemirror/view@0.19.15 => @codemirror/view@0.19.16

@dungbv99 This is a problem caused by version locking.

[jaywcjlove]

@dungbv99 Upgrade @uiw/react-codemirror@4.2.4

• https://github.com/codemirror/codemirror.next/issues/608

[karlhorky]

We fixed this in our application by adding a Yarn Resolution to force a single version of @codemirror/state (actually, we already had resolutions of a lot of other CodeMirror packages too, to fix similar breakages):

package.json (note that this is a "resolutions" key, NOT dependencies)

{
  "resolutions": {
    "@codemirror/highlight": "0.19.7",
    "@codemirror/lang-javascript": "0.19.7",
    "@codemirror/state": "0.19.9",
    "@codemirror/view": "0.19.47"
  }
}

[shubhendusaurabh]

I was having the same problem due to @codemirror/stream-parser being archived. now StreamParser must be imported from @codemirror/language

@jaywcjlove please update the readme.

[jaywcjlove]

@shubhendusaurabh Welcome to submit PR

[arvigeus]

I get it too with latest version. Actually even my current version which is deployed and working does not work on my laptop. Removing node_modules and package.lock.json do nothing.

[karlhorky]

In case you use npm and not Yarn, npm 8.3+ has Overrides (a similar feature to Yarn Resolutions).

If I understand the feature correctly, it should work similarly to what I posted above, but just use the key "overrides" instead of "resolutions" in your package.json.

Would be super interested if this works for you!

[arvigeus]

Works like a charm, thank you, @karlhorky !

[guillaume-leo]

I had this error today by using codemirror with AlpineJs... I tried the resolution solution but I get these errors then

warning Resolution field "@codemirror/state@0.19.9" is incompatible with requested version "@codemirror/state@^0.20.0" warning Resolution field "@codemirror/view@0.19.47" is incompatible with requested version "@codemirror/view@^0.20.0" warning Resolution field "@codemirror/state@0.19.9" is incompatible with requested version "@codemirror/state@^0.20.0" warning Resolution field "@codemirror/view@0.19.47" is incompatible with requested version "@codemirror/view@^0.20.0" warning Resolution field "@codemirror/state@0.19.9" is incompatible with requested version "@codemirror/state@^0.20.0" warning Resolution field "@codemirror/view@0.19.47" is incompatible with requested version "@codemirror/view@^0.20.0" warning Resolution field "@codemirror/state@0.19.9" is incompatible with requested version "@codemirror/state@^0.20.0" warning Resolution field "@codemirror/view@0.19.47" is incompatible with requested version "@codemirror/view@^0.20.2" warning Resolution field "@codemirror/state@0.19.9" is incompatible with requested version "@codemirror/state@^0.20.0" warning Resolution field "@codemirror/view@0.19.47" is incompatible with requested version "@codemirror/view@^0.20.0" warning Resolution field "@codemirror/state@0.19.9" is incompatible with requested version "@codemirror/state@^0.20.0" warning Resolution field "@codemirror/view@0.19.47" is incompatible with requested version "@codemirror/view@^0.20.0" warning Resolution field "@codemirror/state@0.19.9" is incompatible with requested version "@codemirror/state@^0.20.0"

[karlhorky]

Yeah, these warnings (they are not errors but warnings) can happen if you use a version incompatible with the version requested by your dependencies.

But they are just warning you about potential incompatibilities, the new versions seem to work fine with @uiw/react-codemirror so far (in my testing)

[indicozy]

For me, I used two components:

import CodeMirror from '@uiw/react-codemirror';
import { Sandpack } from '@codesandbox/sandpack-react';

And because of that I had the same issue. I’ve decided to try out pnpm instead of npm and it somehow resolved the issue!

You can find more here: https://discuss.codemirror.net/t/troubleshooting-article-for-cm6/2803/13

[guillaume-leo]

Yeah, these warnings (they are not errors but warnings) can happen if you use a version incompatible with the version requested by your dependencies.

But they are just warning you about potential incompatibilities, the new versions seem to work fine with @uiw/react-codemirror so far (in my testing)

Yes indeed they are just warnings, but then if I run the project I have a lot of 'No matching export ' errors and then crash...

Then I tried to use pnpm instead of npm or yarn as suggested above, and the original error came back...

That's really annoying can someone can share a working packages.json with me? If I understand correctly if I use correct versions of each packages it should work properly no?

[guillaume-leo]

By the way, I'm using vite, could it be related?

[nimatrazmjo]

Guys, I am trying to use php it give me this error:

import CodeMirror from '@uiw/react-codemirror';
// import { javascript } from '@codemirror/lang-javascript';
import { php } from '@codemirror/lang-php';
import { EditorView } from "@codemirror/view";
export default ({ changeHandler, ...otherProps }) => (
  <CodeMirror
    onChange={changeHandler}
    extensions={[php()]}
    {...otherProps}
  />
)

[jaywcjlove]

@nimatrazmjo Dependency versions must be consistent. check it out with npm ls @codemirror/view

[nimatrazmjo]

Thank you @jaywcjlove, it was versioning issue

[wr8tt5]

I have this Uncaught Error: Unrecognized extension value ... error in an electron project and have not been able to resolve it. I first encountered it when using codemirror-languageserver and worked around it by bringing its source code into my project. That is back on @codemirror/...@0.20.0. It's now been brought to my attention that this issue appears again when upgrading to @codemirror/...@6.x.x. I have a minimal example at codemirror-languageserver-issue15 that can be used to reproduce the issue. The work around this time is to update package.json to pin @uiw/react-codemirror to 4.8.1 i.e.

"dependencies": {
  "@uiw/react-codemirror": "4.8.1",
  ...
}

If It is changed to 4.9.0 or higher the issue arises, but I cannot see anything obvious that has caused this between the v4.8.1 and v4.9.0 tags. I originally raised this issue against the codemirror-languageserver repo here where some further background information can be found. I have not been able to reproduce this on a normal browser (non-electron) project. Any help would be appreciated.

[hodasalah]

Hello ,did any one face this bug with react 18 please i down grade the @ui/react-codemirror to 3.2.1 ii gone but i faced another bug duplicated codemirror component

[Alaboudi1]

I still get the error with most updated deps

"dependencies": {
    "@codemirror/lang-javascript": "^6.1.0",
    "@uiw/react-codemirror": "^4.12.4",
    ...
  },
  "overrides": {
    "@codemirror/highlight": "0.19.8",
    "@codemirror/lang-javascript": "^6.1.0",
    "@codemirror/state": ">=6.0.0",
    "@codemirror/view": ">=6.0.0"
  },

I am building an electron app if that matters.

[jaywcjlove]

@dungbv99

@codemirror/highlight

As of 0.20.0, this package has been split between @lezer/highlight and @codemirror/language

https://github.com/codemirror/highlight/blob/001764b235eba7d9a8fc0a12b3855c459e2f5f85/package.json#L28-L34

[just-Bri]

Why is this issue marked as closed? I'm seeing this error when trying to run a unit test with vitest+testing-library/react.

I've tried every suggestion I've seen so far, things like locking packages to old version and manually installing specific codemirror deps.

[kmacoders]

I still face this error. Haizzz

[jaywcjlove]

@karlhorky You can provide an example that reproduces the error and I'll take a look at it for you.

[jaywcjlove]

The normal reason is a dependency version problem. Upgrade @codemirror/* to v6+

[karlhorky]

I think you meant to tag @kmacoders, right?

[TurtIeSocks]

Seeing this issue now after updating to latest

Broken with:

    "@codemirror/lang-json": "^6.0.1",
    "@codemirror/lint": "^6.1.0",
    "@uiw/react-codemirror": "^4.19.1",

Working with:

    "@codemirror/lang-json": "^6.0.1",
    "@codemirror/lint": "^6.1.0",
    "@uiw/react-codemirror": "4.11.6",

I tried it with every minor version between 4.12.* and 4.19.* and received the error on all of them.

Implementation:

export function Code({ code, setCode }: Props) {
  const extensions = React.useMemo(
    () => [json(), linter(jsonParseLinter())],
    [],
  )

  return (
    <ReactCodeMirror
      extensions={extensions}
      theme="light"
      value={code}
      onUpdate={(value) => {
        if (value.docChanged) {
          setCode(value.state.doc.toString())
        }
      }}
    />
  )
}

Let me know if any other information would be helpful!

[vadimcoder]

I had the same problem and this helped me:

1. remove any direct dependencies on raw codemirror (if any) (I have yarn): yarn remove codemirror

2. rm -fr yarn.lock

3. rm -fr node_modules

4. yarn install

[tensed]

@vadimcoder Thanks! Reinstalling after following these steps seems to do the trick!

[vleborgne]

Hello, I fixed it by adding an alias in my webpack configuration alias: { '@codemirror/state': __dirname + '/node_modules/@codemirror/state/dist/index.cjs', },

[jesse-r-s-hines]

In my case with webpack + typescript changing tsconfig.json module from commonjs to es2020 was the only thing that fixed the issue. (see https://github.com/codemirror/dev/issues/528)

[chatterbox777]

In my case with webpack + typescript changing tsconfig.json module from commonjs to es2020 was the only thing that fixed the issue. (see codemirror/dev#528)

You are my hero man, only this stuff helps... thank you !

[yogiduzit]

I am getting the same error but while testing my CodeEditor component with Vitest. Any suggestions?

[SpaceCowboy326]

I am also seeing this issue with @uiwjs/react-codemirror and vitest. This only happens when running tests, I have not seen the error in dev/production. I have a very minimal reproduction here:

https://github.com/SpaceCowboy326/react-codemirror-vitest

Just run npm run test and it should fail with the error message in the thread description.

[somecho]

I'm also seeing this issue with @uiwjs/react-codemirror v4.20.0 and vitest v0.31.1. I am using @testing-library/react v14.0.0 to render a component with Codemirror. My CodeMirror component is using the @nextjournal/lang-clojure v1.0.0 plugin.