title: React - Uncaught ReferenceError: require is not defined
body: <p>I'm making a simple flask app, using react for the front-end stuff. Right now I'm experimenting with importing React components from other files, without success. This is the error I'm getting:</p>
  
  <p><code>Uncaught ReferenceError: require is not defined</code></p>
  
  <p>This is my html file:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Index page&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.16/css/bulma.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="/static/css/style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="columns"&gt;
          &lt;div class="column"&gt;
              some stuff
          &lt;/div&gt;
          &lt;div class="column"&gt;
              &lt;div id="index"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script type="text/babel" src="static/js/index.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and my <b>index.js</b>:</p>
  
  <pre><code>import FormComponent from './FormComponent.js';
  
  var MainClass = React.createClass({
    render:function(){
      return (
        &lt;div&gt;
          &lt;div&gt;this is the main component&lt;/div&gt;
          &lt;div&gt;&lt;FormComponent /&gt;&lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  
  
  ReactDOM.render(&lt;MainClass /&gt;, document.getElementById('index'));
  </code></pre>
  
  <p>and finally the <b>FormCommponent.js</b>, which is in the same folder:</p>
  
  <pre><code>var FormComponent = React.createClass({
  
    render: function() {
      return (
          &lt;div&gt;this is an imported component&lt;/div&gt;
      );
    }
  
  });
  
  module.exports = FormComponent;
  </code></pre>
  
  <p>Does anyone know what am I doing wrong?</p>
  
  <p>I'm not using any package managers.</p>
  
  <p><b>EDIT</b><br>
  Solved the problem by using browserify, as mentioned below.
  Thanks for the help</p>