0

I'm doing the react tutorial by Nodeschool, the module titled learnyoureact.

I'm on the Isomorphic lesson (8 of 11) and I'm running into the warning:

warning.js:44Warning: React attempted to reuse markup in a container but the checksum was invalid.
This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting.
React injected new markup to compensate which works but you have lost many of the benefits of server rendering. 
Instead, figure out why the markup being generated is different on the client or server:

My solution is the same as this one and I have even tried to copy and paste from this solution but I'm still getting the same warning. To recreate the problem, copy the code from above repo.

What does it all mean? I looked at some SO posts about this such as this and this but I don't think the solution pertains to my problem/warning. As a React novice, I'm baffled at what to do next. The HTML page looks fine but the learnyoureact module says different HTML is generated and I can see that as well in Chrome's inspect tool.

I have figured out that the issue stems from this line.

ReactDOM.render(<TodoBox data={data} />, document.getElementById("app"));

How can I fix this problem/warning? Thank you!

Here's a picture of error trace:

enter image description here

This is what I see now. The warning mysteriously disappeared after I left and re-ran node program.js a few hours later but in my terminal, I still get same erroneous HTML. Any ideas?

enter image description here

Community
  • 1
  • 1
Sticky
  • 3,671
  • 5
  • 34
  • 58
  • Can you confirm that you're rendering the same thing on the server? It should look something like this: `ReactDOMServer.renderToString(React.createElement(TodoBox, {data: data}));`. then, confirm that the `data` object is the same on the client and server (`console.dir(data, {depth: 1, colors: true});` in node makes it easier to read. Try turning off JavaScript in dev tools (so you see the HTML as it comes from the server). That might offer some clues. – David Gilbertson Jul 18 '16 at 02:01
  • Something odd is going on. I re-ran `node program.js` and when I opened up localhost and inspected, the warning was gone. The HTML renders as expected. However, when I run `learnyoureact run program.js`, the HTML that is the output in the terminal doesn't match the browser and is what I had in my browser a few hours ago. What could cause this? I attached a picture of both browser HTML and terminal HTML from program.js which is run via `node`. – Sticky Jul 18 '16 at 05:57
  • No idea sorry. I'd log this with 'learnyoureact', seems like something they're doing under the hood. – David Gilbertson Jul 18 '16 at 06:03
  • Good call, apparently there is an issue on GitHub: https://github.com/kohei-takata/learnyoureact/issues/103 From what I can tell, it was a combination of "restart node" and some other problem with the module itself. – Sticky Jul 18 '16 at 06:07

0 Answers0