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

我得到这个错误：

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;
839154 次浏览
小开

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

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

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>


)
}
小开

你刚刚模块化了你的任何React组件吗？如果是，如果你忘记指定module.exports，你会得到这个错误，例如：

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

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

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

module.exports = React.createClass({
render: function() { ...
小开
最佳答案

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

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

vs

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

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

小开

在我的情况下，这是由错误的评论符号引起的。这是错误的：

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

这是正确的：

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

注意那些花括号

小开

在我的例子中，由于库，导入是隐式发生的。

我设法通过改变来修复它

export class Foo

来

export default class Foo。

小开

我遇到了同样的问题，当Webpack编译我的测试时，应用程序运行得很好。当我将我的组件导入测试文件时，我在其中一个导入上使用了错误的大小写，这导致了同样的错误。

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

本该如此

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

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

小开

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

import { Link } from 'react-router'

相反，它可能是更好地使用 

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

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

小开

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

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

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

小开

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

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

而不是 

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

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

小开

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

小开

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

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

import Component from ./Component

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

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

小开

我遇到了同样的问题，并意识到我在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']

小开

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

小开

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

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

import App from './app'

和

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

（后者解决了这个问题）。我花了几个小时才发现这个奇怪的、难以注意到的细微差别：（

小开

在我的例子中，我只是在我的一个子模块的导入解密中缺少一个分号。

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

import Splash from './Splash'

对此：

import Splash from './Splash';
小开

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

小开

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

我使用路由器回放 v4，但她很糟糕… npm安装后react-router-redux@next 我在请求示例：响应示例："react-router-redux"："^5.0.0-alpha.9"，

而且是工作

小开

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

对我来说，警告是

warning.js:33警告：React.create元素：type无效--需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但是得到了：未定义。您可能忘记从定义组件的文件中导出组件。请在index.js:13检查您的代码。

接着是错误

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

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

我在index.js.有以下线路

<ConnectedRouter history={history}>

当我用关键词"已连接的路由器"搜索上述错误时，我在GitHub页面中找到了解决方案。

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

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

npm install react-router-redux@next

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

谢谢。

PS：即使是警告也能帮到你。不要只看错误就忽略了警告。

小开

在我的例子中，我使用默认导出，但不导出function或React.Component，而只是JSX元素，即React.Component。

错误：

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

作品：

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

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

我也遇到过类似的问题

import { Image } from './Shared'

但是当我查看共享文件时，我没有'Image'组件，而是'ItemImage'组件

import { ItemImage } from './Shared';

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

小开

@Balasubramani M在这里救了我。想再添加一个来帮助人们。当你把太多的东西粘在一起并且对版本漫不经心时，这就是问题所在。我更新了一个材料版本-用户界面，需要更改

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有关。

例如：

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.create元素：类型无效——期望一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：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>
);
}
小开

我几乎犯了同样的错误：

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

我试图从我的团队开发的另一个节点库导入一个纯函数组件。为了解决这个问题，我不得不从node_modules中更改为绝对导入（引用组件的路径）

从“团队-用户界面”导入FoBarList；

来

从'team-用户界面/lib/组件/foo-bar-list/FoBarList'导入FoBarList；

小开

在我的例子中，它最终是像这样导入的外部组件：

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;
小开

我得到这个错误，而升级所有库到最新版本

在旧版本中，以下是导入

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

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

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

所以检查正确所有您的导入是可用的通过使用控制点击

小开

鉴于您的错误：

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

你有两个选择：

  1. 您的导出文件可以包含单词default，如
export default class someNameHere

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

import somethingHere from someWhereHere
  1. 避免使用默认单词。然后您的导出看起来像
export class someNameHere

然后您的导入必须使用{}。喜欢

import {somethingHere} from someWhereHere
小开

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

我在用 

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

我想MetaTags是默认导出，所以更改为这个解决了我的问题，花了几个小时才弄清楚是哪个导致了它。

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

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

小开

在文件底部导出可能会解决这个问题。

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

我得到了这个错误的反应路由，问题是我使用

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

但它是错误的路由需要组件作为类/函数，所以我把它改为

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

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

小开

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

变化 

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

来

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

为我解决了这个问题。

小开

我是同样的问题，因为我没有导入不正确的库，所以我检查了从库的留档和路由改变了新的版本，解决方案是这样的：

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

我用错误的方式写：

import {Ionicons} from 'expo';
小开

我错误地尝试从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';
小开

在我的例子中，我写了const Tab = createBottomTabNavigator而不是const Tab = createBottomTabNavigator()

小开

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

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

小开

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

export default Component();

而不是像这样…

export default Component;

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

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

小开

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

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';
...
小开

您是否厌倦了嵌套组件时天真的导入/导出答案？

好吧，我也一直在尝试将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>
);
}

（是的，这是一个方便的方式来传递组件的父->子，特别是当他们长大，但在这里它打破），但它会导致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有一个必需的prop，其名称为title。

小开

错误？它绝对是一个导入或导出问题，你是reffering到一个组件或容器，要么你没有从它的定义脚本导出，或者在导入它时你使用了错误的格式。

解决方案？

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

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

AppRegistry.registerComponent(appName, App );

对于这个代码：

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

在类似的情况下，我遇到了同样严重的错误，我专注于代码，但上面的任何内容似乎都没有改善这种情况。我正在从JavaScript转移到TypeScript，但由于某种奇怪的原因，我同时拥有两个文件。删除JS版本解决了这个问题，这可能会节省一些人的时间。

小开

在我的情况下，

//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}
小开

对我来说，它是app config 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)
小开

确保你只返回一个父母的孩子

这会管用的

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

这样不行的

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

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

我有一个函数返回一个名为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

见下图：

输入图片描述

小开

问题可能是使用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>
);
};

提交答案