title: Element type is invalid: React.js
body: <p>I have the error: <code>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.</code> when I use the following code:</p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { Provider } from 'react-redux';
  import { ConnectedRouter } from 'react-router-redux';
  import { createBrowserHistory } from 'history';
  import configureStore from './store/configureStore';
  import App from './App';
  import { authConfig } from './auth/authconfig';
  import './index.css';
  import * as serviceWorker from './serviceWorker';
  
  const history = createBrowserHistory();
  
  const store = configureStore(history, window.initialReduxState);
  
  const rootElement = document.getElementById('root');
  
  console.log('init');
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;ConnectedRouter history={history}&gt;
        &lt;App /&gt;
      &lt;/ConnectedRouter&gt;
    &lt;/Provider&gt;,
    rootElement
  );
  
  serviceWorker.register();
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React from 'react';
  import { Route } from 'react-router';
  import Layout from './components/Layout';
  import Home from './components/Home';
  
  export default () =&gt; (
    &lt;Layout&gt;
      &lt;Route exact path="/" component={Home} /&gt;
    &lt;/Layout&gt;
  );
  </code></pre>
  
  <p>Changing <code>&lt;App /&gt;</code> to <code>&lt;p&gt;test&lt;/p&gt;</code> make it work so I guess the problem is in App.js, but am not sure what's wrong there.</p>
  
  <p><s>Also, when I use these code in the client app of .NET Core React-Redux template it works well, that makes me further confused.</s> What do I need to resolve this and how can I find the issue if this information is not enough?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I didn't remember that I substituted react-bootstrap in .net core template to reactstrap, so the problem was in the NavMenu.js as @devserkan pointed out.</p>
  
  <p><strong>Home.js</strong></p>
  
  <pre><code>import React from 'react';
  
  const Home = props =&gt; (
    &lt;div&gt;
      &lt;h1&gt;Hello, world!&lt;/h1&gt;
    &lt;/div&gt;
  );
  
  export default Home;
  </code></pre>
  
  <p><strong>Layout.js</strong></p>
  
  <pre><code>import React from 'react';
  import { Container, Col, Row } from 'reactstrap';
  import NavMenu from './NavMenu';
  
  export default props =&gt; (
    &lt;Container&gt;
      &lt;Row&gt;
        &lt;Col sm="12" lg={{ size: 10, offset: 1 }}&gt;
          &lt;NavMenu /&gt;
        &lt;/Col&gt;
      &lt;/Row&gt;
      &lt;Row&gt;
        &lt;Col sm="12" lg={{ size: 10, offset: 1 }}&gt;
          {props.children}
        &lt;/Col&gt;
      &lt;/Row&gt;
    &lt;/Container&gt;
  );
  </code></pre>
  
  <p><strong>NavMenu.js</strong></p>
  
  <pre><code>import React from 'react';
  import { Link } from 'react-router-dom';
  import { Nav, Navbar, NavItem } from 'reactstrap';
  import styled from 'styled-components';
  
  export default props =&gt; (
    &lt;StyledNavbar inverse fixedTop fluid collapseOnSelect&gt;
      &lt;Navbar.Header&gt;
        &lt;Navbar.Brand&gt;
          &lt;Link to={'/'}&gt;HogeHoge&lt;/Link&gt;
        &lt;/Navbar.Brand&gt;
        &lt;Navbar.Toggle /&gt;
      &lt;/Navbar.Header&gt;
      &lt;Navbar.Collapse&gt;
        &lt;Nav&gt;
          &lt;NavItem href="/counter"&gt;Counter&lt;/NavItem&gt;
          &lt;NavItem href="/fetchdata"&gt;Fetch data&lt;/NavItem&gt;
        &lt;/Nav&gt;
      &lt;/Navbar.Collapse&gt;
    &lt;/StyledNavbar&gt;
  );
  
  //Styled Components
  const StyledNavbar = styled(Navbar)`
    .navbar-nav .active a,
    .navbar-nav .active a:hover,
    .navbar-nav .active a:focus {
      background-image: none;
      background-color: #4189c7;
      color: white;
    }
  `;
  </code></pre>