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

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'

相反，最好使用

import { Link } from 'react-router-dom'
                      ^--------------^

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

Answer 5

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

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

代替

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

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

Answer 6

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

就我而言，警告是

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 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 语法链接使用（ import ），使用babel作为助手。

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

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

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

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

import Component from ./Component

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

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

Answer 18

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

错误：

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

作品：

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

Answer 19

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

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

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

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

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

Answer 20

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

通过更改它来修复它：

import Splash from './Splash'

对此：

import Splash from './Splash';

Answer 21

除了提到的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 22

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

export default Component();

而不是这样...

export default Component;

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

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

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

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

Answer 27

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

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

import { Image } from './Shared'

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

import { ItemImage } from './Shared';

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

Answer 28

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

Answer 29

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

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

Answer 30

当我更改此代码时，错误已修复

AppRegistry.registerComponent(appName, App );

到这个代码：

AppRegistry.registerComponent(appName, () => App);

Answer 31

在类似的情况下，我遇到了同样令人讨厌的错误，我专注于代码，但上面似乎没有改善这种情况。 我正在从 Javascript 转移到 Typescript，但由于某种奇怪的原因，我同时拥有两个文件。 删除 JS 版本解决了它，这可能会节省一些人的时间。

Answer 32

@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 33

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

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

它为我解决了这个问题。

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

Answer 34

我发现了这个错误的另一个原因。 它与 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 35

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

未捕获（承诺中）错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：对象。

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

从'team-ui'导入FooBarList；

至

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

Answer 36

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

import React, { Component } from 'react';

然后声明如下：

export default class MyOuterComponent extends Component {

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

import React from 'react';

并点缀其中进行声明：

export default class MyInnerComponent extends ReactComponent {

Answer 37

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

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 38

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

在旧版本中，以下是导入

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

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

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

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

Answer 39

就我而言，它是元标记。

我正在使用

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

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

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

Answer 40

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

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

Answer 41

我错误地尝试从 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 42

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

Answer 43

在嵌套组件时，您是否厌倦了幼稚的导入/导出答案？

好吧，当我尝试将props从parent传递给child时，我也一直在尝试，并且child应该渲染sibling组件。

假设您有一个BaseDialog （父）组件，您希望在其中拥有另一个组件SettingsDialog （子），您希望在其中呈现其独立组件。

BaseDialog.tsx

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

你正试图在Settings.Dialog.tsx的某个地方渲染

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

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

（是的，这是传递组件 parent->child 的便捷方法，尤其是当它们增长时，但在这里它会中断），但它会导致Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object错误。

您可以做的是修复它并仍然使用BaseButton ，只需单独导入它。

Settings.Dialog.tsx

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

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

并且在parent中

BaseDialog.tsx

<SettingsDialog />

您要实现的目标将是相同的，并且将解决这个不直观的错误，在这种情况下。

在我的示例中，我假设BaseDialog有一个名为title的必需prop 。

Answer 44

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

解决方案？

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

Answer 45

就我而言，

//details.js 
import React from 'react'

const Details = (props) =>{
return <h1>Details</h1>
}

export default Details;


//main.js
import React from "react";
import { withRouter } from "react-router";
import {Route,BrowserRouter as Router,Redirect,Switch,Link} from "react-router-dom";
import Details from "./myAccount/details";

const Main = (props) => {
 return (
   <>
        <Switch>
          <Route path="/my-account/details" component={<Details />} />
        </Switch>
   </>

 );
};

export default withRouter(Main);

============================

Replaced with below one, error got fixed
component={<Details />}  with  component={Details} 

Answer 46

对我来说，这是应用配置 json 的名称。 在 index.js 中，导入是这样的：

import { AppRegistry } from 'react-native'
import App from './app'
import { name as appName } from './app.json'

AppRegistry.registerComponent(appName, () => App)

React Native 不区分 './app' 和 './app.json'。 不知道为什么。 因此，我将 app.json 的名称更改为 app.config.json，这样就解决了问题：

import { AppRegistry } from 'react-native'
import App from './app'
import { name as appName } from './app.config.json'

AppRegistry.registerComponent(appName, () => App)

Answer 47

确保您只归还一名亲子

这将起作用

<div>
    <p> Something here </p>
</div>

这行不通

<div>
    <p> Something here </p>
</div>
<div>
    <p> Something else here </p>
</div>

Answer 48

我不相信我的情况和补救措施在这里讨论，所以我会补充。

我有一个 function 返回一个 object 调用notification

import IconProgress from '../assets/svg/IconProgress';

  const getNotificationFromAttachment = (attachment) => {
    const notification = {
    Icon: IconProcessing,
    iconProps: {},
  };
  
  ...
  notification.Icon = {IconProgress};
  
  return notification
}

React 期望一个 String 或 Class/Function 作为变量notification.Icon的值

所以你需要做的就是将{IconProgress}更改为IconProgress

见下图：

Answer 49

问题可能在于使用 SVG 作为组件。

import { ReactComponent as HeaderLogo } from "../../assets/logoHeader.svg";
    
    const Header = () => {
        return (
            <div>
                <HeaderLogo />
            </div>
        );
    };

您可以这样显示图像：

import HeaderLogo from "../../assets/logoHeader.svg";

const Header = () => {
    return (
        <div>
            <img src={HeaderLogo} alt="React Logo" />
        </div>
    );
};

Answer 50

对我来说，这是因为我的组件由于某种原因没有使用*符号导出，所以我不得不明确地命名导出

// index.ts
export * from "./Button"

到

// index.ts
export { Button } from "./Button"