Getting this error while using React router TypeError: type.toUpperCase is not a function

Question

I am developing an isomorphic app using react and express.js. I am using React Router for client side routing. While running the app i am getting following errors and warnings in console

Warning: Failed propType: Invalid prop handler of type object supplied to Route, expected function.

Warning: Invalid undefined handler of type object supplied to UnknownComponent, expected function.

TypeError: type.toUpperCase is not a function

Here is code for components/main.jsx

var React = require('react');
var Counter  = require('./flashCard.js');
var RouterModule = require('react-router');
var RouteHandler = require('react-router').RouteHandler
var routes = require('./routes.js')
var APP = React.createClass({
  render: function() {
    return (
      <html>
        <head>
          <title>8 facts</title>
          <link rel="stylesheet" type="text/css" href="/stylesheets/style.css"/>
          <script src="/javascripts/bundle.js"></script>
        </head>
        <body>
         <RouteHandler/>
        </body>
      </html>
    );
  }
});

module.exports = APP;

if(typeof window !== 'undefined') {
  window.onload = function() {

      RouterModule.run(routes,RouterModule.HistoryLocation, function (Handler) { 
        React.render(<Handler/>, document);
      });
}
}

Here is code for components/routes.jsx

var React = require('react');
var Route = require('react-router').Route
var Counter = require('./flashCard.js');
var App = require('./main.js')
var Demo = require('./demo.js')

var routes = (

    <Route name="home" handler={App}>
        <Route path="/" handler={Counter}/>
        <Route path="/demo" name ="demo" handler={Demo}/>
    </Route>

);

module.exports = routes;

Here is server side rendering code.. app.js

var express = require('express');
var http = require('http');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
require('node-jsx').install();
var db = require('./models/schema.js');
var mongoose = require('mongoose');
var app = express();
var React = require('react');
var RouterModule = require('react-router')
var routes = require('./components/routes.js')
var posts = require('./routes/index.js');

//database
db.connectDB().then(function(){
            console.log('connected');
          }, function(err){
            console.log('error');
          });
//database

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(favicon());
app.use(logger('dev'));
app.use( bodyParser.json() );       // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
    extended: true
}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));


app.use('/posts', posts);

//server side rendering code
    app.use(function(req, res) {
      RouterModule.run(routes, req.path, function(Handler) {
        var Html = React.createElement(Handler);
        res.send(React.renderToString((Html)));
      });
    });

hmlee · Accepted Answer · 2015-07-25 17:42:14Z

3

First off, it looks like you're using 0.13.3 of React Router. That's fine, and it is the most recent stable version, but I suggest you take a look at switching over to 1.0.0-beta 3. The API has changed a lot between the two, I think for the better.

As to the error you're getting, it means that you're passing in an object that is not actually a component when you are referencing <Handler />. Often, this occurs when you forget to require a component, or to use module.exports in the component itself. In the docs for 0.13.3 it looks like they use the <Root /> component where you've used <Handler />. Perhaps try switching to <Root />? Or, if you're somehow renaming <Root /> to <Handler /> in another file, look there to see if you've got any issues.

Or, just switch to 1.0.0-beta3. It's much nicer.

answered Jul 25, 2015 at 17:42

hmlee

8971 gold badge9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zack · Accepted Answer · 2016-02-03 02:08:07Z

3

When I ran into this issue, it was because I forgot to set the module exports in my component.

module.exports = <component-name>;

answered Feb 3, 2016 at 2:08

Zack

6777 silver badges17 bronze badges

Comments

David Lin · Accepted Answer · 2015-07-27 05:57:05Z

1

I ran into this before. Most likely a syntax error in your component.

answered Jul 27, 2015 at 5:57

David Lin

13.4k5 gold badges48 silver badges48 bronze badges

1 Comment

kishan Over a year ago

I am not able to figure out where is the error in components.. all things seem good...

Rei Dien · Accepted Answer · 2015-07-29 16:25:01Z

0

If you still havent found your answer try changing res.send(React.renderToString((Html))); into res.send(React.renderToString(<Handler/>); hope helps! cheers.

answered Jul 29, 2015 at 16:25

Rei Dien

19613 bronze badges

Comments

Rafael Eyng · Accepted Answer · 2015-12-25 23:43:33Z

0

I faced the same issue. It is expecting Javascript and getting JSX. So you need to convert it before calling React.renderToString().

Include babel through npm and then you can simply add require('babel-core/register'); at the top of server.js.

edited Dec 25, 2015 at 23:43

Rafael Eyng

4,9702 gold badges37 silver badges37 bronze badges

answered Nov 25, 2015 at 6:53

Ojassvi Chawla

213 bronze badges

Collectives™ on Stack Overflow

Getting this error while using React router TypeError: type.toUpperCase is not a function

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related