Getting Invariant Violation : Element type is invalid while using createBrowserHistory with react-router@1.0.0

Question

I get to create a Single Page Application using React. Here, while using React-router, I am not able to find the correct way of using history. I have tried the below way of using it:

var React = require('react');
var ReactRouter = require('react-router');
var createBrowHistory = require('history/lib/createBrowserHistory');
var Router = ReactRouter.Router;
var Route =  ReactRouter.Route;
var Content = require('./default-content');

module.exports = (
   <Router history={createBrowHistory()}>
      <Route path="/" component={Content}>
      </Route>
   </Router>
)

However, I am getting the following error:

Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components).
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Note : I am using gulp, browserify, React@0.14.3, React roter@1.0.0, history@1.13.1 Please help me through the above errors. Thanks.

Answer 1

I don't know exactly the code around the one you posted, but making some guesses, I would say that if you change your code to this:

var MyRouter = React.createClass({
  render: function() {
    return (<Router history={createBrowHistory()}>
       <Route path="/" component={Content}>
       </Route>
    </Router>);
  }
});

module.exports = MyRouter

That would work.

I'm guessing you're requiring your code in another place and putting it inside a React.createElement function. The problem is that you are not exporting a React Class, you are exporting a React Element. This is the Javascript generated from your code:

module.exports = (React.createElement(Router, {history: createBrowHistory()}, 
   React.createElement(Route, {path: "/", component: Content}
)));

I can explain better if you post your other files: default-content.js and main.js