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

Cribbing

Are you sure the import App from './components/App'; statement is correct? – Elysia

check the export of Header, HomePage and Routes components. if you are not exporting them default you need to import them like import { Home } from '/path/to/Home/component.js'. Can you post snippets from these components please – Greenery

Yes, I am sure import statement for App is correct. I am using visual code. when I mouse hover på this statement. It shows me a correct path to the App.js file – Cribbing

I checked export statement for Header, Homapage and Routes components. I am using default for all – Cribbing

ROUTEJS Code import React from 'react'; import {Route, Switch} from 'react-router-dom'; import HomePage from './components/home/HomePage'; export default ( <Route exact path="/" component={HomePage} /> ); – Cribbing

HEADERJS Code import React from 'react'; import {Link} from 'react-router-dom'; const Header = () => { return( <nav> <Link to="/">HOME</Link> </nav> ); }; export default Header; – Cribbing

HOMEJS Code import React from 'react'; import {connect} from 'react-redux'; import {getProducts} from '../../actions/homeAction'; class HomePage extends React.Component{ ................... } HomePage.propTypes ={ products:React.PropTypes.array, getProducts: React.PropTypes.func }; const mapStateToProps = (state) => { debugger; return { products: state.products }; }; export default connect(mapStateToProps)(HomePage); – Cribbing

your routejs seems off. export default () => ( <Route ... /> ) should fix it – Anagram

Thanks for your help. I have resolved the issue. There was a problem with my App.js file. – Cribbing

@Cribbing can you tell me that how you fix this problem i am also facing the same problem.thanks – Flory

Answer 1

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>

Saharan

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.

Hillari

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.

Carcass

Answer 4

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

Randolf

default exports can be imported without {} – Unsure