I had a really interesting debugging experience last night so I thought I'd share
On gatsby@4.4 + gatsby-plugin-image@2.4 + Netlify (may not matter) I noticed that I was not able to see GatsbyImage components under these specific circumstances:
- only on initial load (hitting a nav button rendered the images)
- only on desktop and on Chrome
- only in prod (Images were loading perfectly in localhost after running
gatsby develop)
The issue for me was that when I migrated from v2 to v4 and swapped out gatsby-image to the recommended gatsby-plugin-image, I forgot to add it to gatsby-config. For whatever reason, using {GatsbyImage} from the newer gatsby-plugin-image does not throw any errors even if you don't add it to gatsby-config. Not only that, the dev preview in localhost will show images rendering perfectly.
To make things even more confusing, {StaticImage} appears to NOT work if the plugin is not loaded in config and Gatsby will correctly tell you that something is wrong.
Anyways, my takeaway is.. always check that all plugins are added to config because in certain cases there is no error handling for that. And always check out dev AND prod builds before pushing code!