ESM-compatible CodeMirror build (directly importable in browser)

v6
1

I was a bit disappointed by the lack of CDN support (auto-building ones such as esm.run fail due to the instanceof issue), so I made a build that runs directly in the browser:

It’s not thoroughly battle-tested yet, but seems to be working fine. Here’s a minimal example of how to use it via deno.land/x, modified from the example at https://codemirror.net/try:

<div id="html-input"></div>

<script type="importmap">
	{
		"imports": {
			"codemirror/": "https://deno.land/x/codemirror_esm@v6.0.1/esm/"
		}
	}
</script>
<script async type="module">
	import { basicSetup, EditorView } from "codemirror/codemirror/dist/index.js"
	import { javascript } from "codemirror/lang-javascript/dist/index.js"

	new EditorView({
		doc: "console.log('hello')\n",
		extensions: [basicSetup, javascript()],
		parent: document.body,
	})
</script>

By far the simplest way to use CodeMirror for those who don’t want to faff around with build tools and NPM. Please open issues on the repo if you find bugs!

1 Like
2

Nice! What I do for local testing is use a server that rewrites import paths (my own esmoduleserve, but there’s probably more mature stuff out there by now) to get a similar effect.

3

This piggybacks on top of that solution by running the dev server with esmoduleserve, importing all the modules, then recursively fetching all the JS files, writing them to the esm subdirectory in the same folder structure, and rewriting the absolute paths to relative ones (as CDNs typically don’t serve content from the root URL). It’s a little hacky to be sure, but I figured it’d be quicker to get working this way than try to learn Vite or something… maybe Vite’s super easy to learn, I don’t know, but I’m jaded from too many hundreds of hours spent trying to get webparcelpackbabelsnowscriptrollupjs to spit out code that actually runs.

1 Like
4

Thank you for this! I was just looking for a CDN-based version and this worked. I wish this was part of the docs, which don’t mention CDNs at all: site:https://codemirror.net/docs/ cdn - Google Zoeken

5

This is awesome, thank you — I was trying to move from codemirror 5 and the requirement of using a bundler was a dealbreaker (I’ve also spent too much time dealing with js tooling dependency hell; vanilla or bust for me)

Do you know if there’s a trick to get this to work in Safari? The glitch demo gives me this error in the console:

TypeError: Module specifier, '@codemirror/codemirror/dist/index.js' does not start with "/", "./", or "../". Referenced from https://codemirror-esm-demo.glitch.me/

6

Looks like Safari ≤16.3 doesn’t support import maps (but the upcoming 16.4 will). I don’t have a device running Safari to check on, but should be fixable by replacing all the import statements with fully-qualified URLs.

1 Like
7

For what it’s worth, esm.sh works without any special configuration for me.

8

Any chance you could share a minimal code snippet? I tried to get this working before and it completely failed to load, maybe because https://esm.sh/codemirror redirects to https://esm.sh/codemirror@6.65.7, which seems to be a nonexistent version…? Meanwhile, if I specify v6.0.1, the best I can manage is this:

import { basicSetup, EditorView } from "https://esm.sh/codemirror@v6.0.1"
import { javascript } from "https://esm.sh/@codemirror/lang-javascript@v6.0.1"

new EditorView({
	doc: "console.log('hello')\n",
	extensions: [basicSetup, javascript()],
	parent: document.body,
})

That loads the editor without crashing, but silently fails to load any JS language features.