Check the render method

Question

I am using react, redux and react-redux-router. When I run an application I get an error. I do not understand what it has to do with the render function of react in my App.js. It seems to me that problem is lying somewhere else in the code.

The error are as follows:

 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `App`.
 in App
 in Router (created by ConnectedRouter)
 in ConnectedRouter
 in Provider       
 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `App`.

My javascript App file code is shown below.

 import React from 'react';
 import Header from './common/Header';
 import HomePage from '../components/home/HomePage';
 import Routes from '../routes';            
 const App = () => (
   <div>
   <Header />              
   <Routes />
   </div>
     )

 export default App;

my Javascript index file code is shown below

 import 'babel-polyfill';
 import React from 'react';
 import {render} from 'react-dom';
 import {Provider} from 'react-redux';
 import {BrowserRouter as Router} from 'react-router-dom';
 import configureStore, {history} from './store/configureStore';
 import {loadProducts} from './actions/homeAction';
 import routes from './routes';
 import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 import {ConnectedRouter} from 'react-router-redux';
 import createHistory from 'history/createBrowserHistory'
 import App from './components/App';    

  const store = configureStore();
  store.dispatch(loadProducts("http://localhost:1219/portal/getProducts"));        
 render(
    <Provider store={store}>
    <ConnectedRouter history={history}>
     <App />
     </ConnectedRouter>
     </Provider>,
     document.getElementById('app')
  );

Any help would be appreciated. If you would like more detail please let me know

Answer 1

In your App.js file when you are importing the components make sure you write then in {}

like below

import {Header} from './common/Header';
import {HomePage} from '../components/home/HomePage';

This will resolve the issue.

If you have some default export components that you can mention without {}.

like below

import Header from './common/Header';

If you have multiple components in one js file, you can write as below

import Header,{OtherComponent1,OtherComponent2} from './common/Header';

Answer 2

Anyone else having this problem, ensure you have an export default for any component you use in your route, else you will run into this error.

Answer 3

For those who encounter this type of issue. Do not forget our best friend in javascript!

React has made it clear that you have a problem in the <App /> component, so first try to do console.log(App) in your index to see what it returns.

Then dig down by removing components 1 by 1 in the <App /> to see which one causes the trouble.

Answer 4

For me it seemed like I had to remove the MemoryRouter or ConnectedRouter in your case.

Also, note that my issue was in my App.test.js file so it may not apply to OP's specific use case but it might help those of you whom arrived here through Google.

Can someone please explain why this works?

This is the code that is now working:

<Provider store={store}>
     <App />
</Provider>

This is the original non-working code:

<Provider store={store}>
    <ConnectedRouter history={history}>
        <App />
    </ConnectedRouter>
</Provider>