I am getting this error:

我收到以下错误：

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.

This is my code:

这是我的代码：

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)

My Home.jsx file:

我的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;

In my case (using Webpack) it was the difference between:

在我的例子中(使用webpack)，这是不同的：

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

vs

VS

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

The second one works while the first is causing the error. Or the opposite.

当第一个导致错误时，第二个正常工作。或者正好相反。

you need export default or require(path).default

您需要导出Default或Required(路径)。默认

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

Have you just modularized any of your React components? If yes, you will get this error if you forgot to specify module.exports, for example:

您是否刚刚模块化了任何您的Reaction组件？如果是，则在忘记指定模块时会出现此错误。例如：

non-modularized previously valid component/code:

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

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

modularized component/code with module.exports:

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

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

In my case, one of the exported child module was not returning a proper react component.

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

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

instead of

而不是

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

The error shown was for the parent, hence couldn't figure out.

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

If you get this error, it might be because you're importing link using

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

import { Link } from 'react-router'

从‘Reaction-Router’导入{Link}

instead, it might be better to use

相反，它可能更好地使用

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

I believe this is a requirement for the react router version 4

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

Given your error of:

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

‘未捕获的错误：不变违规：元素类型无效：应为字符串(对于内置组件)或类/函数，但已获取：Object’

You have 2 options:

1. Your export file can have the word default as in

export default class someNameHere

Then your import will need to avoid using {} around it. As in

则您的导入将需要避免在其周围使用{}。如中所示

import somethingHere from someWhereHere

2. Avoid using the default word. Then your export looks like

export class someNameHere

Then your import must use the {}. Like

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

import {somethingHere} from someWhereHere

Don't get surprised by the list of answers for a single question. There are various causes for this issue;

不要对一个问题的答案清单感到惊讶。造成这一问题的原因是多方面的;

For my case, the warning was

对我来说，警告是

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.

Followed by the error

然后是错误

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.

I couldn't understand the error since it doesn't mention any method or file name. I was able to resolve only after looking at this warning, mentioned above.

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

I have the following line at the index.js.

我在index.js上有以下代码行。

<ConnectedRouter history={history}>

When I googled for the above error with the keyword "ConnectedRouter" I found the solution in a GitHub page.

当我用关键字“ConnectedRouter”搜索上面的错误时，我在GitHub页面中找到了解决方案。

The error is because, when we install react-router-redux package, by default we install this one.
https://github.com/reactjs/react-router-redux but not the actual library.

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

To resolve this error, install the proper package by specifing the npm scope with @

要解决此错误，请使用@指定NPM作用域来安装正确的程序包

npm install react-router-redux@next

You don't need to remove the wrongly installed package. It will be automatically overwritten.

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

Thank you.

谢谢。

PS: Even warning helps you. Don't neglect warning just looking at the error alone.

PS：即使是警告也对你有帮助。不要只看错误就忽视警告。

https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4
Router is also one of the properties of react-router.
So change your modules require code like that:

Https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4路由器也是Reaction-Router的属性之一。因此，更改您的模块需要这样的代码：

  var reactRouter = require('react-router')
  var Router = reactRouter.Router
  var Route = reactRouter.Route
  var Link = reactRouter.Link

If you want to use ES6 syntax the link use(import), use babel as helper.

如果你想使用ES6语法的链接使用(导入)，使用巴别塔作为帮助器。

BTW, to make your code works, we can add {this.props.children} in the App,
like

顺便说一句，为了让你的代码正常工作，我们可以在应用程序中添加{this.pros.Child}，比如

render() {
  return (
    <div>
      <h1>App</h1>
      <ul>
        <li><Link to="/about">About</Link></li>
      </ul>
      {this.props.children}
    </div>

  )
}

In my case, that was caused by wrong comment symbols. This is wrong:

在我的例子中，这是由错误的注释符号引起的。这是错误的：

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

This is correct:

这是正确的：

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

Notice the curly brackets

请注意花括号

I have the same error :
ERROR FIX !!!!

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

I use 'react-router-redux' v4 but she's bad..
After npm install react-router-redux@next
I'm on "react-router-redux": "^5.0.0-alpha.9",

我用的是‘REACTION-RUTER-REDUX’v4，但她很糟糕..NPM安装REACT-ROUTER-REDUX@NEXT后，我在“REACT-ROUTER-REDUX”上：“^5.0.0-alpha.9”，

AND IT'S WORK

这是它的工作

I got this by doing import App from './app/'; expecting it to import ./app/index.js, but it instead imported ./app.json.

我通过从‘./app/’导入App获得了这一点；期望它导入./app/index.js，但它却导入了./app.json。

I was having the same issue and realized that I was providing an Undefined React component in the JSX markup. The thing is that the react component to render was dynamically calculated and it ended up being undefined!

我遇到了同样的问题，并且意识到我在JSX标记中提供了一个未定义的Reaction组件。问题是，要呈现的Reaction组件是动态计算的，最终是未定义的！

The error stated:

该错误声明：

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.,

The example producing this error:

产生此错误的示例：

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>
  }
  
  // ...
}

The problem was that an invalid "uiType" was provided and therefore this was producing undefined as result:

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

templates['InvalidString']

Just as a quick addition to this. I was having the same problem and while Webpack was compiling my tests and the application was running fine. When I was importing my component into the test file I was using the incorrect case on one of the imports and that was causing the same error.

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

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

Should have been

本应该是

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

Note that the import name myComponent depends on the name of the export inside the MyComponent file.

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

Had similar issue with React Native latest versions 0.50 and up.

在Reaction Native最新版本0.50和更高版本中有类似的问题。

For me it was a difference between:

对我来说，这是不同的：

import App from './app'

and

和

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

(the latter fixed the issue). Took me hours to catch this weird, hard to notice nuance :(

(后者解决了这个问题)。我花了几个小时才注意到这个奇怪的、很难注意到的细微差别：

In my case I was using the default export, but not exporting a function or React.Component, but just a JSX element, i.e.

在我的例子中，我使用的是缺省导出，但不是导出函数或React.Component，而是只导出JSX元素。

Error:

错误：

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

Works :

作品：

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

Another possible solution, that worked for me:

另一个可能的解决方案，对我很管用：

Currently, react-router-redux is in beta and npm returns 4.x, but not 5.x. But the @types/react-router-redux returned 5.x. So there were undefined variables used.

目前，REACT-ROUTER-REDUX处于测试版，NPM返回4.x，而不是5.x。但@TYPE/REACT-ROUTER-REDUX返回5.x。所以使用了未定义的变量。

Forcing NPM/Yarn to use 5.x solved it for me.

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

I ran into this error when I had a .jsx and .scss file in the same directory with the same root name.

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

So, for example, if you have Component.jsx and Component.scss in the same folder and you try to do this:

例如，如果您将Component.jsx和Component.scss放在同一文件夹中，并尝试执行以下操作：

import Component from ./Component

从./Component导入组件

Webpack apparently gets confused and, at least in my case, tries to import the scss file when I really want the .jsx file.

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

I was able to fix it by renaming the .scss file and avoiding the ambiguity. I could have also explicitly imported Component.jsx

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

In my case, the import was happening implicitly due to a library.

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

I managed to fix it by changing

我设法通过改变来修复它

export class Foo

导出类Foo

to

至

export default class Foo.

导出默认类Foo。

I got this error in react routing, problem was that I was using

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

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

<路由路径=“/”组件={<主页/>}精确/>

but it was wrong route requires component as a class/function so I changed it to

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

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

and it worked. (Just avoid the braces around the component)

而且它起作用了。(只需避免组件周围的花括号)

And in my case I was just missing a semicolon at the import-decleration in one of my sub modules.

在我的例子中，我只是在我的一个子模块的导入-解密时遗漏了一个分号。

Fixed it by changing this:

通过更改以下内容修复了该问题：

import Splash from './Splash'

to this:

对此：

import Splash from './Splash';

For me, it was because my component wasn't exporting for some reason using the * notation, so I had to name the export explicitly

对我来说，这是因为我的组件由于某种原因没有使用*符号导出，所以我必须显式地命名导出

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

to

至

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

In addition to import/export issues mentioned. I found using React.cloneElement() to add props to a child element and then rendering it gave me this same error.

除了提到的进出口问题之外。我发现使用React.cloneElement()将道具添加到一个子元素，然后呈现它，我得到了同样的错误。

I had to change:

我不得不改变：

render() {
  const ChildWithProps = React.cloneElement(
    this.props.children,
    { className: `${PREFIX}-anchor` }
  );

  return (
    <div>
      <ChildWithProps />
      ...
    </div>
  );
}

to:

致：

render() {
  ...
  return (
    <div>
      <ChildWithProps.type {...ChildWithProps.props} />
    </div>
  );
}

See the React.cloneElement() docs for more info.

有关更多信息，请参见React.cloneElement()文档。

I was getting this error also. The error was being caused by trying to export a component like this...

我也收到了这个错误。错误是由于尝试导出组件而导致的，如下所示...

export default Component();

Instead of like this...

与其像这样..。

export default Component;

My understanding is that by adding the "()" at the end of the component, I was actually calling the function instead of just referencing it.

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

I did not see this in the answers above, but may have missed it. I hope it helps someone and saves some time. It took me a long time to pinpoint the source of this error!

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

The problem can also be an alias used for a default export.

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

Change

变化

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

to

至

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

solved the issue for me.

帮我解决了问题

I was the same problem because I did import incorrect library, so i checked the documentation from the library and the route was changed with the new versión, the solution was this:

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

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

and I was writing the incorrect way:

我写的是错误的方式：

import {Ionicons} from 'expo';

I was getting this issue too. My imports look fine, I could copy the contents of my copy and paste it where it was being used and that worked. But it was the reference to the component that was going wrong.

我也收到了这一期。我的进口看起来很好，我可以复制我的副本的内容，并将其粘贴到正在使用的地方，这很有效。但这是对出现问题的组件的引用。

For me I just had to shut down expo and restart it.

对我来说，我只是不得不关闭世博会，然后重新启动它。

Just want to add a case to this question. I walked around this issue by swapping the order of import, for example in my mixed of imports before:

我只想在这个问题上增加一个案例。我通过交换导入顺序绕过了这个问题，例如，在我之前的混合导入中：

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

After the change:

更改后：

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

For Next JS

Restart your server ✅

I spent quite a lot of time debugging the issue.

我花了相当多的时间来调试这个问题。

I got the error when using clsx() for my className prop. The error goes away when removed clsx()

在为我的类名称道具使用clsx()时出现错误。删除clsx()后，错误消失

Searched for Next JS issues in clsx and vice versa. Didn't find any active/ past issues. So I just tried restarting the server, and it worked.

已在clsx中搜索下一个JS问题，反之亦然。未发现任何活动/过去的问题。所以我试着重新启动服务器，它起作用了。

For me it was that my styled-components were defined after my functional component definition. It was only happening in staging and not locally for me. Once I moved my styled-components above my component definition the error went away.

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

It means some of your imported Components are wrongly declared or nonexistent

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

I had a similar issue, I did

我也有过类似的问题，我确实有

import { Image } from './Shared'

but When I looked into the Shared file I didn't have an 'Image' component rather an 'ItemImage' Component

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

import { ItemImage } from './Shared';

This happens when you copy code from other projects ;)

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