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

v6
1

My custom language pack is causing this issue and I verified that there are no clashes of @codemirror/state
├─┬ @codemirror/lang-python@6.1.3
│ ├─┬ @codemirror/autocomplete@6.11.1
│ │ └── @codemirror/state@6.3.2 deduped
│ └─┬ @codemirror/language@6.9.3
│ └── @codemirror/state@6.3.2 deduped
├─┬ @stdcfg/languagepack@0.1.1-language-pack-se0033
│ └─┬ @codemirror/autocomplete@6.12.0
│ └── @codemirror/state@6.3.2 deduped
└─┬ codemirror@6.0.1
├─┬ @codemirror/commands@6.3.2
│ └── @codemirror/state@6.3.2 deduped
├─┬ @codemirror/lint@6.4.2
│ └── @codemirror/state@6.3.2 deduped
├─┬ @codemirror/search@6.5.5
│ └── @codemirror/state@6.3.2 deduped
├── @codemirror/state@6.3.2
└─┬ @codemirror/view@6.22.1
└── @codemirror/state@6.3.2 deduped

I suspect that the files that are generated for the language pack are incorrect. In the language pack example, the main file is index.cjs but in my language pack I have customized package.json to make the main file index.js.
Could that be the problem?

2

I’ve encountered this before (frequently, sadly) due to slightly misaligned versions of the various modular components. Looking at your dependency list, I see

@codemirror/autocomplete@6.11.1
@codemirror/autocomplete@6.12.0

That shouldn’t be an issue, but it’s worth trying to align those versions to match and see. If not that, there may be another dependency that is bringing in a different version of CodeMirror.

Also, you can always try to remove and reinstall all node_modules in case this is bad local state from upgrading packages without pruning them.

3

Thanks, I will try this and provide an update if this helped

4

This seems to have fixed the issue but now I’m facing another issue.
When I import my language pack in the target application I get this error when I launch the target application
export ‘myScript’ (imported as ‘myScript’) was not found in ‘@stdcfg-lib/languagepack’ (module has no exports)

myScript is the name of my custom language. It is exported in the index.ts file as follows

export function myScript() {
return new LanguageSupport(MyScriptLanguage, [
MyScriptLanguage.data.of({ autocomplete: globalCompletion }),
]);
}

Have you faced this issue before

5

This sounds like an issue with how webpack is building or importing these files and not something with CodeMirror.

Unfortunately, I think it’s best to reach out to something like StackOverflow for help, but this sounds like there’s a mismatch between the main or exports entry of your package.json and the built and transpiled JS file is located. It could be further complicated by alias mappings with your WebPack config.

6

You were right. It was a problem in the way I had defined package.json and webpack.config.js

Thanks

7

image
image1892×891 97.9 KB

I facing these error I wil use many ways to solve these still I cause that issue.
the package list are,
“@codemirror/lang-html”: “^6.4.8”,
“@codemirror/lang-json”: “^0.18.0”,
“@uiw/react-codemirror”: “^4.21.25”,

8

For my case, I’m using @uiw/react-codemirror@4.21.25. but facing same issue. I’m trying resolve this for two days. But can’t able to fix.

Dependencies tree:
└─ @uiw/react-codemirror@4.21.25
├─ @babel/runtime@7.24.1
│ └─ regenerator-runtime@0.14.1
├─ codemirror@6.65.7
├─ @codemirror/state@6.4.1
├─ @codemirror/theme-one-dark@6.1.2
│ ├─ @codemirror/view@6.26.0
│ │ ├─ style-mod@4.1.2
│ │ ├─ w3c-keyname@2.2.8
│ │ └─ @codemirror/state@6.4.1
│ ├─ @codemirror/state@6.4.1
│ ├─ @lezer/highlight@1.2.0
│ │ └─ @lezer/common@1.2.1
│ └─ @codemirror/language@6.10.1
├─ @uiw/codemirror-extensions-basic-setup@4.21.25
│ ├─ @codemirror/autocomplete@6.15.0
│ │ ├─ @codemirror/language@6.10.1
│ │ │ ├─ @codemirror/state@6.4.1
│ │ │ ├─ @codemirror/view@6.26.0
│ │ │ ├─ @lezer/common@1.2.1
│ │ │ ├─ @lezer/highlight@1.2.0
│ │ │ ├─ style-mod@4.1.2
│ │ │ └─ @lezer/lr@1.4.0
│ │ │ └─ @lezer/common@1.2.1
│ │ ├─ @codemirror/state@6.4.1
│ │ ├─ @codemirror/view@6.26.0
│ │ └─ @lezer/common@1.2.1
│ ├─ @codemirror/lint@6.5.0
│ │ ├─ @codemirror/state@6.4.1
│ │ ├─ crelt@1.0.6
│ │ └─ @codemirror/view@6.26.0
│ ├─ @codemirror/language@6.10.1
│ ├─ @codemirror/search@6.5.6
│ │ ├─ @codemirror/state@6.4.1
│ │ ├─ @codemirror/view@6.26.0
│ │ └─ crelt@1.0.6
│ ├─ @codemirror/commands@6.3.3
│ ├─ @codemirror/view@6.26.0
│ └─ @codemirror/state@6.4.1
└─ @codemirror/commands@6.3.3
├─ @codemirror/language@6.10.1
├─ @codemirror/state@6.4.1
├─ @lezer/common@1.2.1
└─ @codemirror/view@6.26.0

Code:
import React from ‘react’
import CodeMirror, { ViewUpdate } from ‘@uiw/react-codemirror’;
import { json } from ‘@codemirror/lang-json’;

const Editor = () => {
return (

)
}

export default Editor

9

FWIW @uiw/react-codemirror has been a constant source of these problems (I think this is the way that its own dependencies interact with any code mirror related dependencies in the project). My team has moved away from it entirely to using CodeMirror directly. Not an easy solution, but one that has relieved a lot of headaches.

10

Initially, I utilized CodeMirror directly, encountering the same issue. Consequently, I transitioned to employing the @uiw/react-codemirror package. However, I encountered a discrepancy in language versions. Upon installing dependencies, by default npm installing @codemirror/lang-json version 0.18.0, whereas @uiw/react-codemirror was version 6 so it’s looking for language version also 6. After debugging, I identified and resolved this issue.

Currently, I’m confronted with a new challenge involving dynamic language switching. My application supports five languages (JSON, HTML, TEXT, XML, JavaScript). I would greatly appreciate it if you could share any documentation or resources to facilitate implementation.