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

• Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks. codemirror/dev#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.

[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 codemirror/dev#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.

[jaywcjlove]

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

[prmichaelsen]

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`

For posterity, this is the solution that worked for me. My problem specifically was that minimalSetup and basicSetup are functions in newer versions so they break older versions.

[josephrocca]

Just playing around with a very basic hello world via URL imports, and ran into this problem. Downgrading theme-one-dark@6.1.2 to 6.1.1 fixed it for me. Here's a minimal reproduction in case a dev here wants to take a look:

<script type="module">
  import {EditorState} from "https://cdn.jsdelivr.net/npm/@codemirror/state@6.2.1/+esm";
  import {EditorView, keymap} from "https://cdn.jsdelivr.net/npm/@codemirror/view@6.19.0/+esm";

  // upgrading this to `6.1.2` causes this: "Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks"
  import { oneDark } from "https://cdn.jsdelivr.net/npm/@codemirror/theme-one-dark@6.1.1/+esm";

  let startState = EditorState.create({
    doc: "Hello World",
    extensions: [
      oneDark,
    ],
  });

  let view = new EditorView({
    state: startState,
    parent: document.body,
  });
</script>

(if URL imports like this aren't generally supported, then that's just tragic imo - makes it hard to play around with e.g. codepen/jsbin, create little demos, etc.)

[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):

Building on my comment above, if you are also using @mischnic/json-sourcemap, which uses an outdated version of @lezer/common and @lezer/lr and also Renovate Bot or similar to upgrade your dependencies, then you can guide Yarn Resolutions to choose the right versions like this:

{
  "resolutions": {
    "**/@mischnic/json-sourcemap/@lezer/common": "0.15.12",
    "**/@mischnic/json-sourcemap/@lezer/lr": "0.15.8",
    "**/@codemirror/autocomplete/@lezer/common": "1.1.0",
    "**/@codemirror/commands/@lezer/common": "1.1.0",
    "**/@codemirror/lang-javascript/@lezer/common": "1.1.0",
    "**/@codemirror/language/@lezer/common": "1.1.0",
    "**/@codemirror/language/@lezer/lr": "1.3.11"
  }
}

Otherwise, the automatic dependency version upgrades from the bots will cause CodeMirror to break - eg. by losing syntax highlighting.

[vithalreddy]

any one using pnpm and next.js following solution worked for me

rm -rf node_modules pnpm-lock.yaml
rm -rf .next
pnpm i

[RajkiranJogu]

Hi,
I am getting the same error with the latest @uiw/react-codemirror 4.21.21 and @codemirror/lang-sql 6.5.5.

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

Is there any real fix for this issue?
@jaywcjlove

[gDlugokecki]

@RajkiranJogu Were you able to solve it? Got the same issue ;/

[joshparolin]

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

React 18 + Webpack 5. Very basic setup. The webpack alias trick was the only thing that worked for me.

    "@codemirror/lang-html": "^6.4.8",
    "@uiw/react-codemirror": "^4.21.25",

---

import CodeMirror from "@uiw/react-codemirror";
import { html } from "@codemirror/lang-html";

...

<CodeMirror
              value={customHtml}
              height="200px"
              extensions={[html()]}
              onChange={value => {
                setCustomHtml(value);
              }}
            />

[yogiduzit]

I was able to solve it using vitest by adding the following lines

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.