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

v6
1

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.

2

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.

3

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.

4

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.

5

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.

6

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.

7

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

8

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.

9

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

10

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.

11

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.