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)

Answer 1

就我而言，我正在按以下方式导入组件，所以我遇到了同样的错误。

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

要解决此问题，我修改了导入内容，如下所示。

import Calculator from './src/calculator';

Answer 2

@Harsha我有同样的错误。我花了一个小时左右的时间来确保我的代码是正确的，等等。我开始拆除我的代码，使其尽可能简单，然后更简单。

最后，问题是我将一个空文件复制到我的组件目录中，但是在另一个目录中的同名文件中编码。所以我导入了一个空文件。当然它将是未定义的。：（

另外，记得放入分号。 ;）

Answer 3

同样的事情发生在我身上。您可能没有保存文件。也许您正在保存App.js文件，而不是组件文件。我以保存所有文件的方式保存了当前文件（ctrl + S）... 我使用的是VS Code，因此转到文件/首选项/键盘快捷方式，并将“全部保存”设置为ctrl + shift + S。

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

3 个答案: