I'm trying to use a React Bootstrap Navbar as one of my ponents. However anytime I copy the code and try to render it it gives me the following error:

Element type is invalid: expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of NewSiteNav.

I've tried all I can to troubleshoot it, I've imported/exported the ponents different ways, updated react, react-bootstrap and react-dom and no success. However when I ment out the navbar code and replace it with normal JSX, it works fine.

Here is the ponent:

import React, { Component } from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
import './NewSiteNav.css';

class NewSiteNav extends Component {

   
    render() {
       
        return (
                <div>
                    <Navbar collapseOnSelect>
                        <Navbar.Collapse>
                            <Nav defaultActiveKey="">
                                <Nav.Item>
                                    <Nav.Link href="">Active</Nav.Link>
                                </Nav.Item>
                                <Nav.Item>
                                    <Nav.Link eventKey="">Option 2</Nav.Link>
                                </Nav.Item>
                                <Nav.Item>
                                    <Nav.Link eventKey="" disabled>
                                    Disabled
                                    </Nav.Link>
                                </Nav.Item>
                            </Nav>
                        </Navbar.Collapse>
                    </Navbar>
                </div>
        )
    }
}

export default NewSiteNav;

I'm trying to use a React Bootstrap Navbar as one of my ponents. However anytime I copy the code and try to render it it gives me the following error:

Element type is invalid: expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of NewSiteNav.

I've tried all I can to troubleshoot it, I've imported/exported the ponents different ways, updated react, react-bootstrap and react-dom and no success. However when I ment out the navbar code and replace it with normal JSX, it works fine.

Here is the ponent:

import React, { Component } from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
import './NewSiteNav.css';

class NewSiteNav extends Component {

   
    render() {
       
        return (
                <div>
                    <Navbar collapseOnSelect>
                        <Navbar.Collapse>
                            <Nav defaultActiveKey="">
                                <Nav.Item>
                                    <Nav.Link href="">Active</Nav.Link>
                                </Nav.Item>
                                <Nav.Item>
                                    <Nav.Link eventKey="">Option 2</Nav.Link>
                                </Nav.Item>
                                <Nav.Item>
                                    <Nav.Link eventKey="" disabled>
                                    Disabled
                                    </Nav.Link>
                                </Nav.Item>
                            </Nav>
                        </Navbar.Collapse>
                    </Navbar>
                </div>
        )
    }
}

export default NewSiteNav;

• javascript
• reactjs

Share Improve this question Follow edited Mar 25, 2022 at 13:47 isherwood 61.2k1616 gold badges121121 silver badges169169 bronze badges asked Feb 11, 2019 at 9:19 TiernOTiernO 44777 silver badges2424 bronze badges 5

• Did you import bootstrap in your index file? – Monica Acha Commented Feb 11, 2019 at 9:21
• @MonicaAcha Yes :) – TiernO Commented Feb 11, 2019 at 9:21
• are you sure it is Nav.Item and not NavItem ? bcz the error suggest that you are using something which isn't denfined – aravind_reddy Commented Feb 11, 2019 at 9:28
• How do I center align the nav items? – TiernO Commented Feb 11, 2019 at 10:42
• @aravind_reddy I believe the discrepancy between NavItem and Nav.Item is a breaking change in React-Bootstrap 1.0 beta. – FSCKur Commented Jun 13, 2019 at 16:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Please change you imports to

import { Navbar, Nav } from 'react-bootstrap';

NavItem is not exported as it is Nav.Item

Answers involving import are targeted at NodeJS, but this question is not tagged as NodeJS and I'm getting the same in Flask when my script is inlined in index.html.

I found this helpful:

const Tab = ReactBootstrap.Tab;
const Row = ReactBootstrap.Row;
const Col = ReactBootstrap.Col;
const Nav = ReactBootstrap.Nav;
const NavItem = ReactBootstrap.NavItem;

// other code ...

  <Nav bsStyle="pills" activeKey={1} onSelect={handleSelect}>
    <NavItem eventKey={1} href="/home">
      NavItem 1 content
    </NavItem>
    <NavItem eventKey={2} title="Item">
      NavItem 2 content
    </NavItem>
    <NavItem eventKey={3} disabled>
      NavItem 3 content
    </NavItem>
  </Nav>

I also had some issues because I'm dumb and was following documentation for React-Bootstrap 1.0 beta, which requires Bootstrap 4. I'm actually using 0.32.