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

Question

I am getting this error:

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/funct

Answer 1

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:

non-modularized previously valid component/code:

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

modularized component/code with module.exports:

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

Answer 2

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:

  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.

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

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

  )
}

Answer 3

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

Answer 4

@Balasubramani M saved me here. Wanted to add one more to help people. This is the problem when you're gluing too many things together and being cavalier with versions. I updated a version of material-ui and need to change

import Card, {CardContent, CardMedia, CardActions } from "@material-ui/core/Card"; 

to this:

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 5

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'

You have 2 options:

1. Your export file can have the word default as in export default class ____.... Then your import will need to avoid using {} around it. As in import ____ from ____

2. Avoid using the default word. Then your export looks like export class ____... Then your import must use the {}. Like import {____} from ____

Answer 6

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

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

vs

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

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