Codemirror not recognizing returned extensions and throwing "Unrecognized extension value in extension set"

[wr8tt5]

When I use codemirror-languageserver as a dependency, Extensions returned by languageServerWithTransport() and passed to codemirror cause it to throw

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

I've read codemirror issue #608 related to this and while I do have several occurrences of @codemirror/state in my project dependency tree, they are the same version. Nevertheless, I added the npm "overrides" key in package.json to ensure they were all the same version (@codemirror/[email protected] in this case) but it made no difference. After a couple days troubleshooting this (debugging the @codemirror/state module trying to make sense of why it refused to recognize extensions) I found that a simple codemirror Facet (a FacetProvider) worked if it was created in my project code, but not if it was returned from languageServerWithTransport(). So, I copied codemirror-languageserver/src/index.ts into my project, removed the dependency on codemirror-languageserver, updated the affected imports, and everything worked.

I would really like to understand the reason behind this, so if any maintainers/contributors can offer tips or further insight, I would appreciate it.

For further context, my project is an electron+react application and I'm using @uiw/react-codemirror to work with codemirror. The LSP (typescript-language-server) is forked by the electron main process, and I have my own transport code to handle LSP+JSON-RPC over electron IPC, which is the reason I'm calling languageServerWithTransport().

[hjr265]

@wr8tt5 I faced a similar issue when upgrading to the latest release of CodeMirror 6. And so did several people: https://discuss.codemirror.net/t/highlighting-that-seems-ignored-in-cm6/4320.

You seem to have narrowed it down to a bit more specific cause of the issue. I will have to look into this.

I would hope/assume that others facing this same issue isn't also because of this package.

But, like mentioned in that thread linked above: https://discuss.codemirror.net/t/highlighting-that-seems-ignored-in-cm6/4320/19, my solution was the same: delete the package-lock.json file, remove node_modules and re-download all my dependencies.

Not the most ideal way of solving the issue. But I am leaving it here just in case it is viable for anyone facing the similar issue.

[wr8tt5]

Removing package-lock.json and the node_modules did not resolve the issue in my case.

If this issue doesn't garner any alternative workarounds, or an explanation/solution, I'm happy to close it. I agree that it's unlikely to be an issue with codemirror-languageserver and more likely due to some subtlety in the javascript/nodejs ecosystem. Raising this issue here serves to canvas contributors of this module, and help any others who find themselves in the same predicament. I was on the verge of looking elsewhere for a working codemirror/LSP example, and it would be a shame if others are turned away by this odd behavior, because I've found this module to be excellent in demystifying a large part of codemirror/LSP integration.

[hjr265]

@wr8tt5 That is so odd. I wonder if something else is still being cached by NPM somehow.

But, you are absolutely right. At least knowing why this happens would be really useful.

I wonder if there is a way to reliably reproduce this issue.

Is your project open source, by any chance?

[wr8tt5]

I've only been able to reproduce this issue using an Electron application. I have not been able to reproduce it with a normal web application e.g. a react/typescript app.

A minimal example Electron application can be found at codemirror-languageserver-issue15.

When run (npm update then npm start) check the browser console for the following message.

index.cjs:2009 Uncaught Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.
at inner (index.cjs:2009:1)
at inner (index.cjs:1984:1)
at inner (index.cjs:1984:1)
at flatten (index.cjs:2013:1)
at Function.resolve (index.cjs:1921:1)
at Function.create (index.cjs:2747:1)
at useCodeMirror.js:139:1
at commitHookEffectListMount (react-dom.development.js:23049:1)
at commitPassiveMountOnFiber (react-dom.development.js:24821:1)
at commitPassiveMountEffects_complete (react-dom.development.js:24781:1)

Copying index.ts into a local file (e.g. src/renderer/codemirror_lsp.ts) and updating src/renderer/components/editor.tsx to use it avoids the problem.

[loiswells97]

I'm also having a similar problem, in that I'm getting the same error as @wr8tt5 when I try to pass the language server created through this plugin into my CodeMirror configuration. In my case I think it might be something to do with the fact that this plugin still has @codemirror/state 0.20.0 as a dependency,
which is a pre-release version of CodeMirror6. Having updated the overall project to the actual release of CodeMirror6, the dependencies for @codemirror/state are mismatched between this plugin and the overall project, resulting in multiple versions being installed: v6.x for the overall project and v0.20.x for this plugin.

[marc2332]

hi, this is indeed caused because of multiple versions of @codemirror/state. I have fixed it in #17

[wr8tt5]

To clarify

caused because of multiple versions of @codemirror/state

the same version of @codemirror/state is being used throughout the codemirror-languageserver-issue15 example project above, albeit an older version @codemirror/[email protected]. So technically, if upgrading to @codemirror/[email protected] resolves the issue in the context of the example electron project, the issue is not a version mismatch.

I've tried using a local codemirror-languageserver module with upgraded @codemirror/* dependencies and it does not seem to resolve the issue of using codemirror-languageserver in an electron project.

The steps I took were as follows.

1. Cloned the example project repo above, and ran ncu -u on it to upgrade its dependencies to the latest major versions.
2. Cloned codemirror-languageserver alongside it, and manually changed its package.json to use the latest versions of the various @codemirror/* modules (being major version 6.x.x). I also had to add browserify/events as a dependency (npm install events) but this is an electron build requirement I think.
3. Updated the example project pakage.json to point to the local codemirror-languageserver clone using a "codemirror-languageserver": "file:../codemirror-languageserver" dependency entry.
4. Ran npm install in codemirror-languageserver and the example project.
5. Ran npm list @codemirror/state etc. to confirm that the latest version is being used throughout.
6. Ran npm start.

The issue persists.

[wr8tt5]

I have just discovered though that after the steps above to use the latest @codemirror/* modules that the issue persists even after using the workaround of copying index.ts into the project, which is unfortunate.

[wr8tt5]

If I update the project package.json to pin @uiw/react-codemirror to 4.8.1 then the issue is avoided. If I pin it to 4.9.0 then the issue appears again. In summary the workaround, if wanting to use @codemirror/*@6.x.x modules, is to do all of the following to the example electron project.

1. ncu -u to upgrade to the latest modules.
2. Copy index.ts into the example electron project and update imports accordingly.
3. Update its package.json to pin @uiw/react-codemirror to 4.8.1 i.e.

"dependencies": {
  "@uiw/react-codemirror": "4.8.1",
  ...
}

It seems that @uiw/[email protected] onwards has the same affliction as codemirror-languageserver, and I can't see any obvious reason looking at a diff between its 4.8.1 and 4.9.0 tags. Probably time to take this issue up with uiwjs/react-codemirror or codemirror/dev.

[marc2332]

@codemirror/[email protected]

v6.1.0 and 0.20.0 are not the same versions, they are not compatible. All other @codemirror/whatever deps are still using @codemirror/state v6.0.0. So, from how I see it, v6.0.0 is the way to go. I have tested it in #17, and it works.

[hjr265]

@loiswells97 #17 has been merged and a new version has been released. Please update and it should solve your dependency issue.

@wr8tt5 You may also want to give the latest release a try.

[wr8tt5]

No it doesn't resolve the issue, but as I've explained above it has made me aware that codemirror-languageserver can be removed from the equation because simply moving from @uiw/[email protected] to 4.9.0 reproduces the issue without codemirror-languageserver being a dependency. I'll see what they say about this over at uiw/react-codemirror.

[marc2332]

No it doesn't resolve the issue, but as I've explained above it has made me aware that codemirror-languageserver can be removed from the equation because simply moving from @uiw/[email protected] to 4.9.0 reproduces the issue without codemirror-languageserver being a dependency. I'll see what they say about this over at uiw/react-codemirror.

Why don't you try updating to the latest version ? @uiw/react-codemirror v4.10.3

[wr8tt5]

I have. That is the point of running ncu -u, but doing so reintroduced the issue even though my original workaround was in place. I then went forward from @uiw/[email protected] to see whether there was a version where the error appeared, and that turns out to 4.9.0.

[Nezteb]

@wr8tt5 Did you ever find a resolution to this issue? 😅