In three sentences: If I add a local language package as a dependency I get no errors but the language package does not have any effect. Adding the index.js of that language package to the root of my editor package does work. How to make the language package work while keeping it separate from my editor package?
As a start to implementing a custom language package for CodeMirror 6 I started with the official example. My goal is to have the language package project (as per the example, a clone of this repo) in its own local directory and import it in a package for an editor, which is another official example.
I first tried the example editor project, which works perfectly fine and provides syntax highlighting and folding for JavaScript.
Then I tried changing the language package from JavaScript to the example language package. In editor.js of the editor project I ran
npm install --save path/to/lang-example
(package.json now lists "lang-example": "file:relative/path/to/lang-example" as a dependency) and in editor.js changed
import {javascript} from "@codemirror/lang-javascript"
to
import {example} from "lang-example"
and changed
extensions: [basicSetup, javascript()]
to
extensions: [basicSetup, example()]
Rollup built without errors (rollup -c) but when I loaded index.html in a browser I received the error
Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.
A web search showed this is a common error, which lead me to Troubleshooting article for CM6 - #3 by Monkatraz and the solution. As per the Rollup docs, in rollup.config.js I changed
plugins: [nodeResolve()]
to
plugins: [nodeResolve( { dedupe: ["@codemirror/state"] } )]
Again rollup -c succeeds, and the webpage loads without errors. The editor works perfectly fine, except for the fact that the language package seems to not have any effect. There is neither syntax highlighting nor folding.
To rule out any issues with the language package itself, I added dist/index.js of the language package into the root of the editor project as lang-example.js, and in editor.js changed
import {example} from "lang-example"
to
import {example} from "./lang-example.js"
After another rollup -c and a webpage reload, there now indeed is syntax highlighting and folding.
Although using Rollup’s dedupe option seems to have solved the JavaScript error, it seems like it’s not sufficient to make CodeMirror 6 make actual use of the language package.
For now I can proceed by keeping the index.js of the language package in the editor package, but ideally I would keep the sources of the language and editor packages separate and make proper use of a package manager. Could somebody give me any tips?
If you want to look into this, I prepared a repo containing what I described above.