Moving index route (/) to /react gives React server checksum warning

[brucek]

So I'm just trying to figure out how to move the initial route to /react instead of /.

I have a working version up & running at https://github.com/brucek/react-webpack-rails-tutorial.git#test2. Everything is good, except when I initially load the page at http://localhost:3000/react, my JS console gives:

Warning: 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:
 (client) 28.0.0.0"><a class="active" href="/react
 (server) 28.0.0.0"><a class="" href="/react" data

so for some reason it's not detecting the route and adding the activeClassName.

It looks like someone referenced a similar issue in react-router, but since this is about server-side rendering (and I'm new to the React ecosystem), I'm not sure if:

1. I'm just doing something wrong / I missed something
2. This is an issue in react_on_rails
3. Maybe it actually is a bug in react-router?

Any chance someone more knowledgable could give me a pointer? Or let me know if there is a better place to post this? Thank you!

[brucek]

oh, this is using the dev server in case it's not clear

[justin808]

@brucek By dev server, do you mean Webpack Dev Server? I've moved away from using that as hot loading assets within the Rails app works so well.

The main issue with server rendering with React-Router is that you'll need to reference the location that's passed in the "rails_context" in the latest version of React on Rails.

[brucek]

@justin808, I think I'm using the rails hot loading server, as per docs:

$ foreman start -f Procfile.dev

My guess is rails_context would be passed somehow in ServerRouterApp.jsx:33?

I guess my confusion is because I thought react-router (or react_on_rails?) should handle this automatically, ie in Layout.jsx:19

[justin808]

@brucek Procfile.dev starts both port 3000 (rails) and 4000 (webpack dev server).

If you like, hack with me on this branch:

#277

That shows how this is supposed to work with the Rails Context. However, I've got an issue with turbolinks. Maybe you'll spot the issue?

[brucek]

@justin808 OK, so wait - should I be using a different Procfile? Procfile.hot looks like the same Rails app with hot assets, right?

sorry, might have to have a look at #277 next week, getting crunched right now though :-O

[justin808]

The Procfile.hot is a good one to use.

[justin808]

@brucek Any word on this one?

[brucek]

Hey, sorry - no, I've been pulled over to help fight some other fires so I'll have to get back to this once I dig myself out from that :-/ Thanks for checking in though

[justin808]

@brucek is this feature request still relevant?