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!

[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.

[uds214125]

Ultimately, If you are using vite as project build tool, you should use these configuration,

// vite.config.js
import { defineConfig } from 'vite';
import path from "path";

export default defineConfig({
    optimizeDeps: {     
      include: ['@codemirror/state', '@codemirror/view'],
    },
    resolve: {
        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'
            )
          }
    },
  })

// package.json
{
  "name": "js-vite-cm-demo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^5.2.0"
  },
  "dependencies": {
    "@codemirror/basic-setup": "^0.20.0",
    "@codemirror/lang-javascript": "^6.2.2",
    "@codemirror/state": "^6.4.1",
    "@codemirror/theme-one-dark": "^6.1.2",
    "@codemirror/view": "^6.26.3",
    "codemirror": "^6.0.1"
  }
}