React Bootstrap: Element type is invalid

Question

I'm trying to use a React Bootstrap Navbar as one of my components. 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 components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component 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 components different ways, updated react, react-bootstrap and react-dom and no success. However when I comment out the navbar code and replace it with normal JSX, it works fine.

Here is the component:

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;

Answer 1

Please change you imports to

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

NavItem is not exported as it is Nav.Item