New className
s are not being applied on the client after a server render.
Live version http://mikelambert.me/gatsby-bug/
- Run
gatsby develop
- Open http://localhost:8000 in a browser wider than 600px.
- Notice that the background is blue and the text reads CONTAINER--LARGE (should be blue).
- Resize the browser to less than 600px and notice that the background is now green and the text reads container--small (should be green).
- 👍🏻
- Run
gatsby build && gatsby serve
- Open http://localhost:9000 in a browser wider than 600px.
- Notice that the background is green (wrong) and the text reads CONTAINER--LARGE (should be blue).
- The text was server rendered as container--small (should be green) (view source to see), and is correctly being updated to CONTAINER--LARGE (should be blue)
- The color/class is incorrect! The incorrect
className
ofcontainer--small
is in the DOM. However, notice the correctclassName
ofcontainer--large
is logged to the console.
- 👎🏻
- Resize the browser back up to more than 600px and notice that the background is now blue and the text reads CONTAINER--LARGE (should be blue) (correct, back in sync).