CodeMirror is a great in-browser editor that needs some help when rendered server-side.
In-browser Code Editor
CodeMirror is a library that provides code and a UI for creating a coding environment inside your browser. There’s an editable text area where you can type code, and as you write it, it’s syntax highlighted just like your editor at home. It’s a cool tool for creating some cool products.
This user interaction happens in the browser, but if your code goes through a server render process, you’re going to need a little help.
Navigator is Not Defined
Because CodeMirror runs in the browser, it is written to rely on certain browser APIs. One such API it relies on is navigator.
If you just
import and use
CodeMirror in certain ways in a Node environment, you’ll see something like this:
  ERROR in ReferenceError: navigator is not defined  at evalmachine.<anonymous>:8017:17  at userAgent (evalmachine.<anonymous>:8010:27)
Conditionally Import Modes
To get around this, you want to conditionally import your “mode”. In CodeMirror, a “mode” is the syntax mode that you’re highlighting – eg, js or css.
In my code, I’m using
It turns out
react-codemirror bits, but I’m going to conditionally load the mode.
(Note that if you’re not using
react-codemirror but raw
codemirror for the editor code, you’ll need to conditionally import it as well, for the same reasons.)
Anyway, the example:
Do you see how
modeLoaded is protecting CodeMirror from engaging its syntax highlighting on the server?
What other strategies do you use to make CodeMirror work better in a server-rendered environment?