8

I keep getting the following error when attempting server side rendering using ReactJS & node. 

React attempted to use reuse markup in a container but the checksum was invalid.

I've seen an answer that passing the same props on the server and client resolves this issue. In my example, I don't have any props, so I'm not sure that the answer applies to my problem.

You can view my full example on my github account.

I'm including the important code below. Any insight is greatly appreciated.

JSX

/** @jsx React.DOM */
var React = require('react');
var index = React.createClass({
    render: function() {
        return (
          <html>
          <head>
            <script src="bundle.js"></script>
          </head>
          <body>
            <div>
              hello
           </div>
          </body>
         </html>
     );
   }
});

if (typeof window !== "undefined") {
  React.renderComponent(<index/>, document.documentElement);
} else {
  module.exports = index;
}

Server

require('node-jsx').install();
var express = require('express'),
    app     = express(),
    React = require('react'),
    index = require('./index.jsx');

var render = function(req, res){
  var component = new index();
  var str = React.renderComponentToString(component);
  res.set('Content-Type', 'text/html');
  res.send(str);
  res.end();
}

app.get('/',render);
app.use(express.static(__dirname));

app.listen(8080);
Community
  • 1
  • 1
Nael
  • 1,479
  • 1
  • 14
  • 20

1 Answers1

14

Change

React.renderComponent(<index/>, document.documentElement);

to

React.renderComponent(<index/>, document);

and the notice goes away.

Screenshot

Michelle Tilley
  • 157,729
  • 40
  • 374
  • 311
  • Sometimes, it's something so simple. Thank you. How did you know the answer so quickly? – Nael Oct 03 '14 at 02:41
  • 5
    I had a hunch so I played around with it. :) In hindsight, `document.documentElement` *is* the HTML element, and `document` *contains* it, and React renders into elements—so if you want to render the `html` tag, you have to render into its container. – Michelle Tilley Oct 03 '14 at 02:42
  • Great response. Thank you again! – Nael Oct 03 '14 at 02:44
  • 1
    A similar answer applies if you're rendering into a div instead of rendering into `` -- you need to create a wrapper div and render into that. – Bryan Larsen Mar 18 '15 at 14:19