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

在我的情况下（使用 Webpack），它的区别在于：

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

对比

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

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

---

你需要 export default 或 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'

相反，最好使用

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

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

---

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

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

代替

const Component = () => <div>Content</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：即使是警告也能帮助你。不要只看错误就忽略警告。

---

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>

  )
}

---

鉴于您的错误：

'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

---

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

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

这是对的：

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

注意大括号

---

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

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

它的工作

---

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

错误说明：

不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义它的文件中导出组件。检查 C. 的渲染方法，

产生此错误的示例：

var componentA = require('./components/A'); var componentB = require('./components/B');常量模板 = { a_type: componentA, b_type: componentB } class C extends React.Component { constructor(props) { super(props); } // ... render() { //假设根据数据字段中的 uiType，您最终会渲染组件 A 或 B（作为 C 的一部分） const ComponentTemplate = templates[this.props.数据.uiType];返回 } // ... }

问题是提供了无效的“uiType”，因此产生了未定义的结果：

模板['无效字符串']

---

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

---

就像对此的快速补充一样。我遇到了同样的问题，而 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 处于测试阶段，npm 返回 4.x，但不返回 5.x。但 @types/react-router-redux 返回 5.x。所以使用了未定义的变量。

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

---

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

我设法通过更改来修复它

export class Foo

至

export default class Foo。

---

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

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

import Component from ./Component

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

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

---

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

错误：

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

作品：

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

---

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

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

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

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

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

---

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

通过更改它来修复它：

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。

---

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

export default Component();

而不是这样...

export default Component;

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

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

---

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

改变

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

---

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

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

---

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

---

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

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

import { Image } from './Shared'

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

import { ItemImage } from './Shared';

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

---

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

---

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

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

---

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

解决方案？

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

---