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.