未捕获的错误:不变违规:元素类型无效:预期是字符串(对于内置组件)或类/函数,但得到:对象

IT技术 reactjs react-router
2021-03-31 23:32:12

我收到此错误:

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

这是我的代码:

var React = require('react')
var ReactDOM =  require('react-dom')
var Router = require('react-router')
var Route = Router.Route
var Link = Router.Link

var App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
        </ul>
      </div>
    )
  }
})

var About = require('./components/Home')
ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
    </Route>
  </Router>
), document.body)

我的Home.jsx文件:

var React = require('react');
var RaisedButton = require('material-ui/lib/raised-button');

var Home = React.createClass({
  render:function() {
    return (
        <RaisedButton label="Default" />
    );
  },
});

module.exports = Home;
6个回答

在我的情况下(使用 Webpack)它是以下之间的区别:

import {MyComponent} from '../components/xyz.js';

对比

import MyComponent from '../components/xyz.js';

第二个工作,而第一个导致错误。或者相反。

<rant>那太好了:如果我写import {App} from './App';,错误是'./App' does not contain an export named 'App'.,如果我删除大括号,错误就变成Element type is invalid: expected a string ... but got: object.欢迎来到 ES 导入地狱。</rant>
2021-05-21 23:32:12
巨大的。为什么会这样?
2021-05-23 23:32:12
对于未来的人,我的情况是我使用的元素名称中的错字。我改<TabBarIOS.item><TabBarIOS.Item>
2021-06-06 23:32:12
对于仍然想知道为什么会这样的人 - {MyComponent} 从文件 '../components/xyz.js' 导入导出的 'MyComponent' - 第二个从 '../components/xyz.js'导入默认导出。
2021-06-11 23:32:12
来自未来的 Googler,谢谢这是我的问题!回想起来这是有道理的,因为第一个是解构导出,但是如果您使用默认值,那么它只是试图解构函数/类。
2021-06-18 23:32:12

你需要 export default 或 require(path).default

var About = require('./components/Home').default
它有效,但有人可以解释 .default 的作用。
2021-06-01 23:32:12
嗯,在我的情况下添加 .default 解决了这个问题。但是,我实际上是在该类上导出默认的 Home 扩展组件,所以我希望它可以在没有“.default”的情况下工作
2021-06-08 23:32:12
@BurakKarasoy 您需要 .default ,因为 Babel 构建module的标准方式是将export default语句转换为,exports.default因此您必须.default在导入module时使用摆脱这种情况的一种方法是使用babel-plugin-add-module-exports来恢复默认行为。
2021-06-10 23:32:12
我对'react-native-navbar'有这个问题。我在要求上调用了默认值,它解决了我的问题。谢谢。
2021-06-19 23:32:12
你能解释一下原因,比如我们添加默认值时会发生什么?
2021-06-19 23:32:12

您是否刚刚module化了任何 React 组件?如果是,如果您忘记指定module.exports您将收到此错误,例如:

非module化以前有效的组件/代码:

var YourReactComponent = React.createClass({
    render: function() { ...

带有module.exports 的module化组件/代码

module.exports = React.createClass({
    render: function() { ...
创建类然后导出是否相同?喜欢你的第一个片段然后module.exports = YourReactComponent
2021-06-06 23:32:12
我能够将其简化为: export default class YourReactComponent extends React.Component {
2021-06-06 23:32:12
得到同样的错误。我能够在一个组件中呈现它,但无法在另一个组件中呈现它。
2021-06-10 23:32:12
即使我提到module.exports仍然收到错误
2021-06-15 23:32:12

如果您收到此错误,可能是因为您正在使用

import { Link } from 'react-router'

相反,最好使用

从' react-router-dom '导入{链接}
                      ^--------------^

我相信这是react-router版本 4 的要求

我在另一个项目中遇到了同样的错误,问题出importlink.
2021-05-25 23:32:12
我的朋友是从 导入链接react,而不是从react-router-dom. 修复了问题。以前从未见过此错误消息。
2021-05-27 23:32:12

不要对单个问题的答案列表感到惊讶。这个问题有多种原因;

就我而言,警告是

warning.js:33 警告:React.createElement:类型无效——需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:未定义。您可能忘记从它定义的文件中导出您的组件。在 index.js:13 检查您的代码。

其次是错误

invariant.js:42 未捕获的错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)但得到:未定义。您可能忘记从定义组件的文件中导出组件。

我无法理解错误,因为它没有提到任何方法或文件名。只有在查看了上面提到的这个警告后,我才能解决。

我在 index.js 中有以下行。

<ConnectedRouter history={history}>

当我使用关键字“ConnectedRouter”搜索上述错误时,我在 GitHub 页面中找到了解决方案。

错误是因为,当我们安装react-router-redux包时,默认情况下我们会安装这个包。 https://github.com/reactjs/react-router-redux但不是实际的库。

要解决此错误,请通过指定 npm 范围来安装正确的包 @

npm install react-router-redux@next

您不需要删除错误安装的软件包。它将被自动覆盖。

谢谢你。

PS:即使警告也能帮助你。不要只看错误忽略警告

谢谢你的回答很棒。问题没有完全理解或解决,因为您提到有多种原因。在我的情况下,我不得不使用 react-router-redux 库,但仅此一项还不够,我的笑话失败了,因为我使用的是 react-hot-loader,从“export default hot(module)(withRouter (我的组件));" 我能够让我的单元测试运行,这是我的问题。主代码从来没有出现过问题。所以我假设一些 lib 与依赖项/jest/OS 冲突是嫌疑犯。
2021-06-06 23:32:12