6

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

Dimitar Christoff
  • 25,905
  • 8
  • 47
  • 66
user3661407
  • 405
  • 3
  • 8
  • 16
  • Are you sure the `import App from './components/App';` statement is correct? – Hleb Barylskyi Sep 05 '17 at 10:39
  • 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 – bennygenel Sep 05 '17 at 10:51
  • 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 – user3661407 Sep 05 '17 at 11:05
  • I checked export statement for Header, Homapage and Routes components. I am using default for all – user3661407 Sep 05 '17 at 11:06
  • ROUTEJS Code import React from 'react'; import {Route, Switch} from 'react-router-dom'; import HomePage from './components/home/HomePage'; export default ( ); – user3661407 Sep 05 '17 at 11:11
  • HEADERJS Code import React from 'react'; import {Link} from 'react-router-dom'; const Header = () => { return( ); }; export default Header; – user3661407 Sep 05 '17 at 11:12
  • 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); – user3661407 Sep 05 '17 at 11:13
  • 1
    your routejs seems off. `export default () => ( )` should fix it – Rei Dien Sep 05 '17 at 13:28
  • Thanks for your help. I have resolved the issue. There was a problem with my App.js file. – user3661407 Sep 06 '17 at 18:51
  • 4
    @user3661407 can you tell me that how you fix this problem i am also facing the same problem.thanks – Mudassir Khan Mar 30 '18 at 05:16

2 Answers2

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>
Tomiwa
  • 481
  • 8
  • 12
-3

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';
Gaurravs
  • 519
  • 12
  • 26