Cannot get CodeMirror to work when using require()

Hi,

I installed CodeMirror via npm and cannot get it to work properbly when using require(). I’ve tried using this code:

var js = require("codemirror/mode/javascript/javascript");
var codeMirror = require("codemirror");
var cm = codeMirror.fromTextArea(document.getElementById("codeMirror"), {
  mode:  "javascript"
});

“js” and “codeMirror” are properly loaded as far as I can tell. However, all that happens is that the textarea is displaying a mere “x” and nothing else. When instead using the initialization code from here, everything works fine. I’d like to use the ability to not use fixed paths to load CodeMirror.

The section about module loaders didn’t help me either. Tried it out, but I get the error that “require.config” is not a function, which is because npm/nodejs is using CommonJS, not RequireJS as far as I can tell. I’m however just starting to use nodejs, so I might as well be wrong here.

Any help getting CodeMirror to load properly with require() is very much appreciated, it really looks like a fine tool I’d like to use in my current project.

Are you trying to load CodeMirror in node.js? That does not work – it’s a client-side library.

I’m using the Electron framework which is built upon nodejs to create browser based desktop applications.

I don’t know anything about Electron’s client-side require, but since CodeMirror’s modules are working CommonJS modules (they’ve been used, for example, with Browserify), in principle you should be able to use them this way.

A textarea that displays an ‘x’ doesn’t seem like it’d be a module-loader related problem. Is there anything in the error console?

There is nothing in the error console. I investigated this a little further and found out “by accident” that the problems resulted in the missing CSS-file. If I add this line to the head without explicitly loading CodeMirror js-files via script-tags:

    <link rel="stylesheet" href="cm/lib/codemirror.css">

then everything works using require in my environment*. I read in the CodeMirror docs that the CSS should be loaded automatically with require which appears not to be the case here. But this is not a big deal to me since I can work around this issue by asking require to resolve the CodeMirror path and adding the CSS programmatically.

However, if you have, by chance or knowledge, any idea how I can fix this via proper module loading, I’d be glad to hear it. Thanks for your input so far!

*For anyone interested: This is an example how I load CodeMirror, the “javascript” module and the “closebrackets” addon:

require("codemirror/mode/javascript/javascript");
require("codemirror/addon/edit/closebrackets");
var codeMirror = require("codemirror");
var editor = codeMirror.fromTextArea(document.getElementById(...

That’s never been the case, and if you find a statement to that effect in the docs, please point me at it.

In this section of the manual, right under the first code block, is the sentence:

It will automatically load the modes that the mixed HTML mode depends on (XML, JavaScript, and CSS).

Did I missunterstand that statement and it only refers to mode loading?

Yes, that’s about the CSS mode, as a dependency of the mixed HTML mode.

Yeah, now I get it, sorry for that. :blush: Thanks again!