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.