Local language package not working with Rollup dedupe

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"


import {example} from "lang-example"

and changed

extensions: [basicSetup, javascript()]


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()]


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"


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.

Does the language package have its own local node_modules folder? If so, yes, that will cause problems like this, and there’s no convenient workaround. Possibly solutions include copying, rather than symlinking, the package files (but not its node_modules) into your project, publishing it to npm and installing from there, or moving it into your own project tree.

Thanks for your suggestions.

I’m trying to have a really basic dev editor in my lang repo, so I can like npm run dev and see how it’s looking in a browser, and am running into this.
If anyone knows any new tricks let me know.

I tried a importing my lang’s index.ts instead of the compiled/dist output (and using the lezer rollup plugin) and the same thing happens. { dedupe: ["@codemirror/state"] } stops the errors, but no syntax highlighting.
This^ would be good because I could use 1 instance of rollup --watch to build the lang package and make the little bundle for the webpage, I think.