React import error - Element type is invalid: expected a string or class/function

Question

I am new to react and don't understand this error I am getting:

Here's the render method for my menu:

render() {
        return (
            <div>
                <Navbar color="faded" light expand="md">
                    <NavbarBrand href="/">Nomad Press</NavbarBrand>
                    <NavbarToggler onClick={this.toggle} />
                    <Collapse isOpen={this.state.isOpen} navbar>
                        <Nav className="ml-auto" navbar>
                            <NavItem>
                                <NavLink tag={Link} to="/Home">Home</NavLink>
                            </NavItem>
                            <NavItem>
                                <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
                            </NavItem>
                            <UncontrolledDropdown nav inNavbar>
                                <DropdownToggle nav caret>
                                    Options
                                </DropdownToggle>
                                <DropdownMenu >
                                    <DropdownItem>
                                        Option 1
                                    </DropdownItem>
                                    <DropdownItem>
                                        Option 2
                                    </DropdownItem>
                                    <DropdownItem divider />
                                    <DropdownItem>
                                        Reset
                                    </DropdownItem>
                                </DropdownMenu>
                            </UncontrolledDropdown>
                        </Nav>
                    </Collapse>
                </Navbar>
            </div>
        );
    }

I double checked my imports and made sure the packages were installed. I don't see anything wrong with my render method. 

Here's what my imports are for menu:

import React from 'react';
...
import { Link } from 'react-router-dom';

I get the following error when I remove the brackets around Link. Any ideas?

EDIT ----

Here's my react versions:

"react-router-dom": "^4.1.2",
"react": "^16.2.0",

It left out my imports for Navlink in the sample code due to the restrictions on stackoverflow. I am importing that correctly.

I am using real-world react sample on github as a reference.

EDIT 2 ------- Here are my imports for App

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';

import './App.css';
import Home from './Home';
import { Button } from 'reactstrap';
import Menu from './Menu'

Answer 1

You have two way imports somewhere.

If moduleA imports moduleB, and moduleB imports moduleA, one of them will be "undefined", and to prevent this, don't use React.

I get the following error when I remove the brackets around Link.

You shouldn't do this, { Link } should be in brackets, cause it's exported with name "export { Link }", not as "export default Link" inside react-router-dom. Problem not with it, perhaps your "Menu" is undefined because it's dependent with other module, which is stored in "App".

Finalize: App have some module "moduleA", and Menu is using "moduleA", when you try to import "moduleA" inside of your menu, it should be working independently from "App" module, check this.

When I use modules folder, like "modules" with list of every single one inside, inner modules cannot call "modules" => child module, to be able use this, use full path to every single module, like import something from "modules/something". Check your dependencies