Gatsby: What could cause this weird gatsby build issue

[Cobwebster]

So I have this issue which is explained HERE but here is a TLDR..

If you go to my gatsby built site, you'll notice the homepage image has weird styling. https://www.craftmc.net/ when you hover over some of the navbar items (eg. login) I guess it triggers a update and grabs 4 more files which fixes the styles. (this can be seen on chromes network tool)

Not sure why gatsby wouldn't build with those files since I'm using inline style to position the image.

This does not happen when I'm using gatsby develop on localhost:8000 Does the fact that I fail to get a 144 icon file on my hosted site but on localhost it files that file? surely it failing to grab a file wouldn't cause it to hang or lose focus on what it needs to render.

I've tried a lot, just looking for things I could look into to fix. I use materialize-css for styling. Any help is appreciated.

*UPDATE

It also occurs on gatsby develop

[jonniebigodes]

@Cobwebster This is a hydration issue, gatsby sets up the page as instructed, generates the files required during the build process and when you hit the endpoint, the content of the page is hydrated back to you/client and then it starts downloading the files. One way to circumvent this is to host what you can locally, more on that here . Just a heads up, be wary of jquery as you might run into issues. Depending on the components needed by materialize you might not actually need it at all

[Cobwebster]

@Cobwebster This is a hydration issue, gatsby sets up the page as instructed, generates the files required during the build process and when you hit the endpoint, the content of the page is hydrated back to you/client and then it starts downloading the files. One way to circumvent this is to host what you can locally, more on that here . Just a heads up, be wary of jquery as you might run into issues. Depending on the components needed by materialize you might not actually need it at all

Thank you for the explanation, do you know why the build tool wouldn't export inline CSS in the component page? It seems weird it would remove it and put it in a file it doesn't see as required. I think there might be more going on.

[Cobwebster]

Going off your reply I decided to remove all stylesheet imports off the index.html file, this has fixed my issue. I'm guessing it was importing it twice?

Anyways, ty for your insight. Helped me do some debugging.

[jonniebigodes]

@Cobwebster glad i could be of assistance, regarding your other comment, without seeing actual code, the only reason i can come up of the top of my head is that you have a inlinestyle and a classname in the element and with that the classname takes precedence.