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

[matb]

I just cloned the latest version and when running the app I get two errors:

1: During the load, this warning is thrown in the console:

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) ass="appContainer___1pMKz" data-reactroo (server) ass="appContainer___385DV" data-reactroo

2: On page refresh the page is first loaded without styles and afterwards they are applied. This makes the page look pretty ugly during the load. I checked in Postman and I can confirm, that no styles are present during the first load.

Is there any fix for this?

[altaywtf]

Hi @matb, thanks for trying out vortigern.

Please refer to #76 and #59

[dmitry-korolev]

Actually the first problem described in @matb issue does exist. It can be reproduced on fresh vortigern install.
Steps to reproduce:

1. Install vortigern as described in the Installation section of README.md
2. Fix lint error in vendor/main.ts ;)
3. Run npm start
4. Open new tab, open devtools, navigate to http://localhost:8889/

Expected:
No errors in the console

Actual:
Error:

BTW, notice same class names on the client and different class names on the server side at my case and at @matb case.

System:
Windows 7
Node v7.4.0
NPM v4.0.5

[altaywtf]

@dmitry-korolev thanks for the explanation.

Since I'm not using vortigern in my daytime job, I'm unable to spot these kind problems. However, I will check it out during the weekend.

If you find a solution, please don't hesitate to open a PR 👍

[dmitry-korolev]

@altayaydemir obviously, there is some difference in the context, passed to hash function.
I used getLocalIdent (css-loader option, available in webpack 2) to bypass that problem, but that's just a workaround, not suitable for production, I guess.

I'll try to figure something out, when I have more time.

[matb]

@dmitry-korolev Does the issue also appear in the production build? I currently have the impression that it only happens in the development build.

[dmitry-korolev]

@matb
It doesn't show any warnings in the console (because it's, well, production mode), but yes, server rendered markup differs from client-side render in a same way.