title: How to import and export components using React + ES6 + webpack?
body: <p>I'm playing around with <code>React</code> and <code>ES6</code> using <code>babel</code> and <code>webpack</code>. I want to build several components in different files, import in a single file and bundle them up with <code>webpack</code></p>
  
  <p>Let's say I have a few components like this:</p>
  
  <p>my-navbar.jsx</p>
  
  <pre><code>import React from 'react';
  import Navbar from 'react-bootstrap/lib/Navbar';
  
  export class MyNavbar extends React.Component {
      render(){
        return (
          &lt;Navbar className="navbar-dark" fluid&gt;
          ...
          &lt;/Navbar&gt;
        );
      }
  }
  </code></pre>
  
  <p>main-page.jsx</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  import MyNavbar from './comp/my-navbar.jsx';
  
  export class MyPage extends React.Component{
    render(){
      return(
          &lt;MyNavbar /&gt;
          ...
      );
    }
  }
  
  ReactDOM.render(
    &lt;MyPage /&gt;,
    document.getElementById('container')
  );
  </code></pre>
  
  <p>Using webpack and following their tutorial, I have <code>main.js</code>:</p>
  
  <pre><code>import MyPage from './main-page.jsx';
  </code></pre>
  
  <p>After building the project and running it, I get the following error in my browser console:</p>
  
  <pre><code>Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `MyPage`.
  </code></pre>
  
  <p>What am I doing wrong? How can I properly import and export my components?</p>