title: Uncaught Error:expected a string. You forgot export your component from the file its defined,or you might have mixed up default/named import
body: <p>Could you please help me to resolve the issue. I have already tried resolving the import functions but i still get that error and I have also tried to remove "{}" which didnt work. Thanks in advance. I am following TylerMcginnis React-Redux course.
  Navigation.js</p>
  
  <pre><code>import React from 'react'
  import PropTypes  from 'prop-types'
  import Link  from 'react-router-dom'
  import { container, navContainer, link } from './styles.css'
  
  Navigation.propTypes = ActionLinks.propTypes = NavLinks.propTypes = {
    isAuthed: PropTypes.bool.isRequired,
  }
  
  function NavLinks ({isAuthed}) {
    return (isAuthed === true
      ? &lt;ul&gt;
          &lt;li&gt;&lt;Link to='/' className={link}&gt;{'Home'}&lt;/Link&gt;&lt;/li&gt;
        &lt;/ul&gt;
      : &lt;noscript /&gt;)
  }
  
  function ActionLinks ({isAuthed}) {
    return (isAuthed === true
      ? &lt;ul&gt;
          &lt;li&gt;NEW DUCK&lt;/li&gt;
          &lt;li&gt;&lt;Link to='/logout' className={link}&gt;{'Logout'}&lt;/Link&gt;&lt;/li&gt;
        &lt;/ul&gt;
      : &lt;ul&gt;
          &lt;li&gt;&lt;Link to='/' className={link}&gt;{'Home'}&lt;/Link&gt;&lt;/li&gt;
          &lt;li&gt;&lt;Link to='/auth' className={link}&gt;{'Authenticate'}&lt;/Link&gt;&lt;/li&gt;
        &lt;/ul&gt;)
  }
  
  export default function Navigation  ({isAuthed}) {
    return (
      &lt;div className={container}&gt;
        &lt;nav className={navContainer}&gt;
          &lt;NavLinks isAuthed={isAuthed} /&gt;
          &lt;ActionLinks isAuthed={isAuthed} /&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <hr>
  
  <p>MainContainer.js</p>
  
  <pre><code>import React from 'react'
  import  Navigation from '../../components/Navigation/Navigation'
  import {container, innerContainer}  from './styles.css'
  import createReactClass from 'create-react-class'
  
  
  const MainContainer = createReactClass({
    render () {
      return (
        &lt;div className={container}&gt;
          &lt;Navigation isAuthed={true} /&gt;
          &lt;div className={innerContainer}&gt;
            {this.props.children}
          &lt;/div&gt;
        &lt;/div&gt;
      )
    },
  })
  
  export default MainContainer
  </code></pre>
  
  <p>error:
  Uncaught 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.
      at invariant (invariant.js:42)</p>