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

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

import { Link } from 'react-router'

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

Answer 2

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.

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.

Answer 3

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.

Answer 4

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.

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

Answer 5

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

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 :(

Answer 6

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

import { ItemImage } from './Shared';

This happens when you copy code from other projects ;)