未捕获的错误：不变违规：元素类型无效：期望一个字符串（对于内置组件）或类/函数但得到：对象

时间：2015-12-07 09:46:01

标签： reactjs react-router

我收到此错误：

  

未捕获错误：不变违规：元素类型无效：预期   字符串（用于内置组件）或类/函数（用于复合   组件）但得到：对象。

这是我的代码：

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;

38 个答案:

答案 0 :(得分：773)

在我的情况下（使用Webpack ），区别在于：

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

VS 

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

第二个工作，而第一个导致错误。

答案 1 :(得分：149)

您需要导出默认值或require（路径）.default 

var About = require('./components/Home').default

答案 2 :(得分：52)

您刚刚模块化了任何React组件吗？如果是，如果您忘记指定 module.exports ，则会出现此错误，例如：

非模块化的先前有效的组件/代码：

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

模块化的组件/代码与 module.exports ：

module.exports = React.createClass({
    render: function() { ...

答案 3 :(得分：16)

https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4 Router也是react-router的属性之一。 因此，更改模块需要这样的代码：

  var reactRouter = require('react-router')
  var Router = reactRouter.Router
  var Route = reactRouter.Route
  var Link = reactRouter.Link

如果您想使用ES6语法链接使用（import），请使用babel作为帮助。

顺便说一句，为了使您的代码有效，我们可以在{this.props.children}中添加App， 像

render() {
  return (
    <div>
      <h1>App</h1>
      <ul>
        <li><Link to="/about">About</Link></li>
      </ul>
      {this.props.children}
    </div>

  )
}

答案 4 :(得分：16)

如果您收到此错误，可能是因为您使用

导入链接

import { Link } from 'react-router'

相反，使用

可能更好 
import { Link } from 'react-router-dom'
                      ^--------------^

我认为这是反应路由器版本4的要求

答案 5 :(得分：13)

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

就我而言，警告是

  

warning.js：33警告：React.createElement：type无效 - 期望一个字符串（对于内置组件）或类/函数（对于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件。请在index.js检查您的代码：13。

后面跟着错误

  

invariant.js：42未捕获错误：元素类型无效：期望字符串（对于内置组件）或类/函数（对于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件。

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

我在index.js上有以下行。

<ConnectedRouter history={history}>

当我使用关键字＆＃34; ConnectedRouter＆＃34; 搜索上述错误时，我在GitHub页面中找到了该解决方案。

错误是因为，当我们安装react-router-redux软件包时，默认情况下我们会安装此软件包。 https://github.com/reactjs/react-router-redux但不是实际的图书馆。

要解决此错误，请通过使用@

指定npm范围来安装正确的包 
npm install react-router-redux@next

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

谢谢。

PS：即使警告也可以帮到你。不要忽视警告只是单独查看错误。

答案 6 :(得分：10)

就我而言，导出的子模块之一没有返回正确的反应组件。

const Component = <div> Content </div>; 代替 const Component = () => <div>Content</div>;

显示的错误是针对父母的，因此无法弄清楚。

答案 7 :(得分：8)

就我而言，这是由错误的评论符号引起的。这是错的：

<Tag>
    /*{ oldComponent }*/
    { newComponent }
</Tag>

这是正确的：

<Tag>
    {/*{ oldComponent }*/}
    { newComponent }
</Tag>

注意大括号

答案 8 :(得分：7)

我有同样的错误： ERROR FIX !!!!

我使用＆＃39; react-router-redux＆＃39; v4，但她很糟糕.. 在npm之后安装 react-router-redux @ next 我正在＆＃34; react-router-redux＆＃34;：＆＃34; ^ 5.0.0-alpha.9＆＃34;，

和它的工作

答案 9 :(得分：6)

与React Native最新版本0.50及更高版本存在类似问题。

对我来说，这是区别：

import App from './app'

和

import App from './app/index.js'

（后者解决了这个问题）。花了我几个小时来抓住这个奇怪的，很难注意到细微差别:(

答案 10 :(得分：5)

我通过import App from './app/';期望导入./app/index.js来实现此目的，而是导入./app.json。

答案 11 :(得分：5)

我遇到了同样的问题，并意识到我在JSX标记中提供了一个未定义的 React组件。问题是渲染的反应组件是动态计算的，最终是未定义的！

错误说明：

  

不变违规：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件。检查C的渲染方法。，

产生此错误的示例：

var componentA = require('./components/A');
var componentB = require('./components/B');

const templates = {
  a_type: componentA,
  b_type: componentB
}

class C extends React.Component {
  constructor(props) {
    super(props);
  }
  
  // ...
  
  render() {
    //Let´s say that depending on the uiType coming in a data field you end up rendering a component A or B (as part of C)
    const ComponentTemplate = templates[this.props.data.uiType];
    return <ComponentTemplate></ComponentTemplate>
  }
  
  // ...
}

问题是提供了无效的“uiType”，因此产生了未定义的结果：

templates['InvalidString']

答案 12 :(得分：4)

同样是对此的快速补充。我遇到了同样的问题，而Webpack正在编译我的测试，应用程序运行正常。当我将我的组件导入测试文件时，我在其中一个导入上使用了不正确的情况，这导致了同样的错误。

import myComponent from '../../src/components/myComponent'

应该是

import myComponent from '../../src/components/MyComponent'

请注意，导入名称myComponent取决于MyComponent文件中导出的名称。

答案 13 :(得分：3)

另一种可行的解决方案，对我有用：

目前，react-router-redux处于测试阶段且npm返回4.x，但不是5.x.但是@types/react-router-redux返回了5.x.所以使用了未定义的变量。

迫使NPM /纱线使用5.x解决了它。

答案 14 :(得分：2)

在我的情况下，我使用默认导出，但不导出function或React.Component，而只导出JSX元素，即

错误：

export default (<div>Hello World!</div>)

作品：

export default () => (<div>Hello World!</div>)

答案 15 :(得分：2)

我在响应路由中遇到此错误，问题是我在使用

<Route path="/" component={<Home/>} exact />

但这是错误的路线，要求组件作为类/函数，所以我将其更改为

<Route path="/" component={Home} exact />

成功了。 （只需避免在组件周围加括号）

答案 16 :(得分：2)

在我的情况下，我只是在我的一个子模块中的import-decleration中错过了一个分号。

通过更改此内容来修正它：

import Splash from './Splash'

到此：

import Splash from './Splash';

答案 17 :(得分：2)

就我而言，导入是由于库而隐式发生的。

我设法通过更改

来修复它

export class Foo

到

export default class Foo。

答案 18 :(得分：1)

当我在同一目录中使用.jsx和.scss文件时，我遇到了这个错误。

因此，例如，如果您在同一文件夹中有Component.jsx和Component.scss并尝试执行此操作：

import Component from ./Component

Webpack显然感到困惑，至少在我的情况下，当我真的想要.jsx文件时，尝试导入scss文件。

我能够通过重命名.scss文件并避免模糊来修复它。我本可以明确导入Component.jsx

答案 19 :(得分：0)

我也遇到了这个问题。我的导入看起来不错，我可以复制我的副本的内容并将其粘贴到正在使用的位置并且有效。但出错的是对组件的引用。

对我来说，我只需要关闭 expo 并重新启动它。

答案 20 :(得分：0)

除了提到的import / export个问题。我发现使用React.cloneElement()将props添加到子元素，然后渲染它给了我同样的错误。

我不得不改变：

render() {
  const ChildWithProps = React.cloneElement(
    this.props.children,
    { className: `${PREFIX}-anchor` }
  );

  return (
    <div>
      <ChildWithProps />
      ...
    </div>
  );
}

为：

render() {
  ...
  return (
    <div>
      <ChildWithProps.type {...ChildWithProps.props} />
    </div>
  );
}

有关详细信息，请参阅React.cloneElement() docs。

答案 21 :(得分：0)

就我而言，我写的是new Array(100).map((el, ind) => ind).forEach((cur) => setTimeout(fill, (cur + 1) * 200)) 而不是const Tab = createBottomTabNavigator

答案 22 :(得分：0)

由于错误，我尝试从react-native而不是native-base导入Container和Content。

由于此行而发生错误：

import { ActivityIndicator, RefreshControl,  StyleSheet, View, Keyboard, Container, Content } from 'react-native';

下面是代码修复：

import { ActivityIndicator, RefreshControl,  StyleSheet, View, Keyboard } from 'react-native';
import { Container, Content} from 'native-base';

答案 23 :(得分：0)

我遇到了同样的问题，因为我确实导入了不正确的库，所以我检查了库中的文档，并且使用新版本更改了路由，解决方法是：

import {Ionicons} from '@expo/vector-icons';

我写的方式不正确：

import {Ionicons} from 'expo';

答案 24 :(得分：0)

问题也可能是用于默认导出的别名。

更改

import { Button as ButtonTest } from "../theme/components/Button";

到

import { default as ButtonTest } from "../theme/components/Button";

为我解决了这个问题。

答案 25 :(得分：0)

导出到文件底部可能会解决该问题。

const IndicatorCloak =（props）=> {...} 导出默认的IndicatorCloak;

答案 26 :(得分：0)

我遇到"No enablement for clientId: *************" 的问题，因为我的反应版本是React.Fragment，所以我摆脱了它。

答案 27 :(得分：0)

在我的情况下，这是元标记。

我正在使用

const MetaTags = require('react-meta-tags');

我认为MetaTags是默认导出，因此更改此设置对我来说很解决，花了几个小时才弄清楚是哪个原因引起的。

const { MetaTags } = require('react-meta-tags');

答案 28 :(得分：0)

鉴于您的错误：

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

您有2个选项：

  1. 您的导出文件中的单词default和export default class ____....中一样 然后，您的导入将需要避免在其周围使用{}。如import ____ from ____

  2. 避免使用默认单词。然后您的导出看起来像export class ____... 然后，您的导入必须使用{}。像import {____} from ____

答案 29 :(得分：0)

将所有库升级到最新版本时出现此错误

在较旧版本中，以下为导入

import { TabViewAnimated, TabViewPagerPan } from 'react-native-tab-view';

但是在新版本中，它们被替换为以下

import { TabView, PagerPan } from "react-native-tab-view";

因此请通过单击控制键检查所有导入是否正确

答案 30 :(得分：0)

以我为例，我花了很多时间进行搜索并检查了可能的方法，但只能通过这种方式来解决：在导入自定义组件时删除“ {”，“}”：

import OrderDetail from './orderDetail';

我的错误方法是：

import { OrderDetail } from './orderDetail';

由于在orderDetail.js文件中，我将OrderDetail导出为默认类：

class OrderDetail extends Component {
  render() {
    return (
      <View>
        <Text>Here is an sample of Order Detail view</Text>
      </View>
    );
  }
}

export default OrderDetail;

答案 31 :(得分：0)

在我的情况下，它最终是这样导入的外部组件：

import React, { Component } from 'react';

，然后像这样声明：

export default class MyOuterComponent extends Component {

其中一个内部组件导入了React裸机：

import React from 'react';

并点入其中以进行声明：

export default class MyInnerComponent extends ReactComponent {

答案 32 :(得分：0)

我遇到几乎相同的错误：

  

未捕获（承诺）错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到了：对象。

我试图从我的团队开发的另一个节点库中导入纯功能组件。要解决此问题，我必须从

更改为绝对导入（引用node_modules中组件的路径）
  

从“ team-ui”导入FooBarList；

到

  

从'team-ui / lib / components / foo-bar-list / FooBarList'导入FooBarList;

答案 33 :(得分：0)

我发现了此错误的另一个原因。这与CSS-in-JS向React组件中的return函数的顶级JSX返回空值有关。

例如：

const Css = styled.div`
<whatever css>
`;
export function exampleFunction(args1) {
  ...
  return null;
}

export default class ExampleComponent extends Component {
...
render() {
const CssInJs = exampleFunction(args1);
  ...
  return (
    <CssInJs>
      <OtherCssInJs />
      ...
    </CssInJs>
  );
}

我会收到此警告：

  

警告：React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：null。

随后出现此错误：

  

未捕获的错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：null。

我发现这是因为我没有尝试渲染带有CSS-in-JS组件的CSS。我通过确保返回了CSS而不是null值来解决了这个问题。

例如：

const Css = styled.div`
<whatever css>
`;
export function exampleFunction(args1) {
  ...
  return Css;
}

export default class ExampleComponent extends Component {
...
render() {
const CssInJs = exampleFunction(args1);
  ...
  return (
    <CssInJs>
      <OtherCssInJs />
      ...
    </CssInJs>
  );
}

答案 34 :(得分：0)

我遇到了同样的问题，问题是该特定页面的捆绑中未包含某些js文件。尝试包括那些文件，问题可能已解决。  我是这样做的：

.Include("~/js/" + jsFolder + "/yourjsfile")

它为我解决了这个问题。

这是我在Dot NEt MVC中使用React的时候

答案 35 :(得分：0)

@Balasubramani M在这里救了我。想要再增加一个来帮助人们。当您将太多东西粘在一起并使用版本时，这就是问题。我更新了Material-ui的版本，需要更改

import Card, {CardContent, CardMedia, CardActions } from "@material-ui/core/Card";

对此：

import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';

答案 36 :(得分：0)

这意味着您导入的某些组件被错误地声明或不存在

我有类似的问题，我做了

import { Image } from './Shared'

但是当我查看共享文件时，我没有“图像”＃39;组件而不是＆＃39; ItemImage＆＃39;成分

import { ItemImage } from './Shared';

当您从其他项目复制代码时会发生这种情况;）

答案 37 :(得分：0)

对我而言，我的styled-components是在我的功能组件定义之后定义的。它只发生在分期而不是我本地。一旦我将样式组件移到我的组件定义之上，错误便消失了。

相关问题
最新问题