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

[zeleniucvladislav]

Have this issue when passing css() extension for CodeMirror from here : https://www.npmjs.com/package/@codemirror/lang-css. This issue is not happening when downgrading to @uiw/react-codemirror 4.8.1. I also need @uiw/codemirror-themes package and it gives same unrecognized extension value error when using with an old version. I found this @uiw/codemirror-extensions-langs package that works fine but it's size is very big and I need only certain things from there. Is there any solution to use @codemirror/lang-* packages with latest version of @uiw/react-codemirror ?

Unfortunately I couldn't replicate that issue in sandbox as an example
@codemirror/state/dist/index.cjs logs

Old version

New version

npm ls @codemirror/state gives same versions

[jaywcjlove]

npm ls @codemirror/view

@zeleniucvladislav

[zeleniucvladislav]

@jaywcjlove

[jaywcjlove]

Can you put your code samples on codesandbox.io? I can help you troubleshoot the errors.

@zeleniucvladislav

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

[zeleniucvladislav]

Problem is that I couldn't actually replicate that issue on sandbox or on simple create-react-app example. And I used same react version as in project and checked all package versions. I am a bit confused why it works with @uiw/codemirror-extensions-langs which requires that @codemirror/lang-* packages in package-lock.

Thanks a lot for a quick response @jaywcjlove .

[jaywcjlove]

react-codemirror/extensions/langs/package.json

Lines 28 to 42 in 3232f4c

	"@codemirror/lang-cpp": "^6.0.0",
	"@codemirror/lang-html": "^6.4.0",
	"@codemirror/lang-java": "^6.0.0",
	"@codemirror/lang-javascript": "^6.1.0",
	"@codemirror/lang-json": "^6.0.0",
	"@codemirror/lang-lezer": "^6.0.0",
	"@codemirror/lang-markdown": "^6.1.0",
	"@codemirror/lang-php": "^6.0.0",
	"@codemirror/lang-python": "^6.1.0",
	"@codemirror/lang-rust": "^6.0.0",
	"@codemirror/lang-sql": "^6.4.0",
	"@codemirror/lang-wast": "^6.0.0",
	"@codemirror/lang-xml": "^6.0.0",
	"@codemirror/language-data": "^6.0.0",
	"@codemirror/legacy-modes": "^6.0.0"

@zeleniucvladislav I have updated the dependencies for @uiw/codemirror-extensions-langs, but I'm not sure if it can solve your issue.

[zeleniucvladislav]

@jaywcjlove I'm not sure that would fix the problem for me because I want to use only @codemirror/lang-css @codemirror/lang-javascript @codemirror/lang-markdown instead of whole uiw/codemirror-extensions-langs ( which works fine but package size is too big ). But I can't do that because of unrecognized extension value issue. I saw a PR referenced in issue you mentioned that has that interesting text :

Is it true ? Because on sandbox or a simple create-react-app it works as expected.

I need same functionality as here basically + applying a custom theme

Link to PR mentioned : https://github.com/oslabs-beta/Swell-v13/pull/4

[rupeshpadhye]

is there any solid fix to this, I getting this error randomly.

[zeleniucvladislav]

is there any solid fix to this, I getting this error randomly.

Only using uiw/codemirror-extensions-langs package instead

[billdotdev]

I updated @codemirror/view to 6.12.0 and it worked for me

[rupeshpadhye]

nothing worked for me yet! also the error pops up out of blue.
I am using v5 for now

[zeleniucvladislav]

@BillC-DEV Hi. Which @codemirror/state version are you using ? Updated @uiw/react-codemirror and installed latest @codemirror/view but still getting duplicate state errors

[billdotdev]

I didn't install @codemirror/state directly but I think its 6.2.1 in my lockfile

[zeleniucvladislav]

Using latest @codemirror/state and also @codemirror/view but still getting that error


Weirdly works fine when using uiw/codemirror-extensions-langs as a language package

[jaywcjlove]

Clearing your package lock and reinstalling your dependencies often helps with this.

[mbartisan]

I have successfully replicated this issue and created a repo with the minimal amount of steps taken to reproduce the error. View the commit history for detailed steps.

https://github.com/mbartisan/react-codemirror-issue

--
Main points:

Created a new electron forge application:
https://www.electronforge.io/templates/typescript-+-webpack-template
npm init electron-app@latest my-new-app -- --template=webpack-typescript

Installed react and react-dom
npm i react react-dom

Installed @uiw/react-codemirror and @codemirror/lang-javascript
npm i @uiw/react-codemirror @codemirror/lang-javascript

Then followed the basic usage from the @uiw/react-codemirror readme.

import React from 'react';
import CodeMirror from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';

function App() {
  const onChange = React.useCallback((value, viewUpdate) => {
    console.log('value:', value);
  }, []);
  return (
    <CodeMirror
      value="console.log('hello world!');"
      height="200px"
      extensions={[javascript({ jsx: true })]}
      onChange={onChange}
    />
  );
}
export default App;

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

[mbartisan]

My issue was originating from webpack and I was able to adjust my webpack config to resolve it. My fix was to add this to the webpack config:

// webpack.config.js
const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@codemirror/state': path.resolve(__dirname, 'node_modules/@codemirror/state'),
    }
  }
};

Edit: I continued to have some other various issues (mostly with Extensions) which were fixed by mapping to the entire codemirror dir like below. Not fully tested, so your milage may very as well as introduce side effects.

// webpack.config.js
const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@codemirror': path.resolve(__dirname, 'node_modules/@codemirror/'),
    }
  }
};

[hongfaqiu]

Clearing your package lock and reinstalling your dependencies often helps with this.

Thank you, I solved this problem with clearing lock file and reinstalling.

[liliangrong777]

React: 18.2.0
node: 16.14.0

I've tried a lot of things to no avail, but this worked for me

rm -rf package-lock.json
rm -rf node_modules
Add the following to the project package.json
"overrides": {
"@codemirror/highlight": "0.19.8",
"@codemirror/lang-javascript":"^6.1.0",
"@codemirror/state":">=6.0.0",
"@codemirror/view":">=6.0.0"
}
npm i
Then it will work fine

[hongyin163]

Code throw error from here
path: /node_modules/@codemirror/state/dist/index.cjs

function flatten(extension, compartments, newCompartments) {
    let result = [[], [], [], [], []];
    let seen = new Map();
    function inner(ext, prec) {
        let known = seen.get(ext);
        if (known != null) {
            if (known <= prec)
                return;
            let found = result[known].indexOf(ext);
            if (found > -1)
                result[known].splice(found, 1);
            if (ext instanceof CompartmentInstance)
                newCompartments.delete(ext.compartment);
        }
        seen.set(ext, prec);
        if (Array.isArray(ext)) {
            for (let e of ext)
                inner(e, prec);
        }
        else if (ext instanceof CompartmentInstance) {
            if (newCompartments.has(ext.compartment))
                throw new RangeError(`Duplicate use of compartment in extensions`);
            let content = compartments.get(ext.compartment) || ext.inner;
            newCompartments.set(ext.compartment, content);
            inner(content, prec);
        }
        else if (ext instanceof PrecExtension) {
            inner(ext.inner, ext.prec);
        }
        else if (ext instanceof StateField) {
            result[prec].push(ext);
            if (ext.provides)
                inner(ext.provides, prec);
        }
        else if (ext instanceof FacetProvider) {
            result[prec].push(ext);
            if (ext.facet.extensions)
                inner(ext.facet.extensions, Prec_.default);
        }
        else {
            let content = ext.extension;
            if (!content)
                throw new Error(`Unrecognized extension value in extension set (${ext}). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.`);
            inner(content, prec);
        }
    }
    inner(extension, Prec_.default);
    return result.reduce((a, b) => a.concat(b));
}

if I change it to

function flatten(extension, compartments, newCompartments) {
    let result = [[], [], [], [], []];
    let seen = new Map();
    function inner(ext, prec) {
        let known = seen.get(ext);
        if (known != null) {
            if (known <= prec)
                return;
            let found = result[known].indexOf(ext);
            if (found > -1)
                result[known].splice(found, 1);
            if (ext instanceof CompartmentInstance)
                newCompartments.delete(ext.compartment);
        }
        seen.set(ext, prec);
        if (Array.isArray(ext)) {
            for (let e of ext)
                inner(e, prec);
        }
        else if (ext instanceof CompartmentInstance) {
            if (newCompartments.has(ext.compartment))
                throw new RangeError(`Duplicate use of compartment in extensions`);
            let content = compartments.get(ext.compartment) || ext.inner;
            newCompartments.set(ext.compartment, content);
            inner(content, prec);
        }
        else if (ext instanceof PrecExtension) {
            inner(ext.inner, ext.prec);
        }
        else if (ext instanceof StateField) {
            result[prec].push(ext);
            if (ext.provides)
                inner(ext.provides, prec);
        }
        else if (ext instanceof FacetProvider) {
            result[prec].push(ext);
            if (ext.facet.extensions)
                inner(ext.facet.extensions, Prec_.default);
        }
        else {
            let content = ext.extension;
            if (content){
                inner(content, prec);
            }
            // throw new Error(`Unrecognized extension value in extension set (${ext}). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.`);
            
        }
    }
    inner(extension, Prec_.default);
    return result.reduce((a, b) => a.concat(b));
}

looks like ok,

if I set prop extensions =[] , will not throw this error