Link makes checksum incompatible

[clintandrewhall]

I'm experimenting with isomorphic rendering with react-router, and everything has been going great until I tried to add the Link component. Now I get:

Uncaught Error: Invariant Violation: You're trying to render a component to the document using server rendering but the checksum was invalid. This usually means you rendered a different component type or props on the client from the one on the server, or your render() methods are impure. React cannot handle this case due to cross-browser quirks by rendering at the document root. You should look for environment dependent code in your components and ensure the props are the same client and server side.

If I don't include the Link component, the checksum matches; include even just one and it doesn't. Any ideas what might be causing this?

[gaearon]

Just wondering.. could it be that you have two different versions of React loaded alongside, one from your app and another in node_modules/react-router/node_modules/react? It's a common source of bugs so just wanna make sure.

[clintandrewhall]

I'll check and update here... thanks for the lead!

[clintandrewhall]

Nope. react-router is using the version of react I've loaded in my project: 0.12.x Other suggestions?

[clintandrewhall]

Any other suggestions?

[gaearon]

If you share an example, I can take a look!

[clintandrewhall]

Sure, no problem!

My project metaphorical.ly uses react-router. Here is where I invoke the "overwrite" of the server-produced content:

https://github.com/clintandrewhall/metaphorically/blob/master/public/components/Root.jsx#L72

If I switch just one of these links to Link, I get a checksum error:

https://github.com/clintandrewhall/metaphorically/blob/master/public/components/Nav.jsx#L16

I can provide more info if needed! If you want to run this yourself, just run
node build
node startup.js

[gpbl]

@clintandrewhall, once I got this error because the client was rendering the href attribute with #, while the server without it.

[ryanflorence]

I'm doing plenty of isomorphic stuff right now and have not seen this, I'll happily reopen if a test case showing the bad behavior shows up :)

[ryanflorence]

woops, missed the sample code

[ryanflorence]

If you're doing server side rendering, you need to be using Router.HistoryLocation. I'm sure your checksums are busted because of #.

If there's a valid reason to use HashLocation I'll reopen, but browsers don't send the hash to servers anyway.

[clintandrewhall]

@rpflorence Sorry, what do you mean when you say use Router.HistoryLocation?

[ryanflorence]

in the client you need to use Router.run(routes, Router.HistoryLocation, callback), and on the server Router.run(routes, req.path, callback).

[HzJavier]

@clintandrewhall Were you able to fix the problem with that Ryan commented or did something else? I'm having the same issue but didn't quite get the way to solve it.

[iyoukeyyewei]

I have the same issue. Anyone can help on resolution? thanks

[anatomic]

I've stumbled on this thread because my checksum isn't matching. Debugging it a few different ways I think the issue is that a <noscript> is being rendered by React on the client while React Router performs it's async work (and secondary bundles are loaded in by webpack). I fear that the universal javascript and webpack chunking may never play well together :(

Has anyone else seen this issue?

[jarib]

I'm also seeing a <noscript> difference.

@anatomic Did you find a solution?

[anatomic]

@jarib I did, posted my solution in issue #1402 #1402 (comment)