gatsby-background-image | loading React background-image component | Computer Vision library

According to this

I think your snippet should look like:

There's not much debug in the question however, to me, it seems that you are using some dependencies outside React's scope, which may potentially block React's hydration process, which may explain the problem described. For example, using Leaflet instead of React's Leaflet or (depending on its implementation) Bootstrap instead of React's Boostrap.

You should be able to change all React-unfriendly modules to React's ones without too much effort and that should fix your problems.

Keep in mind that if your project "work in develop and breaks in build" doesn't mean that your project work or stops working, it just means that is working under certain and specific circumstances. Basically, and summarizing (to avoid extending the answer), gatsby develop uses the browser as an interpreter, where there are, among other things, global objects like window or document. However, gatsby build occurs in the Node server, where at the build time, there are not global objects because there are not even created yet, that the main reason why you may face a different behavior between both scenarios but doesn't mean that the project stopped working magically.

You can read further details in the Overview of Gatsby Build Process.

Another option, linked with blocking React's hydration, is that some component may be blocking that process because of its own behavior. Be careful when using global objects like window or document (or when importing modules that uses it), they use should be always be wrapped inside the following condition, as you can see from the docs:

When referencing window in a React component.

Check this GitHub thread's solution:

I figured it out! You have to force position: "absolute" by either passing it in the style prop of the BackgroundImage or by marking it !important for imageSrc in useStyles

What did you try so far? As @ksav pointed out, in this GitHub thread there are a several ways to fix a similar issue:

• Removing node_modules, .cache and install again
• Removing node_modules, .cache fix Gatsby to v2.23.3/upgrade up to ^2.26.1 where the bug is fixed and install again

It seems related to a loading staticQuery bug that can't be reproduced in a fresh install. The final trial is to remove your package-lock/yarn-lock.json and generate it again.

Just add the style object as shown in the Styling & Passed Through Styles section.

Try removing your node_modules and reinstalling. You might also want to check that you don't have something link NVM or and old Node 9 version in your path, that node-sass is picking up while intalling

Turns out the solution was to split my background image into 2. One for "above the fold"(Whats visible without scrolling) and one for "below the fold". I also found this image compressor website to be one of the most helpful and straight forward when it came to reducing my file size.

I then created an absolutely positioned div which looked like