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

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.

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.

Answer 2

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

I managed to fix it by changing

export class Foo

to

export default class Foo.

Answer 3

In my case it ended up being the outer component imported like this:

import React, { Component } from 'react';

and then declared like:

export default class MyOuterComponent extends Component {

where an inner component imported the React bare:

import React from 'react';

and dotted into it for declaration:

export default class MyInnerComponent extends ReactComponent {

Answer 4

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.

<ConnectedRouter history={history}>

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

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.

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

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.

Answer 5

I had the same issue and the issue was some js files were not included in the bundling of that specific page. Try including those file and problem might be fixed. I did this:

.Include("~/js/" + jsFolder + "/yourjsfile")

and it fixed up the issue for me.

This was while I was using React in Dot NEt MVC

Answer 6

you need export default or require(path).default

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