Custom Language (using @codemirror/lang-EXAMPLE fails)

I am using GitHub - codemirror/lang-example: Example/template repository for building a language package as a starting point to build custom language. Followed every single step. Can not integrate into CM:

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.

Any advise would be greatly appreciated.

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.

Here is the language pack package.json:

{
  "name": "@codemirror/lang-x",
  "version": "0.1.0",
  "description": "X language support for CodeMirror code editor",
  "scripts": {
    "test": "mocha test/test.js",
    "prepare": "rollup -c"
  },
  "type": "module",
  "main": "dist/index.js",
  "module": "dist/index.js",
  "exports": {
    "import": "./dist/index.js",
    "require": "./dist/index.cjs"
  },
  "types": "dist/index.d.ts",
  "sideEffects": false,
  "dependencies": {
    "@codemirror/autocomplete": "^0.19.12",
    "@codemirror/highlight": "^0.19.7",
    "@codemirror/language": "^0.19.7",
    "@lezer/lr": "^0.15.1"
  },
  "devDependencies": {
    "@lezer/generator": "^0.15.0",
    "mocha": "^9.0.1",
    "rollup": "^2.60.2",
    "rollup-plugin-dts": "^4.0.1",
    "rollup-plugin-ts": "^2.0.4",
    "typescript": "^4.3.4"
  },
  "license": "MIT"
}

The CM libs versions match in the app to the ones above.

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.

I tried doing it via npm i and it ends up with"

"@codemirror/lang-x": "file:../../x-folder",

in the app package.json.

That did not work and then I also tried with npm link in the language folder and then npm link @codemirror/lang-x in the app folder.

both ways I get the same result.

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.

Maybe look into npm workspaces which can help install the dependencies of multiple local packages in a single tree.

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.

Thank you for quick response. Could you please suggest any reference to put the language directly into main project. I tried , but couldn’t success.