Webpack Dev-Server And React Server Side rendering

Question

I'm experimenting with isomorphic React applications, and I'm having issues when doing hot-loading on webpack dev server. I get this error:

warning.js:44 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

I do know what the meaning of this, but I have no idea how to fix it.
Also, take note that this ONLY occurs when I change my code which results in hot reload of the dev server, on production or on initial load of the dev server, no warnings are shown.

Thanks in advance!

Gershon Papi · Accepted Answer · 2016-05-19 15:02:06Z

0

After some expirementing I've realized the problem occured only when editing React Stateless Functions, as mentioned here.
Changing the component to its' ES6 class form, solved the problem. Note that react-hot-loader v3.x (which is currently alpha), doesn't have that problem.

answered May 19, 2016 at 15:02

Gershon Papi

5,1263 gold badges28 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Webpack Dev-Server And React Server Side rendering

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related