Uncaught Error:expected a string. You forgot export your component from the file its defined,or you might have mixed up default/named import

Question

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

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
    ? <ul>
        <li><Link to='/' className={link}>{'Home'}</Link></li>
      </ul>
    : <noscript />)
}

function ActionLinks ({isAuthed}) {
  return (isAuthed === true
    ? <ul>
        <li>NEW DUCK</li>
        <li><Link to='/logout' className={link}>{'Logout'}</Link></li>
      </ul>
    : <ul>
        <li><Link to='/' className={link}>{'Home'}</Link></li>
        <li><Link to='/auth' className={link}>{'Authenticate'}</Link></li>
      </ul>)
}

export default function Navigation  ({isAuthed}) {
  return (
    <div className={container}>
      <nav className={navContainer}>
        <NavLinks isAuthed={isAuthed} />
        <ActionLinks isAuthed={isAuthed} />
      </nav>
    </div>
  )
}

---

MainContainer.js

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 (
      <div className={container}>
        <Navigation isAuthed={true} />
        <div className={innerContainer}>
          {this.props.children}
        </div>
      </div>
    )
  },
})

export default MainContainer

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)

Solution 1

In my case, I was importing component as below so i was getting same error.

import { Calculator } from './src/calculator';

To fix it, i modified import as below and it worked.

import Calculator from './src/calculator';

Solution 2

@Harsha I had the same error. It took me an hour or so of hunting around making sure my code was correct, and so forth. I started tearing down the code I had, to make it as simple as possible, and then simpler still.

Finally, the issue was that I had copied an empty file into my component directory, but was coding in an identically named file in another directory. So I was importing an empty file. Of course it was going to be undefined. :(

Also, remember to put in semi-colons. ;)

Solution 3

The same hapenned to me. You are probably not saving the file. Maybe you are saving the App.js file but not the component file. I was saving the current file (ctrl+S) thinking I was saving all the files... I am using VS Code so I went to File/Preferences/Keyboard shortcuts and I set "Save all" to ctrl+shift+S.

Comments

[Gabriel George]

Thanks! Didn't realise this was the issue. Spent 2 hours trying to move things around

[SamB]

See here stackoverflow.com/a/36796281/337934 for an explanation of why this solution works

[Mohit Swami]

I have no words to thank you. i was struggling from many hours and your answer solved my problem in a second.i was also not saving the files. Thank you so much.