Monday, 29 May 2017

Invariant Violation: renderComponentToString(): You must pass a valid ReactComponent

I'm trying to build an application using React and Node.js, but I'm not sure how to use React on the frontend. I'm trying to follow this tutorial. Right now, in my routes.js file, I have:

var JSX = require('node-jsx').install();
var React = require('react');
var Homepage = require('./../components/Homepage');

module.exports = {

    index: function(req, res) {
        var markup = React.renderComponentToString(Homepage);

        res.render('home', {
            markup: markup
        });
    }

};

The renderComponentToString method seems to be the problem, since my server starts, then I receive the error message "Error: Invariant Violation: renderComponentToString(): You must pass a valid ReactComponent." My Homepage component looks like:

/** @jsx React.DOM */

var React = require('react');
var style = require('./style');

module.exports = About = React.createClass({
    render: function() {

        return (
            <div style={ style.style1 }>
                some more code here
            </div>
        )

    }
})

I can't seem to figure out what's wrong with my react component. Any help would be appreciated. Thanks!



via gridproquo

No comments:

Post a Comment