Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
dungbv99 opened this issue Nov 6, 2021 · 62 comments
Labels
bug Something isn't working

Comments

@dungbv99
Copy link

dungbv99 commented Nov 6, 2021

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
Screenshot from 2021-11-06 14-59-31

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

@dungbv99
Copy link
Author

dungbv99 commented Nov 6, 2021

@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
Copy link
Member

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

@jaywcjlove
Copy link
Member

image

@dungbv99

@dungbv99
Copy link
Author

dungbv99 commented Nov 6, 2021

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

@dungbv99
Copy link
Author

dungbv99 commented Nov 6, 2021

@jaywcjlove Can you check again
Screenshot from 2021-11-06 14-59-31

@dungbv99
Copy link
Author

dungbv99 commented Nov 6, 2021

Screenshot from 2021-11-06 15-08-00

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

@dungbv99
Copy link
Author

dungbv99 commented Nov 6, 2021

@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
Copy link

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

@NguyenTruongThanh-74
Copy link

NguyenTruongThanh-74 commented Nov 6, 2021

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

@dungbv99
Copy link
Author

dungbv99 commented Nov 6, 2021

@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
Copy link

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

@jaywcjlove jaywcjlove added the bug Something isn't working label Nov 11, 2021
@jaywcjlove
Copy link
Member

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

@jaywcjlove
Copy link
Member

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

@dungbv99
Copy link
Author

@jaywcjlove okay let me try it

@dungbv99
Copy link
Author

@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 dungbv99 reopened this Nov 12, 2021
@dungbv99
Copy link
Author

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

@jaywcjlove
Copy link
Member

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
Copy link
Member

jaywcjlove commented Nov 13, 2021

@dungbv99 Upgrade @uiw/[email protected]

@karlhorky
Copy link
Contributor

karlhorky commented Mar 17, 2022

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
Copy link
Contributor

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
Copy link
Member

@shubhendusaurabh Welcome to submit PR

@arvigeus
Copy link
Contributor

arvigeus commented May 22, 2022

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
Copy link

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
Copy link

chatterbox777 commented Apr 21, 2023

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
Copy link

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

@SpaceCowboy326
Copy link

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.

jesse-r-s-hines added a commit to jesse-r-s-hines/RISC-V-Graphical-Datapath-Simulator that referenced this issue May 2, 2023
Using commonjs was causing issues with react-codemirror.
See codemirror/dev#528
and uiwjs/react-codemirror#216
@somecho
Copy link

somecho commented May 23, 2023

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
Copy link
Member

@prmichaelsen
Copy link

prmichaelsen commented Sep 6, 2023

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
Copy link

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
Copy link
Contributor

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
Copy link

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
Copy link

RajkiranJogu commented Feb 4, 2024

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
Copy link

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

@joshparolin
Copy link

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
Copy link

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
Copy link

uds214125 commented May 22, 2024

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

samchenghowing added a commit to samchenghowing/Learning_with_PenEditor that referenced this issue Jun 19, 2024
jesse-r-s-hines added a commit to jesse-r-s-hines/RISC-V-Graphical-Datapath-Simulator that referenced this issue Nov 15, 2024
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
Using commonjs was causing issues with react-codemirror.
See codemirror/dev#528
and uiwjs/react-codemirror#216
@josuenm
Copy link

josuenm commented Nov 19, 2024

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
Copy link
Contributor

aspiers commented Dec 16, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests