Codemirror: Server side rendering

[liviuignat]

Hi,

I am trying to use CodeMirror on an Universal JS React app and I cannot because it uses browser specific objects directly on the initialisation of the file. Therefore require fails on the server.

It would be great if the navigator, document and other browser specific dependencies could be moved at the constructor level, so require would work with no problem also in a NodeJS environment.

At this point just the ability to require on the server level would be enough.

Thanks,

[marijnh]

I really don't see any way in which it would make sense to load a library that only does anything in the browser outside of the browser. Try restructuring your app to not do that. I'm not going to restructure my library to address this use case.

[rgbkrk]

Just to note on _how_ to do this (for those ending up here via google), some quick tips:

• only require('codemirror') as well as codemirror addons in componentDidMount
• check out bin/highlight.js (here in this repo) -- it can be adapted for server side rendering
• codemirror css does need to be loaded globally

Happy hacking and consider donating to @marijnh for the ever-so-excellent CodeMirror.

[gfx]

When an editor is implemented in TypeScript + React (with SSR), import * as cm from "codemirror" has two meanings:

• Loads the codemirror library
• Refers the @types/codemirror .d.ts file

In order to use @types/codemirror, I'd like to import codemirro in the top level in a React component; that is, compile-time Universal JavaScript makes sense.