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

I had an issue with React.Fragment, because the version of my react was < 16.2, so I got rid of it.

Answer 2

I'm getting almost the same error:

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.

I was trying to import a pure functional component from another node library my team has developed. To fix it, I had to change to an absolute import (referencing the path to the component inside node_modules) from

import FooBarList from 'team-ui';

to

import FooBarList from 'team-ui/lib/components/foo-bar-list/FooBarList';

Answer 3

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

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

import Component from ./Component

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

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

Answer 4

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

Answer 5

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

Error:

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

Works :

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

Answer 6

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