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