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

Question

我收到此错误：

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;

Answer 1

在我的情况下（使用 Webpack），这是以下之间的区别：

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

对比

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

第二个有效，而第一个导致错误。或者相反。

Answer 2

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

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

Answer 3

你刚刚模块化了你的任何 React 组件吗？如果是，如果您忘记指定module.exports，您将收到此错误，例如：

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

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

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

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

Answer 4

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

import { Link } from 'react-router'

相反，最好使用

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

我相信这是对 react 路由器版本 4 的要求

Answer 5

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

就我而言，警告是

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：即使是警告也能帮助你。不要只看错误就忽略警告。

Answer 6

在我的情况下，导出的子模块之一没有返回正确的反应组件。

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

代替

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

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

Answer 7

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 语法链接 use( 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>

  )
}

Answer 8

鉴于您的错误：

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

然后您的导入将需要避免使用{}它。如在

import somethingHere from someWhereHere

2. 避免使用默认词。然后你的出口看起来像

export class someNameHere

那么你的导入必须使用{}. 喜欢

import {somethingHere} from someWhereHere

Answer 9

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

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

这是对的：

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

注意大括号

Answer 10

我有同样的错误： 错误修复！！！！

我使用'react-router-redux' v4 但她很糟糕.. npm install react-router-redux@next 之后 我在 "react-router-redux": "^5.0.0-alpha.9",

它的工作

Answer 11

我遇到了同样的问题，并意识到我在 JSX 标记中提供了一个未定义的 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']

Answer 12

我通过import App from './app/';期望它来得到这个./app/index.js，但它却被导入了./app.json。

Answer 13

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

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

本来应该

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

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

Answer 14

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

对我来说，这是一个区别：

import App from './app'

和

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

（后者解决了这个问题）。我花了几个小时来捕捉这个奇怪的、难以注意到的细微差别:(

Answer 15

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

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

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

Answer 16

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

我设法通过更改来修复它

export class Foo

至

export default class Foo.

Answer 17

我在反应路由中遇到了这个错误，问题是我正在使用

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

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

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

它奏效了。（只需避免组件周围的大括号）

Answer 18

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

因此，例如，如果您有Component.jsx和Component.scss在同一个文件夹中，并且您尝试这样做：

import Component from ./Component

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

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

Answer 19

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

错误：

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

作品：

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

Answer 20

在我的情况下，我只是在我的一个子模块中的导入声明中缺少一个分号。

通过更改它来修复它：

import Splash from './Splash'

对此：

import Splash from './Splash';

Answer 21

我也收到了这个错误。该错误是由尝试导出这样的组件引起的......

export default Component();

而不是这样...

export default Component;

我的理解是，通过在组件末尾添加“（）”，我实际上是在调用该函数，而不仅仅是引用它。

我在上面的答案中没有看到这一点，但可能错过了。我希望它可以帮助某人并节省一些时间。我花了很长时间才查明这个错误的根源！

Answer 22

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

Answer 23

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

改变

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

至

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

为我解决了这个问题。

Answer 24

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

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

我写的方式不正确：

import {Ionicons} from 'expo';

Answer 25

只想为这个问题添加一个案例。我通过交换导入顺序来解决这个问题，例如在我之前的混合导入中：

import { Label } from 'components/forms/label';
import Loader from 'components/loader/loader';
...
import Select from 'components/select/select'; // <----- the error happen

更改后：

import Select from 'components/select/select'; // <----- Fixed
import { Label } from 'components/forms/label';
import Loader from 'components/loader/loader';
...

Answer 26

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

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

Answer 27

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

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

import { Image } from './Shared'

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

import { ItemImage } from './Shared';

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

Answer 28

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

Answer 29

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

Answer 30

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

import React, { Component } from 'react';

然后声明如下：

export default class MyOuterComponent extends Component {

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

import React from 'react';

并点缀其中进行声明：

export default class MyInnerComponent extends ReactComponent {

Answer 31

Are you tired of naive import/export answers while you're nesting components?

Well, I've been, too, when trying to pass in props from parent to child, and the child was supposed to render sibling component.

Let say, you have a BaseDialog (parent) component, in which you want to have another component SettingsDialog (child) in which you want to render its independent component.

BaseDialog.tsx

import BaseButton from "./../BaseButton";
...
<SettingsDialog
  BaseButton={<BaseButton title="Connect Wallet" />}
/>

and you're trying to render in somewhere in Settings.Dialog.tsx the

const SettingsDialog = (props: {
  BaseButton: any;
}) => {
  const { BaseButton } = props;

  return(
    <div>
      {BaseButton}
    </div>
  );
}

(yes, it's a handy way to pass components parent->child, especially when they grow, but here it breaks), but it'll cause the Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object error.

What you can do, to fix it, and still use the BaseButton, is to simply import it separately.

Settings.Dialog.tsx

import BaseButton from "./../BaseButton";

const SettingsDialog = () => {
  return(
    <div>
      <BaseButton title="Connect Wallet" />
    </div>
  );
}

and in parent simply

BaseDialog.tsx

<SettingsDialog />

What you're trying to achieve will be the same, and will fix this unintuitive, in this scenario, error.

In my examples, I've assumed that BaseDialog has a required prop with a name title.

Answer 32

从“react-router-dom”导入不带花括号“{}”的“Link”并使用如下所示时，我遇到了同样的错误："<Link></Link>"

import Link from 'react-router-dom';

const Hello = () => {
  return (
    <Link to='/hello'>Hello</Link>      
  );
};

export default Hello;

所以，我用花括号“{}”导入了“链接”，然后错误就解决了：

// "{}" are put for "Link"
import { Link } from 'react-router-dom';

const Hello = () => {
  return (
    <Link to='/hello'>Hello</Link>      
  );
};

export default Hello;

Answer 33

我遇到了几乎相同的错误：

Uncaught (in promise) 错误：元素类型无效：期望字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。

我试图从我的团队开发的另一个节点库中导入纯功能组件。为了解决这个问题，我不得不node_modules从

从'team-ui'导入FooBarList；

至

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

Answer 34

错误？这绝对是一个导入或导出问题，您引用的组件或容器要么没有从其定义脚本中导出，要么在导入时您使用了错误的格式。

解决方案？

1. 浏览所有组件/容器定义并确保已在脚本末尾导出它们，即“export default 'yourcomponentname';” 或在组件定义的开头，即 export const 'yourcomponentname'=() =>{ ....... }
2. 在您的导入语句中，确保您没有根据相应的导出语句混淆命名导入和默认导入

Answer 35

就我而言，我写const Tab = createBottomTabNavigator的是const Tab = createBottomTabNavigator()

Answer 36

在文件底部导出可能会解决它。

const IndicatorCloak = (props) => { ... }
export default IndicatorCloak;

Answer 37

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

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

它为我解决了这个问题。

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

Answer 38

我错误地尝试从 react-native 而不是 native-base 导入容器和内容。

由于此行而出错：

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

Answer 39

就我而言，我花了很多时间来搜索和检查可能的方法，但只能通过这种方式修复：导入自定义组件时删除“{”、“}”：

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;

Answer 40

我发现了这个错误的另一个原因。它与 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 而不是空值来修复它。

例如：

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

Answer 41

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

Answer 42

就我而言，它是元标记。

我正在使用

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

我猜 MetaTags 是一个默认导出，所以更改为这个解决了我，花了几个小时来弄清楚是哪个导致它。

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

Answer 43

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

在旧版本中，以下是导入

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

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

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

因此，请使用控制单击检查所有导入是否可用