未捕获的错误：始终违反：元素类型无效：预期为字符串（对于内置组件）或类/函数，但得到了：对象

我收到此错误：

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

这是我的代码：

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;

就我而言（使用Webpack）是以下两者之间的区别：

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

与

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

第二个起作用，而第一个引起错误。或相反。

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

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

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

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

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

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

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

如果出现此错误，可能是因为您正在使用导入链接

import { Link } from 'react-router'

相反，使用它可能会更好

从“ react-router-dom ” 导入{Link}
                      ^ -------------- ^

我相信这是React Router版本4的要求

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

如果要使用链接use（import）的ES6语法，请使用babel作为帮助程序。

顺便说一句，为使您的代码正常工作，我们可以{this.props.children}在中添加App，例如

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

  )
}

对于单个问题的答案列表，请不要感到惊讶。此问题有多种原因。

就我而言，警告是

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组件。

const Component = <div> Content </div>;

代替

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

显示的错误是针对父级的，因此无法确定。

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

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

这是对的：

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

注意大括号

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

我使用'react-router-redux'v4，但是她很糟糕。.npm安装react-router-redux @ next之后， 我在 “ react-router-redux”上：“ ^ 5.0.0-alpha.9”，

和它的工作

我是通过import App from './app/';期望它导入来实现的./app/index.js，但是却导入了./app.json。

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

错误指出：

不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件。检查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']

就像对此的快速补充。我遇到了同样的问题，而Webpack正在编译测试，并且应用程序运行良好。当我将组件导入测试文件时，我在其中一个导入中使用了不正确的大小写，这会导致相同的错误。

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

本来应该

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

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

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

对我来说，两者之间是有区别的：

import App from './app'

和

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

（后者解决了该问题）。花了我几个小时来捕捉这个奇怪的，难以察觉的细微差别:(

另一个可能的解决方案，对我有用：

当前，react-router-redux处于beta中，npm返回4.x，但不返回5.x。但是@types/react-router-redux返回了5.x。因此，使用了未定义的变量。

强制NPM / Yarn使用5.x为我解决了该问题。

鉴于您的错误：

'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 ____

在我的情况下，导入是由于库而隐式发生的。

我设法通过更改来解决

export class Foo

至

export default class Foo。

当我在同一目录中具有相同根名称的.jsx和.scss文件时，遇到了此错误。

因此，举例来说，如果你有Component.jsx和Component.scss在同一个文件夹，你尝试这样做：

import Component from ./Component

Webpack显然很混乱，至少在我的情况下，当我真的想要.jsx文件时，尝试导入scss文件。

我能够通过重命名.scss文件并避免歧义来修复它。我也可以显式导入Component.jsx

在我的情况下，我只是在子模块之一中的导入延迟时缺少分号。

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

import Splash from './Splash'

对此：

import Splash from './Splash';

就我而言，我使用的是默认导出，但不导出functionor或React.Component，而只是导出一个JSX元素，即

错误：

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

作品：

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

除了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() 文档。

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

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

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

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

而且有效。（请避免在组件周围使用大括号）

对我来说，我的样式化组件是在功能组件定义之后定义的。这只是在舞台上发生，而不是在我本地发生。将样式化的组件移到组件定义上方后，错误消失了。

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

我有一个类似的问题，我做到了

import { Image } from './Shared'

但是当我查看共享文件时，我没有一个“图像”组件，而是一个“ ItemImage”组件

import { ItemImage } from './Shared';

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

我遇到了一个问题React.Fragment，因为我的react版本是< 16.2，所以我摆脱了它。

@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';

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

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

它为我解决了这个问题。

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

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

例如：

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>
  );
}

我收到几乎相同的错误：

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

我试图从团队开发的另一个节点库中导入纯功能组件。要解决此问题，我必须从更改为绝对导入（引用中的组件的路径node_modules）

从'team-ui'导入FooBarList;

至

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

就我而言，它最终是像这样导入的外部组件：

import React, { Component } from 'react';

然后声明为：

export default class MyOuterComponent extends Component {

内部组件导入了React裸露的位置：

import React from 'react';

并点入其中以进行声明：

export default class MyInnerComponent extends ReactComponent {

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

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;