Themes: React tree reconciliation error in logged-in multi-site view

[ockham]

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) <div class="wp layout is-section-fa
(server) <div class="wp is-section-design ha

To reproduce -- enter calypso.localhost:3000/design into your browser (while logged-in, with JS enabled).

[ehg]

This is because the logged in cookie doesn't exist in the development environment. It only exists when wpcom_user_bootstrap is enabled, so I don't think we have an easy way to detect whether someone is logged in on the server side without it(!)

[ockham]

Update: Reconc errors can have subtle reasons that tend to pile up when remaining unfixed -- some of them with other (graver) implications :-/ AFAICS, there are currently three sources:

1. client/boot renders to #wpcom, overriding any SSR'd element tree with one that has empty #primary, #secondary, and #tertiary divs. Fix in Framework: Don't render layout for isomorphic sections in client/boot #5115. (This is one of the graver ones -- client/boot overriding stuff, and being called only after isomorphic middlewares on the client side leads e.g. to issues with i18n initialisation)
2. /design gets class is-section-theme instead of is-section-themes. :rolleyes: See Themes: Move Theme Details sheet to my-sites/theme #4668 for the reason and a fix (WIP).
3. The has-no-sidebar class is determined by sections.js's secondary field, which is either true, or false. However, /design can be used both when logged-in (with a sidebar), and logged-out (no sidebar). So this scheme is too rigid for our purpose. /cc @mtias

Also /cc @seear @folletto

[lancewillett]

Hi @ockham — following up on this old thread, are there still actionable items left, or can we close it now?

[ockham]

Part of it is still viable -- I filed #5560 to track the current state of affairs for reconciliation errors.