Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
我收到这个错误：
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;
你需要 export default 或 require(path).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 语法 link 使用（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，你会得到这个错误，例如：
non-modularized 以前有效 component/code:
var YourReactComponent = React.createClass({
render: function() { ...
模块化 component/code 与 module.exports:
module.exports = React.createClass({
render: function() { ...
在我的例子中（使用 Webpack），区别在于：
import {MyComponent} from '../components/xyz.js';
对
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 文件中的导出名称。
如果您遇到此错误，可能是因为您正在使用
导入 link
import { Link } from 'react-router'
相反，使用
可能会更好
import { Link } from 'react-router-dom'
^--------------^
我相信这是 React 路由器版本 4 的要求
另一种可能的解决方案，对我有用：
目前，react-router-redux 处于 beta 和 npm returns 4.x，但不是 5.x。但是 @types/react-router-redux 返回了 5.x。所以使用了未定义的变量。
强制 NPM/Yarn 使用 5.x 为我解决了这个问题。
就我而言，其中一个导出的子模块没有返回正确的 React 组件。
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 标记中提供了一个 Undefined React 组件。问题是要渲染的反应组件是动态计算的，最终未定义！
错误陈述：
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of 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']
对我来说，我的 styled-components 是在我的功能组件定义之后定义的。这只发生在舞台上，而不是在我本地。一旦我将我的样式化组件移动到我的组件定义上方，错误就消失了。
React Native 最新版本 0.50 及更高版本存在类似问题。
对我来说，区别在于：
import App from './app'
和
import App from './app/index.js'
（后者解决了这个问题）。我花了几个小时才发现这个奇怪的、很难注意到的细微差别:(
在我的例子中，我只是在我的一个子模块中的 import-decleration 处缺少一个分号。
通过更改此修复它：
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() docs。
我有同样的错误：
错误修复 !!!!
我用的是'react-router-redux' v4 但是她很烂..
npm 安装后 react-router-redux@next
我在 "react-router-redux": "^5.0.0-alpha.9",
成功了
不要对单个问题的答案列表感到惊讶。这个问题有多种原因；
对于我的情况，警告是
warning.js:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check your code at index.js:13.
后面报错
invariant.js:42 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
我无法理解这个错误，因为它没有提到任何方法或文件名。看到上面提到的这个警告，我才能够解决。
我在 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：甚至警告对你有帮助。不要忽视 warning 只看 error。
在我的例子中，我使用的是默认导出，但不导出 function 或 React.Component，而只是导出 JSX 元素，即
错误：
export default (<div>Hello World!</div>)
作品：
export default () => (<div>Hello World!</div>)
这意味着您的某些导入组件声明错误或不存在
我遇到了类似的问题，我遇到了
import { Image } from './Shared'
但是当我查看共享文件时，我没有 'Image' 组件而是 'ItemImage' 组件
import { ItemImage } from './Shared';
当您从其他项目复制代码时会发生这种情况 ;)
@Balasubramani M 在这里救了我。想再添加一个来帮助人们。当你 gluing 太多的东西在一起并且对版本漫不经心时，这就是问题所在。我更新了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 return 向 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>
);
}
我会收到此警告：
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: null.
后面出现这个错误：
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: null.
我发现这是因为我试图渲染的 CSS-in-JS 组件没有 CSS。我通过确保 CSS 被 returned 而不是空值来修复它。
例如：
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>
);
}
我遇到了几乎相同的错误：
Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
我试图从我的团队开发的另一个节点库中导入一个纯功能组件。要修复它，我必须从
更改为绝对导入（引用 node_modules 内组件的路径）
import FooBarList from 'team-ui';
到
import FooBarList from 'team-ui/lib/components/foo-bar-list/FooBarList';
在我的例子中，它最终是像这样导入的外部组件：
import React, { Component } from 'react';
然后声明如下：
export default class MyOuterComponent extends Component {
其中一个内部组件导入了 React bare：
import React from 'react';
并点入其中声明：
export default class MyInnerComponent extends ReactComponent {
就我而言，我花了很多时间来搜索和检查可能的方法，但只能通过这种方式修复：导入自定义组件时删除“{”、“}”：
import OrderDetail from './orderDetail';
我的错误方法是：
import { OrderDetail } from './orderDetail';
因为在orderDetail.js文件中，我默认导出了OrderDetail class:
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'
您有 2 个选择：
- 您的导出文件可以包含单词
default，如
export default class someNameHere
那么您的导入需要避免在其周围使用 {}。如
import somethingHere from someWhereHere
- 避免使用默认词。然后你的出口看起来像
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 />
但是错误的路线需要组件作为 class/function 所以我将其更改为
<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()
我也遇到了这个问题。我的进口看起来不错，我可以复制我的副本的内容并将其粘贴到正在使用的地方并且有效。但这是对出错的组件的引用。
对我来说，我只需要关闭 expo 然后重新启动它。
我也遇到了这个错误。错误是由于尝试导出这样的组件引起的...
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';
...
嵌套组件时，您是否厌倦了天真的 import/export 答案？
好吧，我也曾尝试将 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。
错误？ 这绝对是一个导入或导出问题，您正在引用一个组件或容器，您没有从它的定义脚本中导出，或者在导入时您有使用了错误的格式。
解决方案?
- 检查所有 component/container 定义并确保在脚本末尾导出它们，即“导出默认值 'yourcomponentname';”或者在组件定义的开头，即
导出常量 'yourcomponentname'=() =>{
…………
}
- 在您的导入语句中，请确保您没有混淆基于相应导出语句的命名导入和默认导入
当我更改此代码时错误已修复
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}
对我来说，它是应用程序配置的名称 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)
我收到这个错误：
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;
你需要 export default 或 require(path).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 语法 link 使用（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，你会得到这个错误，例如：
non-modularized 以前有效 component/code:
var YourReactComponent = React.createClass({
render: function() { ...
模块化 component/code 与 module.exports:
module.exports = React.createClass({
render: function() { ...
在我的例子中（使用 Webpack），区别在于：
import {MyComponent} from '../components/xyz.js';
对
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 文件中的导出名称。
如果您遇到此错误，可能是因为您正在使用
导入 linkimport { Link } from 'react-router'
相反，使用
可能会更好
import { Link } from 'react-router-dom'
^--------------^
我相信这是 React 路由器版本 4 的要求
另一种可能的解决方案，对我有用：
目前，react-router-redux 处于 beta 和 npm returns 4.x，但不是 5.x。但是 @types/react-router-redux 返回了 5.x。所以使用了未定义的变量。
强制 NPM/Yarn 使用 5.x 为我解决了这个问题。
就我而言，其中一个导出的子模块没有返回正确的 React 组件。
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 标记中提供了一个 Undefined React 组件。问题是要渲染的反应组件是动态计算的，最终未定义！
错误陈述：
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of
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']
对我来说，我的 styled-components 是在我的功能组件定义之后定义的。这只发生在舞台上，而不是在我本地。一旦我将我的样式化组件移动到我的组件定义上方，错误就消失了。
React Native 最新版本 0.50 及更高版本存在类似问题。
对我来说，区别在于：
import App from './app'
和
import App from './app/index.js'
（后者解决了这个问题）。我花了几个小时才发现这个奇怪的、很难注意到的细微差别:(
在我的例子中，我只是在我的一个子模块中的 import-decleration 处缺少一个分号。
通过更改此修复它：
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() docs。
我有同样的错误： 错误修复 !!!!
我用的是'react-router-redux' v4 但是她很烂.. npm 安装后 react-router-redux@next 我在 "react-router-redux": "^5.0.0-alpha.9",
成功了
不要对单个问题的答案列表感到惊讶。这个问题有多种原因；
对于我的情况，警告是
warning.js:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check your code at index.js:13.
后面报错
invariant.js:42 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
我无法理解这个错误，因为它没有提到任何方法或文件名。看到上面提到的这个警告，我才能够解决。
我在 index.js 处有以下行。
<ConnectedRouter history={history}>
当我使用关键字 "ConnectedRouter" 搜索上述错误时，我在 GitHub 页面中找到了解决方案。
错误是因为，当我们安装react-router-redux包时，我们默认安装了这个。
https://github.com/reactjs/react-router-redux 但不是实际的库。
要解决此错误，请通过 @
npm install react-router-redux@next
您不需要删除错误安装的包。它将被自动覆盖。
谢谢。
PS：甚至警告对你有帮助。不要忽视 warning 只看 error。
在我的例子中，我使用的是默认导出，但不导出 function 或 React.Component，而只是导出 JSX 元素，即
错误：
export default (<div>Hello World!</div>)
作品：
export default () => (<div>Hello World!</div>)
这意味着您的某些导入组件声明错误或不存在
我遇到了类似的问题，我遇到了
import { Image } from './Shared'
但是当我查看共享文件时，我没有 'Image' 组件而是 'ItemImage' 组件
import { ItemImage } from './Shared';
当您从其他项目复制代码时会发生这种情况 ;)
@Balasubramani M 在这里救了我。想再添加一个来帮助人们。当你 gluing 太多的东西在一起并且对版本漫不经心时，这就是问题所在。我更新了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 return 向 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>
);
}
我会收到此警告：
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: null.
后面出现这个错误：
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: null.
我发现这是因为我试图渲染的 CSS-in-JS 组件没有 CSS。我通过确保 CSS 被 returned 而不是空值来修复它。
例如：
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>
);
}
我遇到了几乎相同的错误：
Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
我试图从我的团队开发的另一个节点库中导入一个纯功能组件。要修复它，我必须从
更改为绝对导入（引用node_modules 内组件的路径）
import FooBarList from 'team-ui';
到
import FooBarList from 'team-ui/lib/components/foo-bar-list/FooBarList';
在我的例子中，它最终是像这样导入的外部组件：
import React, { Component } from 'react';
然后声明如下：
export default class MyOuterComponent extends Component {
其中一个内部组件导入了 React bare：
import React from 'react';
并点入其中声明：
export default class MyInnerComponent extends ReactComponent {
就我而言，我花了很多时间来搜索和检查可能的方法，但只能通过这种方式修复：导入自定义组件时删除“{”、“}”：
import OrderDetail from './orderDetail';
我的错误方法是：
import { OrderDetail } from './orderDetail';
因为在orderDetail.js文件中，我默认导出了OrderDetail class:
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'
您有 2 个选择：
- 您的导出文件可以包含单词
default，如
export default class someNameHere
那么您的导入需要避免在其周围使用 {}。如
import somethingHere from someWhereHere
- 避免使用默认词。然后你的出口看起来像
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 />
但是错误的路线需要组件作为 class/function 所以我将其更改为
<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()
我也遇到了这个问题。我的进口看起来不错，我可以复制我的副本的内容并将其粘贴到正在使用的地方并且有效。但这是对出错的组件的引用。
对我来说，我只需要关闭 expo 然后重新启动它。
我也遇到了这个错误。错误是由于尝试导出这样的组件引起的...
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';
...
嵌套组件时，您是否厌倦了天真的 import/export 答案？
好吧，我也曾尝试将 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。
错误？ 这绝对是一个导入或导出问题，您正在引用一个组件或容器，您没有从它的定义脚本中导出，或者在导入时您有使用了错误的格式。
解决方案?
- 检查所有 component/container 定义并确保在脚本末尾导出它们，即“导出默认值 'yourcomponentname';”或者在组件定义的开头，即 导出常量 'yourcomponentname'=() =>{ ………… }
- 在您的导入语句中，请确保您没有混淆基于相应导出语句的命名导入和默认导入
当我更改此代码时错误已修复
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}
对我来说，它是应用程序配置的名称 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)