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

dungbv99 · 2021-11-06T07:55:40Z

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 · 2021-11-06T07:58:25Z

@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 · 2021-11-06T08:00:44Z

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

jaywcjlove · 2021-11-06T08:01:47Z

@dungbv99

dungbv99 · 2021-11-06T08:02:29Z

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

dungbv99 · 2021-11-06T08:02:56Z

@jaywcjlove Can you check again

dungbv99 · 2021-11-06T08:09:37Z

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

dungbv99 · 2021-11-06T08:29:28Z

@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 · 2021-11-06T10:03:02Z

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

NguyenTruongThanh-74 · 2021-11-06T12:08:35Z

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

dungbv99 · 2021-11-06T17:19:07Z

@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 · 2021-11-10T10:06:01Z

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

jaywcjlove · 2021-11-11T02:10:58Z

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

jaywcjlove · 2021-11-11T02:38:20Z

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

dungbv99 · 2021-11-12T07:42:20Z

@jaywcjlove okay let me try it

dungbv99 · 2021-11-12T16:43:48Z

@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 · 2021-11-12T16:46:36Z

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

jaywcjlove · 2021-11-13T04:36:26Z

npm ls @codemirror/view
[email protected] /Users/wangchujiang/git-project/@uiw/demo/react-code-mirror-error
├─┬ @codemirror/[email protected]
│ ├─┬ @codemirror/[email protected]
│ │ ├─┬ @codemirror/[email protected]
│ │ │ └── @codemirror/[email protected] deduped
│ │ └── @codemirror/[email protected] deduped
│ ├─┬ @codemirror/[email protected]
│ │ └── @codemirror/[email protected] deduped
│ ├─┬ @codemirror/[email protected]
│ │ └── @codemirror/[email protected] deduped
│ ├─┬ @codemirror/[email protected]
│ │ ├─┬ @codemirror/[email protected]
│ │ │ └── @codemirror/[email protected] deduped
│ │ ├─┬ @codemirror/[email protected]
│ │ │ └── @codemirror/[email protected] deduped
│ │ └── @codemirror/[email protected] deduped
│ └── @codemirror/[email protected]
└─┬ @uiw/[email protected]
  ├─┬ @codemirror/[email protected]
  │ ├─┬ @codemirror/[email protected]
  │ │ └── @codemirror/[email protected] deduped
  │ ├─┬ @codemirror/[email protected]
  │ │ └── @codemirror/[email protected] deduped
  │ ├─┬ @codemirror/[email protected]
  │ │ └── @codemirror/[email protected] deduped
  │ ├─┬ @codemirror/[email protected]
  │ │ └── @codemirror/[email protected] deduped
  │ ├─┬ @codemirror/[email protected]
  │ │ └── @codemirror/[email protected] deduped
  │ ├─┬ @codemirror/[email protected]
  │ │ └── @codemirror/[email protected] deduped
  │ ├─┬ @codemirror/[email protected]
  │ │ └── @codemirror/[email protected] deduped
  │ ├─┬ @codemirror/[email protected]
  │ │ └── @codemirror/[email protected] deduped
  │ └── @codemirror/[email protected] deduped
  ├─┬ @codemirror/[email protected]
  │ └── @codemirror/[email protected] deduped
  └── @codemirror/[email protected]

~~@codemirror/[email protected]~~ => @codemirror/[email protected]

@dungbv99 This is a problem caused by version locking.

jaywcjlove · 2021-11-13T04:37:15Z

@dungbv99 Upgrade @uiw/[email protected]

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 · 2022-03-17T09:04:24Z

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 · 2022-05-04T09:03:11Z

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 · 2022-05-04T11:51:51Z

@shubhendusaurabh Welcome to submit PR

arvigeus · 2022-05-22T09:07:18Z

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.

jesse-r-s-hines · 2023-04-10T01:11:17Z

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 · 2023-04-21T10:07:42Z

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 · 2023-04-25T19:51:17Z

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

SpaceCowboy326 · 2023-04-27T16:19:02Z

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.

Using commonjs was causing issues with react-codemirror. See codemirror/dev#528 and uiwjs/react-codemirror#216

somecho · 2023-05-23T11:53:18Z

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 · 2023-05-23T12:47:49Z

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

prmichaelsen · 2023-09-06T03:49:24Z

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 · 2023-09-16T20:40:19Z

Just playing around with a very basic hello world via URL imports, and ran into this problem. Downgrading [email protected] 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/[email protected]/+esm";
  import {EditorView, keymap} from "https://cdn.jsdelivr.net/npm/@codemirror/[email protected]/+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/[email protected]/+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 · 2023-09-20T07:59:22Z

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 · 2024-01-11T04:05:37Z

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 · 2024-02-04T17:19:03Z

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 · 2024-03-20T14:20:53Z

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

joshparolin · 2024-04-10T01:06:43Z

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 · 2024-04-10T01:10:50Z

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 · 2024-05-22T15:20:05Z

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"
  }
}

Using commonjs was causing issues with react-codemirror. See codemirror/dev#528 and uiwjs/react-codemirror#216

josuenm · 2024-11-19T02:36:38Z

If anyone is still having a problem, try this:

vite.config.ts

export default defineConfig(async () => ({
  resolve: {
      alias: {
        '@codemirror/state': path.resolve(__dirname, 'node_modules/@codemirror/state/dist/index.cjs'),
      }
  }
}));

aspiers · 2024-12-16T01:21:36Z

See #613 (comment) and #680 (comment) for a proposed proper fix.

jaywcjlove added the bug Something isn't working label Nov 11, 2021

dungbv99 closed this as completed Nov 12, 2021

dungbv99 reopened this Nov 12, 2021

jaywcjlove closed this as completed in b26e854 Nov 13, 2021

c4lliope mentioned this issue Nov 20, 2021

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

Closed

jaywcjlove mentioned this issue Dec 2, 2021

Critical dependency: the request of a dependency is an expression uiwjs/react-code-preview#94

Closed

jaywcjlove pinned this issue Dec 10, 2021

jaywcjlove mentioned this issue Apr 26, 2022

error - TypeError: Cannot redefine property: EditorView #304

Closed

jesse-r-s-hines added a commit to jesse-r-s-hines/RISC-V-Graphical-Datapath-Simulator that referenced this issue May 2, 2023

Use es2020 modules

255b9db

Using commonjs was causing issues with react-codemirror. See codemirror/dev#528 and uiwjs/react-codemirror#216

somecho mentioned this issue May 23, 2023

Error testing with Vitest #506

Open

This was referenced Jul 13, 2023

Migrate from CRA to Vite KittyCAD/modeling-app#170

Merged

some test progress KittyCAD/modeling-app#175

Merged

karlhorky mentioned this issue Sep 20, 2023

Update @lezer/common and @lezer/lr mischnic/json-sourcemap#1

Closed

jaywcjlove mentioned this issue Jan 11, 2024

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

Open

pedrobonamin mentioned this issue Jan 22, 2024

Vision tool is crashing, seemingly by fault of the codemirror package sanity-io/sanity#5509

Open

Sec-ant mentioned this issue Feb 18, 2024

refactor(website): Upgrade dependencies and use StarlightPage component biomejs/biome#1854

Merged

samchenghowing added a commit to samchenghowing/Learning_with_PenEditor that referenced this issue Jun 19, 2024

Upgrade codemirror 5 to 6 (breaking change) uiwjs/react-codemirror#216

ae6c938

jaywcjlove mentioned this issue Jul 23, 2024

Browser spell checking doesn't correct incorrect word #665

Open

jesse-r-s-hines added a commit to jesse-r-s-hines/RISC-V-Graphical-Datapath-Simulator that referenced this issue Nov 15, 2024

Use es2020 modules

2c5d11c

Using commonjs was causing issues with react-codemirror. See codemirror/dev#528 and uiwjs/react-codemirror#216

jesse-r-s-hines added a commit to jesse-r-s-hines/RISC-V-Graphical-Datapath-Simulator that referenced this issue Nov 17, 2024

Use es2020 modules

9e0980e

Using commonjs was causing issues with react-codemirror. See codemirror/dev#528 and uiwjs/react-codemirror#216

aspiers mentioned this issue Dec 16, 2024

NPM modules incorrectly interpreted as CJS #680

Open

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

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

Comments

dungbv99 commented Nov 6, 2021 • edited Loading

dungbv99 commented Nov 6, 2021

jaywcjlove commented Nov 6, 2021

jaywcjlove commented Nov 6, 2021

dungbv99 commented Nov 6, 2021

dungbv99 commented Nov 6, 2021

dungbv99 commented Nov 6, 2021

dungbv99 commented Nov 6, 2021

NguyenTruongThanh-74 commented Nov 6, 2021

NguyenTruongThanh-74 commented Nov 6, 2021 • edited Loading

dungbv99 commented Nov 6, 2021

abc444873863 commented Nov 10, 2021

jaywcjlove commented Nov 11, 2021

jaywcjlove commented Nov 11, 2021

dungbv99 commented Nov 12, 2021

dungbv99 commented Nov 12, 2021

dungbv99 commented Nov 12, 2021

jaywcjlove commented Nov 13, 2021

jaywcjlove commented Nov 13, 2021 • edited Loading

karlhorky commented Mar 17, 2022 • edited Loading

shubhendusaurabh commented May 4, 2022

jaywcjlove commented May 4, 2022

arvigeus commented May 22, 2022 • edited Loading

jesse-r-s-hines commented Apr 10, 2023

chatterbox777 commented Apr 21, 2023 • edited Loading

yogiduzit commented Apr 25, 2023

SpaceCowboy326 commented Apr 27, 2023

somecho commented May 23, 2023

jaywcjlove commented May 23, 2023

prmichaelsen commented Sep 6, 2023 • edited Loading

josephrocca commented Sep 16, 2023

karlhorky commented Sep 20, 2023

vithalreddy commented Jan 11, 2024

RajkiranJogu commented Feb 4, 2024 • edited Loading

gDlugokecki commented Mar 20, 2024

joshparolin commented Apr 10, 2024

yogiduzit commented Apr 10, 2024

uds214125 commented May 22, 2024 • edited by jaywcjlove Loading

josuenm commented Nov 19, 2024

aspiers commented Dec 16, 2024

dungbv99 commented Nov 6, 2021 •

edited

Loading

NguyenTruongThanh-74 commented Nov 6, 2021 •

edited

Loading

jaywcjlove commented Nov 13, 2021 •

edited

Loading

karlhorky commented Mar 17, 2022 •

edited

Loading

arvigeus commented May 22, 2022 •

edited

Loading

chatterbox777 commented Apr 21, 2023 •

edited

Loading

prmichaelsen commented Sep 6, 2023 •

edited

Loading

RajkiranJogu commented Feb 4, 2024 •

edited

Loading

uds214125 commented May 22, 2024 •

edited by jaywcjlove

Loading