Server Rendering - Invalid Checksum: Browser Prefixes

[tomatau]

Currently certain styles required a browser prefix that is added by ReactDOM. When rendering through the ReactDOMServer, these prefixes aren't added and we get an invalid checksum.

Any suggestions for dealing with this?

Perhaps this library could use https://github.com/cgarvis/react-vendor-prefix ?

[alexkuz]

As I understand, Radium, which I use here, takes care of vendor prefixes. I don't know how it works with server rendering though, haven't try that (as well as server rendering per se). Also, can it be covered with tests?

[tomatau]

I think Radium only adds prefixes on client side code?

My use case was attempting to work with the latest redux-devtools which recommend using react-dock as a wrapper. After digging deeper I've found this which may work as a solution https://github.com/UXtemple/babel-plugin-react-autoprefix... will keep posting here regarding whether it works or not to keep the rendering consistent between server and client.

[edit]: does not solve the issue

Re tests: I would assume you can stub the calls to the third party library functions with identity functions and trust the tests of the library -- or just use spys. Then the existing assertions would not need any modifications.

[alexkuz]

BTW, why would you want to render devtools server-side at all? Just wonder :)

[tomatau]

For developing in a universal app. Otherwise you'll get invalid checksum.

[alexkuz]

@tomatau I've changed prefixing, can you check if it works with server rendering?

[msokk]

Prefixes look good now for me, but now the dock has css empty value left:;.
When positioning the dock to left instead from right, it then generates left value as a percentage and checksum warning stops complaining about that.

Given that I use async actions which get resolved on the server side, the devtools state will still be out of sync, as the multiple states generated by serverside actions are not passed along.
See reduxjs/redux-devtools#68

[natelaws]

Yeah, I just traced this same left:; invalid checksum issue.

The problem is that this code will set

react-dock/src/Dock.js

Line 106 in c8b5c5e

left: isVisible ? getRestSize(fullWidth) : fullWidth,

{left: false} which react will end up as an empty value. Of course there isn't a way to get the browsers actual fullWidth on the server so that value will always be missing. @msokk workaround is correct, currently any position besides right will work fine.

I do wonder why when the dock is set to the right side it calculates a left css property instead of just setting right: 0 though?

[alexkuz]

@natelaws it's done that way for proper animation between left-top-right-bottom states, if I recall it right

[kgdev]

fullWidth is false in the server side, but fullWidth is 1920 in the browser. Can we get this fixed?

Well the workaround right now is that I will use "left" position.

[alexb-uk]

Hi,

I've just noticed what appears to be the same problem with Server-side rendering. "Warning: Prop style did not match. Server:".

The error manifests by creating an invisible box on the left side of the screen that prevents click-through. Opening / showing the Dock fixes the issue.

When navigating user Client-side no error / issue.

Component:

<Dock
          position="right"
          isVisible={this.state.isVisible}
          fluid
          dimMode="none"
          size={0.4}
        >

Full console error:

index.js:2177 Warning: Prop `style` did not match. Server: "position:fixed;z-index:1;box-shadow:0 0 4px rgba(0, 0, 0, 0.3);background:white;left:;top:0;width:40%;height:100%;-moz-box-shadow:0 0 4px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0 0 4px rgba(0, 0, 0, 0.3);-ms-box-shadow:0 0 4px rgba(0, 0, 0, 0.3);-o-box-shadow:0 0 4px rgba(0, 0, 0, 0.3);transition:left 0.2s ease-out,top 0.2s ease-out,width 0.2s ease-out,height 0.2s ease-out,opacity 0.01s linear 0.2s;-moz-transition:left 0.2s ease-out,top 0.2s ease-out,width 0.2s ease-out,height 0.2s ease-out,opacity 0.01s linear 0.2s;-webkit-transition:left 0.2s ease-out,top 0.2s ease-out,width 0.2s ease-out,height 0.2s ease-out,opacity 0.01s linear 0.2s;-ms-transition:left 0.2s ease-out,top 0.2s ease-out,width 0.2s ease-out,height 0.2s ease-out,opacity 0.01s linear 0.2s;-o-transition:left 0.2s ease-out,top 0.2s ease-out,width 0.2s ease-out,height 0.2s ease-out,opacity 0.01s linear 0.2s;opacity:0" Client: "position:fixed;z-index:1;box-shadow:0 0 4px rgba(0, 0, 0, 0.3);background:white;left:1200px;top:0;width:40%;height:100%;-moz-box-shadow:0 0 4px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0 0 4px rgba(0, 0, 0, 0.3);-ms-box-shadow:0 0 4px rgba(0, 0, 0, 0.3);-o-box-shadow:0 0 4px rgba(0, 0, 0, 0.3);transition:left 0.2s ease-out,top 0.2s ease-out,width 0.2s ease-out,height 0.2s ease-out,opacity 0.01s linear 0.2s;-moz-transition:left 0.2s ease-out,top 0.2s ease-out,width 0.2s ease-out,height 0.2s ease-out,opacity 0.01s linear 0.2s;-webkit-transition:left 0.2s ease-out,top 0.2s ease-out,width 0.2s ease-out,height 0.2s ease-out,opacity 0.01s linear 0.2s;-ms-transition:left 0.2s ease-out,top 0.2s ease-out,width 0.2s ease-out,height 0.2s ease-out,opacity 0.01s linear 0.2s;-o-transition:left 0.2s ease-out,top 0.2s ease-out,width 0.2s ease-out,height 0.2s ease-out,opacity 0.01s linear 0.2s;opacity:0"

Could anyone let me know if there is a workaround / fix for this as I can't switch the dock to the left hand side without breaking the layout?

Thanks a lot

Alex