CODEWITHSUNDEEP
reactjsbrowserifycodemirrorcodemirror-modes
JohnT
JohnT

Reputation: 103

How to apply a Codemirror mode in this React + Browserify environment

I'm developping an app based on this boilerplate: react-app-boilerplate

I'm using the react-codemirror module

I want to apply the javascript mode to codemirror but I get a 'CodeMirror is undefined' error when symply inserting the external script found at http://codemirror.net/mode/javascript/javascript.js

I'm unsure how to pipe everything together in this configuration, I have tried to require the CodeMirror object from react-codemirror in the javascript.js file but wasn't successful.

var InputCode = React.createClass({
  getInitialState () {
    return {
      code: '{ "message": "Some JSON input" }'
    };
  },
  updateCode (newCode) {
    this.setState({
      code: newCode
    });
  },
  render () {
    var options = {
      lineNumbers: true,
      extraKeys: {"Ctrl-Space": "autocomplete"},
      mode: {name: "javascript", json: true, globalVars: true},
      theme: "sublime-text-like",
      viewportMargin: Infinity
    };
    return <Codemirror value={this.state.code} onChange={this.updateCode} options={options} />;
  }
});

Upvotes: 2

Views: 2344

Answers (1)

Jonny Buchanan
Jonny Buchanan

Reputation: 62793

Require all the CodeMirror modes and addons you need up-front - when you require them, they use CodeMirror.defineMode() to configure themselves, so they'll be found when CodeMirror tries to use them later on.

e.g. for the boilerplate you're using, require the JavaScript mode in its main.js module before rendering your app:

require('codemirror/mode/javascript/javascript')

Upvotes: 2

Related Questions