Unhandled Runtime Error
Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.
I also get the exact same error if I try to use the codemirror/lang-example project as is out of the box. I am using local file module to test this since I do not want to publish without making sure this works.
Check npm ls --all to see where the duplicated @codemirror/state (and other duplicated @codemirror packages are). Sometimes reinstalling from scratch (removing node_modules and the package lock) helps.
What is interesting to me is that if I go and generate the parser (via lezer-generate) and combine it in a js file … then add that to the extensions it all works. Having it in a package causes the issue. Even if the package has the same exact index.js and that is the main in its package.json.
I ran the command and I do not see duplicated packages.
Is it installed separately and symlinked into the other system? That would cause it to have its own, separate node_modules tree, and thus duplicate @codemirror/state.
FYI publishing to a git repository and including the custom language that way works.
Locally however does not which would be annoying with all the back and forth that would need to happen before a language parser/integration is considered in a good state.
hello, just for information.
i had this problem with “@codemirror/lint”: “^0.20.3”,
other codemirror packages have version 19 - so when i returned to version 19.6 the problem is gone.
so we can use resolutions too.
Hi, I am trying to integrate codemirror/lang-example to my angular project . i followed the above suggestions npm link and as well npm install -file options but unfortunately none of the are working. Then i tried to copy the dist folder of lang-example to my angular project and import { EXAMPLE } from ‘src/example-language/index.js’; this works . (I mean i can see my editor with no errors)
this is how i am creating my editor createCodeMirrorEditor(element: HTMLElement) {
const state = EditorState.create({
doc: ‘console.log(“hello”);\n// type if.’,
extensions: [basicSetup,EXAMPLE(),oneDark],
}); //state.language = DecisionLogicParser;
this.editorView = new EditorView({
state,
parent: element,
});
return this.editorView;
}. But can you please let me know the correct procedure to integrate custom-language to angular.
Thank you.
ERROR Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.
inner index.js:2026
inner index.js:2001
inner index.js:2027
inner index.js:2001
inner index.js:2027
inner index.js:2001
flatten index.js:2030
resolve index.js:1938
create index.js:2768
createCodeMirrorEditor codemirror.service.ts:35
ngAfterViewInit app.component.ts:18
I suspect you’re using multiple dependency trees with their own copies of @codemirror/state and such in a single project. That doesn’t work. You’ll need to either put your language directly into your main project, or install/copy it into that project’s node_modules in a way that doesn’t give it its own node_modules.