React create element type invalid after including router

Question

When I have added react router it gives me follow errors

here is main.js

var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router');
var Route = require('react-router').Route;
var Home = require("./components/homePage");
ReactDOM.render(
    <Router >
        <Route component={Home} path="/"></Route>
    </Router>
    , document.getElementById('app'));

Homepage.js

var React = require('react');
var Home = React.createClass({
    render: function(){
        return (
            <div >
                <h1>Home</h1>
            </div>
        );
    }
});

module.exports = Home;

There are many others questions related to same problem but none of them address the real issue or general reason or cause. other answers suggesting using react-router 4 alpha and i have tried beta4 but still same error

Possible duplicate of [React.createElement: type is invalid -- expected a string, but got: object](http://stackoverflow.com/questions/41729972/react-createelement-type-is-invalid-expected-a-string-but-got-object) — prosti, Feb 03 '17 at 15:40
according to mentioned question installed beta-4 but still not working — owais, Feb 03 '17 at 17:20
What do you have in `package.json` file when in question is react-router? — prosti, Feb 03 '17 at 17:23
react-router@4.0.0-beta.4 installed using npm install --save react-router@next — owais, Feb 03 '17 at 17:26
When I proposed changing the value I actually meant to decrease the value. Some tutorials I read mentioned that. I will try to show you the link @owaishanif786. — prosti, Feb 03 '17 at 17:29
https://www.youtube.com/watch?v=1iAG6h9ff5s&t=158s, try something like 1.17, ... :) — prosti, Feb 03 '17 at 17:32
I suggest you use at least for some new project the new [React.Component ES6 architecture](http://stackoverflow.com/questions/35058241/which-reactjs-syntax-to-use-react-createclass-or-es6-extends/41966499#41966499) — prosti, Feb 03 '17 at 21:20

score 3 · Accepted Answer · answered Feb 03 '17 at 15:41

3

You are importing React Router components wrongly, it should be:

var Router = require('react-router').Router

var Route = require('react-router').Route

answered Feb 03 '17 at 15:41

rgommezz

13,536
2
18
23

after trying import { Router, Route } from 'react-router' the app worked so i came to know your syntax was right. As the first time i have tried i changed only in one file and the error was triggering from multiple file but I was unable to find due to bundle.js giving no hint from which file error happened. – owais Feb 12 '17 at 12:16

score 1 · Answer 2 · edited May 23 '17 at 12:25

1

There was a similar question like yours, but tricky you cannot say it is a duplicate, at least the error is the same.

Based on the ES5 syntax you are using I guess your example is old. Try using the different version of the React Router.

Or just start with some new ES6 syntax React Router example.

edited May 23 '17 at 12:25

Community

1
1

answered Feb 03 '17 at 15:38

prosti

42,291
14
186
151

according to mentioned question installed beta-4 but still not working. there is no syntax error – owais Feb 03 '17 at 17:21

React create element type invalid after including router

2 Answers2