title: Invariant Violation: React error #130
body: <p>So i was currently trying to render the code for a custom sidebar found in  the site: <a href="https://ashiknesin.com/blog/build-custom-sidebar-component-react/" rel="nofollow noreferrer">How to build a custom sidebar in React</a>
  . But i am getting the error: </p>
  
  <blockquote>
    <p>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 <code>TheSidebar</code> </p>
  </blockquote>
  
  <p>I cannot comprehend what is wrong with it, but still, i am new to React. Running it on Node. Any help is appreciated.
  Here is the code: </p>
  
  <pre><code>const React = require('react');
  const ReactDOM = require('react-dom');
  const { IndexLink, Link } = require('react-router');
  // import './Sidebar.scss'
  const classNames = require('classnames');
  
  
  
  
  class TheSidebar extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = {
              showMenu: false
          }
          this.toggleMenu = this.toggleMenu.bind(this)
      }
      componentDidMount() {
          document.addEventListener('click', this.handleClickOutside.bind(this), true);
      }
  
      componentWillUnmount() {
          document.removeEventListener('click', this.handleClickOutside.bind(this), true);
      }
      toggleMenu() {
          this.setState({ showMenu: !this.state.showMenu })
      }
      handleClickOutside(event) {
          const domNode = ReactDOM.findDOMNode(this);
  
          if ((!domNode || !domNode.contains(event.target))) {
              this.setState({
                  showMenu: false
              });
          }
      }
  
      render() {
  
          const showMenu = this.state.showMenu;
          const sidebarClass = classNames({
              'sidebar': true,
              'sidebar-menu-expanded': showMenu,
              'sidebar-menu-collapsed': !showMenu
          });
  
          const elementsClass = classNames({
              'expanded-element': true,
              'is-hidden': !showMenu,
          });
  
  
  
      return (
        &lt;nav className={sidebarClass}&gt;
          &lt;img
            className="menuIcon"
            // src={}
            onClick={this.toggleMenu}
          /&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;Link className="expandable" to="/setting" title="Setting"&gt;
                &lt;img
                  src={'https://png.icons8.com/setting/ffffff'}
                  alt=""
                /&gt;
                &lt;span className={elementsClass}&gt;Setting&lt;/span&gt;
              &lt;/Link&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
  
          );
      }
  }
  
  
  module.exports = TheSidebar;
  </code></pre>
  
  <p>The sidebar is then injected into an App file along with a header and then rendered. The app file and render file are as follows:</p>
  
  <pre><code>const React = require('react');
  const Header = require('./Header.jsx');
  const TheSidebar = require('./Sidebar.jsx');
  
  class App extends React.Component {
      render() {
          return(
              &lt;div&gt;
                  &lt;head&gt;
                      &lt;title&gt;TESTING&lt;/title&gt;
                  &lt;/head&gt;
                  &lt;body&gt;
                      &lt;div&gt;
                          &lt;Header /&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;TheSidebar /&gt;
                      &lt;/div&gt;
                  &lt;/body&gt;
              &lt;/div&gt;
          );
      }
  }
  module.exports = App;
  </code></pre>
  
  <p>And the rendering:</p>
  
  <pre><code>app.set('views', path.join(__dirname, "../views"));
  app.set('view engine', 'jsx');
  app.engine('jsx', createEngine());
  app.get("/testing", function(req, res){
      res.render('pages/App.jsx');
  });
  </code></pre>