Geek Answers Handbook

ReactJS Invalid Checksum

I keep getting the following error when trying to render on the server side using ReactJS and node.

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

I saw an answer that passes the same details on the server, and the client solves this problem. In my example, I have no props, so I'm not sure if the answer relates to my problem.

You can view my full example on my github account.

I have included 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);
+7
reactjs
source share
1 answer

Edit

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

to

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

and the notification disappears.

Screenshothot

+13
source share

More articles:


All Articles