Strange Deployment Problem

I am staging a website in progress for a client. The site is built using Gatsby on the Frontend and Sanity on the backend. The site first appears without any styling or assets. However, when you scroll down and click the ‘Get In Touch’ button (which links to /success page) and then return back to the website, everything (images, text, styling, etc.) reads perfectly. I can’t figure out what’s happening.

The site is a single-page application and I’m querying all of the data using GraphQL. I’m making ‘StaticQueries’ for each component(? - no page queries). Could that be it? The website appears perfectly in development and on my local server. I’m stuck trying to troubleshoot.

site URL:

This is what I seen on initial page load. Is it what you are expecting?

2 Likes

Hi coelmay. I figured out the problem. I was missing a dependency, but there was no error being thrown so it took me a while to figure it out. I use ‘Styled-Components’ when working with React (Gatsby, Next, etc) and I didn’t know/realize Gatsby requires an additional plugin (gatsby-plugin-styled-components) to use it.

Thanks for your response. Much appreciated :slight_smile:

Thank you so much for coming back and letting us know, @jmischka :netliconfetti: This will be beneficial for any future Forums members who encounter something similar.

1 Like

Thanks, hillary. I should’ve also added… Make sure you also include the plugin in your gatsby-config.js file. :slight_smile:

1 Like