Gatsby: Inconsistencies between develop and build

[eikhunter]

Description

I am trying to deploy a recently built Gatsby site and having major problems between develop and build which I cannot for the life of me figure out why. Both develop and build compile successfully but when I go to the index.html file or view it on our staging site there seems to be css issues, and no images are showing

Build

Develop

I also have a static query 'Loading (StaticQuery)' In the top left hand corner shown as text always

Expected result

Develop should look the same after you build the project

Actual result

CSS / Images / Fonts are missing

This is very hard to debug as I can't find any problems when running develop

[polarathene]

You're likely going to need to provide more information, a reproduction repo (strip it down to a part that differs, and then make it generic if you feel the need to) for anyone to be able to assist.

At the very least, share more details about the project such as what dependencies(package.json) you're using, gatsby-config.js etc. I have a similar issue where develop and build are inconsistent with a component that conditionally accepts props based on query string parameters, I also recall a prior project with similar issues when navigating to the index.html, but using any internal links to other pages would render correctly(as they're created as the react app vs loading the contents of index.html, might be similar for you?

Your build output didn't throw any errors? No errors in the browser dev tools console(develop or build variants?).

[sidharthachatterjee]

Sorry you're seeing this @eikhunter

This is likely a React hydration issue. Since we don't do server side rendering during develop, a lot of these issues become apparent only during build at the moment.

We're trying to converge behaviour between develop and build as documented in https://github.com/gatsbyjs/gatsby/issues/10706.

In the mean time, can you link to a reproduction repo?

[jonniebigodes]

@eikhunter like @polarathene said, it's really good for us to address the issue you're experiencing with a full blown reproduction, i.e a repository where it can be looked at and reproduced. If the work you're doing is private, or otherwise protected, create a simple dummy repository in order for the issue to be reproduced. Also, and this based without any knowledge of your actual code, the 'Loading (StaticQuery)' is most likely to be a issue with StaticQuery and React Fragments. I believe the issue between the two still exists with Gatsby at this point. If that's actually the issue, at least one of your problems can be solved by simply changing it to a div element.

[eikhunter]

Apologies for the lack of information, I have moved the project into a public repository so you can all take a look, I have stared at it for hours today - https://github.com/eikhunter/website-repository - Give this a go

[sidharthachatterjee]

@eikhunter Sent you a pull request at https://github.com/eikhunter/website-repository/pull/1

I think this fixes everything 🙂

[eikhunter]

@sidharthachatterjee Thanks for this, really appreciate it. I have fixed my issue with inconsistencies, there was a media query bug in my code that wasn't generating the correct content which meant all my javascript calculations were screwing up and breaking the whole build, it was an issue with passing down props that had been set to have a media query. Thanks for your help!