Search code examples
javascriptrequirejscodemirror

Setting up codemirror.js with require.js

I'm having problems setting up codmirror.js on my site.

I've tried setting up the library the normal way:

<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="mode/javascript/javascript.js"></script>

However I get the following error in the console:

Error: Mismatched anonymous define() module: function ()

I've included the following configuration for requirejs in my main js file:

require([    "/codemirror-4.5/lib/codemirror.js", "/codemirror-4.5/mode/htmlmixed/htmlmixed.js"
    ], function (CodeMirror) {
        CodeMirror.fromTextArea(document.getElementById("code"), {
            lineNumbers: true,
            mode: "html"
        });
    });

However now I am getting the following errors:

GET //localhost:54911/codemirror-4.5/mode/css/css 404 (Not Found) require.js:1896 Uncaught Error: Script error http://requirejs.org/docs/errors.html#scripterror require.js:194 GET http://localhost:54911/codemirror-4.5/mode/javascript/javascript 404 (Not Found) require.js:1896 Uncaught Error: Script error http://requirejs.org/docs/errors.html#scripterror require.js:194 GET http://localhost:54911/codemirror-4.5/mode/xml/xml 404 (Not Found) require.js:1896 Uncaught Error: Script error http://requirejs.org/docs/errors.html#scripterror require.js:194 generate acc contentCntrl.js:148 GET http://localhost:54911/codemirror-4.5/lib/codemirror 404 (Not Found) require.js:1896 Uncaught Error: Script error http://requirejs.org/docs/errors.html#scripterror

I do not understand why it is trying to load these dependencies locally or even where they are referenced.

Any help in understanding this problem would be greatly appreciated.

Solution

  • The dependencies are loaded from other CodeMirror files -- specifically, the htmlmixed mode requires the XML, JavaScript, and CSS modes.

    Don't go hand-editing those files to change the paths. Instead, keep the CodeMirror directory structure intact, so that the relative paths used to specify dependencies actually work.