Element type is invalid: expected a string (for built-in components) or a class/function

Question

import React from \'react\';
import ReactDOM from \'react-dom\';
import Map from \'./components/map/container/map\';
import App from \'./App\';
import \'./index.css\         


        

Answer 1

for me i was trying to route in app.js some component that have problem, so index.js will not render the / because of that in-proper import in app.js

so alwasy make sure components in app.js are working properly

Answer 2

I also had the similar problem while attempting to add routes into my application. I then realised that i was importing { BrowserRouter, Route } from "react-router"; instead of correctly importing it from react-router-dom as below import { BrowserRouter, Route } from "react-router-dom". Thanks to the online community

Answer 3

I've also run into this error when one of the nested components attempted to render a component that did not exist. Specifically, I attempted to use

<Button ... /> 

a react-native component in React, where I should have been using

<button ... />

Answer 4

Problem is in the import statements. You have not used curly braces while importing some components like createHistory.

If a component uses a default export like:

export default X

Then you can simply import it like:

import X from './X';

But if you are using a named export like:

export const X=1;

Then you need to import it in curly braces like:

import {X} from './X';

So have a look at your imports. This will resolve your issue.

Answer 5

It can also be caused from where the entry point is.

In my case, the App.js was calling index.js (where the developer console was identifying the error, and where my RenderDom call was).

However, App.js was referencing a component, and it was within that component that I had the error (a reference to yet another component that did not exist).

Answer 6

For me, I faced this issue when I forget to use react-redux's connect in my export.

So,

changing:

 export default(mapStateToProps, mapDispatchToProps)(ContentTile);

To:

export default connect(mapStateToProps, mapDispatchToProps)(ContentTile);

solved the issue. Really silly mistake