react-flexbox-grid vs. react-server

[curio77]

I'm kind of reluctant to open yet another issue relating to the infamous “class names are empty” issue, but I think my context is different, so here goes.

I've been toying with this in the context of a react-server, i.e., isomorphic, project. After quite some fiddling with my webpack config, I managed to get things to work in principle.

However, I now get checksum mismatch warnings between the server- and client-rendered HTML for react-flexbox-grid components, to the tune of this (for a <Row/>):

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) tid="1"><div class="flexboxgrid__row___c
(server) tid="1"><div class="" data-reactid="2">

As can be seen, while (mangled) class names are (correctly) inserted on the client side, the class attribute remains empty on the server side. Besides negating much of the advantages of SSR, this has the effect that the desired layout is only established split seconds after the page has been loaded and content has been rendered, which is rather irritating for the user.

Has anybody else used react-flexbox-grid with react-server, and if so, without this issue? In that case, what's your webpack config?

For me, adding

    {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style", "css?modules&sourceMap&localIdentName=[name]__[local]___[hash:base64:5]"),
    }

to module.loaders made things work in principle (solving the CSS-interpreted-as-JS issue), but the issue described remains. :-(

[keatz55]

Exact same problem here, but with my own express server.

[rohmanhm]

Same problem here.