I am trying to recreate some code from the React-Bootstrap documentation in my Reat project (bootstrapped with create-react-app).
But I have a problem with these Boostrap "sub-components" like NavBar.Header
This my code:
import React, {Component} from 'react';
import {NavBar, Nav, NavItem} from 'react-bootstrap';
class MainNav extends Component {
render() {
return (
<Navbar>
<Navbar.Header>
<Navbar.Brand>
<a href="#">React-Bootstrap</a>
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={1} href="#">Link</NavItem>
<NavItem eventKey={2} href="#">Link</NavItem>
<NavDropdown eventKey={3} title="Dropdown" id="basic-nav- dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
<MenuItem eventKey={3.3}>Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey={3.4}>Separated link</MenuItem>
</NavDropdown>
</Nav>
</Navbar>
)
}
}
export default MainNav;
I get the following console error:
Uncaught TypeError: Cannot read property 'Header' of undefined
at MainNav.render (MainNav.js:15)
at ReactCompositeComponent.js:796
at measureLifeCyclePerf (ReactCompositeComponent.js:75)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795)
at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
at Object.mountComponent (ReactReconciler.js:46)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:238)
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)
I found this article, which seems to explain the issue: http://www.ericfeminella.com/blog/2016/08/12/react-bootstrap-es6-imports/
But the solution does not work for me. When I try to import directly from the /lib/NavBar
directory, I get a compile error:
Error in ./src/container/blocks/MainNav.js
Module not found: 'react-bootstrap/lib/NavBar' in /homefolder/project/src/containers/blocks
Can anybody help me with his?
There are two main issues I can see in your code:
Your imports should look like the following:
import React, { Component } from 'react';
import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
Once that is corrected your component will run.