title: Uncaught ReferenceError: Navbar is not defined
body: <p>I develop react + meteor app, then I got error like this,</p>
  
  <p><a href="https://i.stack.imgur.com/SDVQs.png" rel="noreferrer"><img src="https://i.stack.imgur.com/SDVQs.png" alt="enter image description here"></a></p>
  
  <p>I try to add navigation <a href="https://react-bootstrap.github.io/components.html#navigation" rel="noreferrer">https://react-bootstrap.github.io/components.html#navigation</a>, get data in this tutorial  . I try to add this const like below way</p>
  
  <p><strong>MainComponent</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  import { Meteor } from 'meteor/meteor';
  import { createContainer } from 'meteor/react-meteor-data';
  import { Button } from 'react-bootstrap';
  
  import AccountsUIWrapper from './AccountsUIWrapper.jsx';
  
  // App component - represents the whole app
  export default class Home extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
              hideCompleted: false,
          };
      }
  
      render() {
          const navbarInstance = (
              &lt;Navbar&gt;
                  &lt;Navbar.Header&gt;
                      &lt;Navbar.Brand&gt;
                          &lt;a href="#"&gt;React-Bootstrap&lt;/a&gt;
                      &lt;/Navbar.Brand&gt;
                  &lt;/Navbar.Header&gt;
                  &lt;Nav&gt;
                      &lt;NavItem eventKey={1} href="#"&gt;Link&lt;/NavItem&gt;
                      &lt;NavItem eventKey={2} href="#"&gt;Link&lt;/NavItem&gt;
                      &lt;NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown"&gt;
                          &lt;MenuItem eventKey={3.1}&gt;Action&lt;/MenuItem&gt;
                          &lt;MenuItem eventKey={3.2}&gt;Another action&lt;/MenuItem&gt;
                          &lt;MenuItem eventKey={3.3}&gt;Something else here&lt;/MenuItem&gt;
                          &lt;MenuItem divider /&gt;
                          &lt;MenuItem eventKey={3.4}&gt;Separated link&lt;/MenuItem&gt;
                      &lt;/NavDropdown&gt;
                  &lt;/Nav&gt;
              &lt;/Navbar&gt;
          );
  
          return (
              &lt;div&gt;
                  {navbarInstance}
  
                  &lt;div className="container"&gt;
                      &lt;div className="row"&gt;
                          &lt;div className="navbar nav-inline"&gt;
                              &lt;AccountsUIWrapper /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;header&gt;
                          &lt;h1&gt;School Attendance&lt;/h1&gt;
                          &lt;h3&gt;Lecturer Report&lt;/h3&gt;
                      &lt;/header&gt;
  
                      &lt;h4&gt;This is home&lt;/h4&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>but I got bellow error. and <a href="https://github.com/react-bootstrap/react-bootstrap/issues/384" rel="noreferrer">there</a> reason as like me.</p>
  
  <p>There add some import </p>
  
  <pre><code>import { Button, Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
  </code></pre>
  
  <p>like this then vanish the error, but I got like this</p>
  
  <p><a href="https://i.stack.imgur.com/MMP6a.png" rel="noreferrer"><img src="https://i.stack.imgur.com/MMP6a.png" alt="enter image description here"></a></p>
  
  <p>I want to correct way to Navbar add </p>