Gatsby changing the layout of components.

[omar-shahid]

Description

First of all, thank you so much for making Gatsby! I am having this issue since the start of my gatsby journey, I thought it was from my side, but after long research, I couldn't find any solution. I have seen many issues regarding gatsby changing the production styles, maybe it is related to same bug. What gatsby is doing is replicating the wrapper element of any component, at any time, on any environment (i-e dev or production) randomly, I couldn't find any specific condition triggering this bug.

What gatsby is actually rendering: (See the duplicate wrapper of text component)

Steps to reproduce

Here's the link to repo:
https://github.com/ReactReduxRouterDOM/public-gatsby-issue-repo

• Install dependencies
• start development server
• try to refresh, navigate around pages.

Expected result

Here are the screenshot of all the pages layout.

Home page /

404 page /404

Create lolly page /create-lolly

Actual result

Environment

Windows 10
Node: v14.16.1
NPM: 6.14.12
Yarn: 1.22.5
Gatsby CLI: 3.2.0
NPX: 6.14.12

Run gatsby info --clipboard in your project directory and paste the output here. Also name any flags you use inside gatsby-config.js.

  System:
    OS: Windows 10 10.0.19042
    CPU: (2) x64 Intel(R) Core(TM)2 Duo CPU     E7600  @ 3.06GHz
  Binaries:
    Node: 14.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.12 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.8.5
  Browsers:
    Edge: Spartan (44.19041.964.0), Chromium (90.0.818.66)

[LekoArts]

It's not a bug per se and also not specific to Gatsby as it can happen on every platform that generates HTML/CSS/JS and then rehydrates that content on the client (Rehydration). Somewhere in your code you could e.g. make the assumption that the window element exists and then during gatsby build that part will be undefined and your HTML will be different than what on the client will be rendered.

You could give this a read and check your code afterwards: https://www.joshwcomeau.com/react/the-perils-of-rehydration/

[omar-shahid]

That was exactly my issue. Thanks for linking this article! I think Gatsby should address this issue in their docs (kindly share the link if Gatsby already has a page) as this is related to rehydration, so beginners like me don't create a new issue thinking it's a bug. Thanks again for solving my issue.