React Codemirror + Browserify not rendering htmlmixed mode

Question

I'm trying to use react-codemirror to display a chunk of html in a form, but for some reason I cannot get codemirror to behave. Before switching to react-codemirror, I was having the same issues with browserify + vanilla codemirror, so I'm almost positive the problem lies with how I've setup my build.

First though, the React component:

CodeMirror = require('react-codemirror');
require('codemirror/mode/htmlmixed/htmlmixed');

... (other react code) ...

render: function() {
    return (
        ... (jsx elements) ...
        <CodeMirror ref="editor"
                    value={this.props.slide.html}
                    autoSave={true}
                    options={{
                        mode: 'htmlmixed',
                        lineWrapping: true,
                        lineNumbers: true
                    }}>
        </CodeMirror>
    );
}

Then, the gulpfile.js (I'm using gulp to build the browserify bundles):

...
var libs = [
    "auth0-lock",
    "codemirror",
    "debug",
    "fluxible",
    "form-serializer",
    "hammerjs",
    "history",
    "jquery",
    "mousetrap",
    "object-assign",
    "promise",
    "react",
    "react-codemirror",
    "react-dom",
    "serialize-javascript",
    "validator"
];

var tasks = {
    ... (task definitions) ...
    vendors: function() {
        var bundler = browserify({
            debug: true,
            fullPaths: !production
        });

        // Loop over the libs and expose them
        libs.forEach(function(lib) {
            bundler.require(lib, { expose: lib });
        });

        var start = new Date();
        console.log('LIB bundle started at ' + start);
        return bundler.bundle()
                        .on('error', handleError('Browserify'))
                        .pipe(source('libs.js'))
                        .pipe(gulp.dest('public/js/'))
                        .pipe(notify(function() {
                            console.log('LIB bundle built in ' + (Date.now() - start) + 'ms');
                        }));
    },
    ... (more task definitions) ...
};
...

The result of all this is the following:

As you can see, there is no syntax highlighting AND paragraph endings (as well as the cursor endings) have the weird A^ character. I have no idea what is going on.

Some of the more relevant things that I have tried to fix this problem:

• Add in require('codemirror/mode/xml/xml'); require('codemirror/mode/css/css'); require('codemirror/mode/javascript/javascript'); to the React file after importing codemirror. There was no change in behaviour.

• Include 'codemirror/mode/htmlmixed/htmlmixed' as well as 'codemirror/mode/xml/xml', 'codemirror/mode/css/css', 'codemirror/mode/javascript/javascript' to the libs variable in the gulpfile. That failed with an error which indicated that the browser was unable to resolve require('../../lib/codemirror') in the mode files. I couldn't find a good way to get rid of the error. In addition to this problem, I noticed that my libs.js was built with the mode files regardless of my addition of the mode location strings to the libs variable. That indicates to me that the modes, although included, were included in the libs.js file incorrectly? If so, I can't imagine why the browser console isn't showing an error when I only had 'codemirror' in the libs variable.

Any help in debugging this issue would be greatly appreciated! (Do let me know if you need more info)