Gatsby Build fails on netlify for website with many images - WebpackError: TypeError: Cannot read property 'childImageSharp' of null

Hello,

I have a gatsby website with a lot of images hosted in contentful and wordpress. For almost a year I have been dealing with the issue that randomly sometimes the build breaks complaining about missing images with this error WebpackError: TypeError: Cannot read property 'childImageSharp' of null.

I am aware that gatsby is using sharp and file system + contentful and wordpress plugins to fetch and transform the images, my question is why this is happening and only in netlify environment. If I build my website using gatsby cloud, local computer or any other cloud container the build happens successfully. I am considering in using netlify only to upload the website instead also building it.

I searched a large amount of blog posts about this subject but didn’t find any solution for that. I’ve already try to set the GATSBY_CONCCURENT_DOWNLOAD to a lower number as the default value is 200.

Lately I have to trigger almost 10 builds to get one successfully, so I was wondering if anyone is facing the same problem. Thanks

Here is the gatsby versions I am using:

 "gatsby": "2.21.37",
"gatsby-background-image": "1.1.1",
"gatsby-image": "2.4.4",
"gatsby-paginate": "1.1.1",
"gatsby-plugin-breadcrumb": "9.0.3",
"gatsby-plugin-brotli": "1.3.1",
"gatsby-plugin-canonical-urls": "2.3.1",
"gatsby-plugin-catch-links": "2.3.1",
"gatsby-plugin-facebook-pixel": "1.0.3",
"gatsby-plugin-favicon": "3.1.6",
"gatsby-plugin-google-tagmanager": "2.3.1",
"gatsby-plugin-layout": "1.3.1",
"gatsby-plugin-manifest": "2.4.5",
"gatsby-plugin-netlify": "2.3.2",
"gatsby-plugin-nprogress": "2.3.1",
"gatsby-plugin-offline": "3.2.3",
"gatsby-plugin-polyfill-io": "1.1.0",
"gatsby-plugin-preload-fonts": "1.2.3",
"gatsby-plugin-react-helmet": "3.3.1",
"gatsby-plugin-react-helmet-canonical-urls": "1.4.0",
"gatsby-plugin-remove-serviceworker": "1.0.0",
"gatsby-plugin-remove-trailing-slashes": "2.3.2",
"gatsby-plugin-robots-txt": "1.5.0",
"gatsby-plugin-sass": "2.3.1",
"gatsby-plugin-sharp": "2.6.4",
"gatsby-plugin-sitemap": "2.4.2",
"gatsby-plugin-smoothscroll": "1.1.0",
"gatsby-plugin-styled-components": "^3.3.10",
"gatsby-plugin-svg-sprite": "2.0.1",
"gatsby-plugin-transitions": "2.1.6",
"gatsby-remark-images": "3.3.4",
"gatsby-remark-relative-images": "0.2.3",
"gatsby-source-contentful": "2.3.49",
"gatsby-source-facebook": "1.0.3",
"gatsby-source-filesystem": "2.3.32",
"gatsby-source-wordpress": "3.3.4",
"gatsby-transformer-sharp": "2.5.2",

hey there,

I think i have seen this error before:

If its not case, the thing i would check first is your dependencies, some of which are a little out of date. The current version of gatsby is 2.24.67 for example, and https://www.npmjs.com/package/gatsby-transformer-sharp shows that that package is also a little out of date.

The best workflow is to upgrade your dependencies locally, make extra sure you have a working configuration, commit your package-lock file so that we get the exact same packages when you deploy - right down to minor version numbers, and then clear cache & redeploy.

let us know if that helps (or not)

Hey @perry,

I have updated all plugins and gatsby version but still have the problem. I have tried so many things and this problem never goes away. I am consider moving the build process somewhere else and using netlify only to host the zipped file content.

The content creators are always having this error randomly and I have tried so many things as updating all libraries, change the concurrent download images quota, etc, but none of them seems to get the error away.

Is really tricky because sometimes the build is successful and then it fails. I am getting a lot of pressure from content creators at the moment as they can’t trigger and get build successfully.

I will keep you posted on this one but will consider moving to gatsby cloud (I never had this error on gatbsy cloud) or build up a container to do the build and send the zip file to netlify to be deployed.

Thanks for your help, but I have no ideas on what else I can do to solve this (I have been getting this error for a longtime but never had time to investigate it).

An important detail is that my websites have a lot of images 3000 +, and some of them take like 12 minutes to build.

Appreciate your attention!

hmm, that is frustrating! can you post your most recent package.json please?

i hear you that you are under pressure to make this work - i’m happy to keep troubleshooting for you!

I did some googling and it seems this is a really common Gatsby error with a longstanding history - which isn’t all that helpful, i know - it seems like the gatsby folks have been fixing this bug in a couple of different versions for some time now:

After reading a few threads on this i have a hunch that the reason this is only happening on netlify is because something is different between the way our system is handling loading the images and the way the servers of gatsby cloud are handling loading.

This error does seem to occur when, for some weird reason, the system can’t find the files specified :thinking:

If some strange renaming is going on, that would explain why this error only occurs sometimes.

Is there any way to pinpoint which image this is breaking on?

the reason why is that I’m wondering whether this is actually secretly a case issue. Is it possible that some images are uppercase in name, or have some special characters in their name?

This was also the problem here:

more details on that here:

past that - I’m not sure if i can really offer too much more assistance to be very honest. This is obviously occurring on our platform, but, at the same time, i think this is a definite gatsby issue.

You might seek them out to see if they have suggestions (which might be “use gatsby cloud!”, which, if you are in a pinch, is a legitimate option, but i wonder whether that workaround is obscuring a more deepseated issue with your files)

Sorry I can’t be a lot more helpful at this time!

Hello @perry!

You are being super helpfull! Thank you very much for your reply.

In my case all images are hosted on contentful and it’s random when build fails, I was just trying to build the website and the build failed 3 times with 3 different times :frowning:

I have seen those posts and also suspect that it’s not related 100% with netlify, but I spent already too much time trying to figure it out, but will definitely investigate deeper the issue over the next weekend.

Thank you very much and I will post here if I find anything usefull. In the meantime I have switch one of the 3 websites to gatsby cloud and got around 30 builds successfully.

Before moving all the others to gatsby cloud (I am not sure yet specially because $$cost reasons, I will definitely try to find a workaround to fix it in netlify environment).

Thank you again, you have been absolutely helpful!

Cheers

Hey @meddev,

Just a few things to bear in mind:

  • Make sure you’re comparing apples with apples. If you have different dependencies/assets/et cetera, then that can and could cause different build output and success
  • I’ve seen this a few times in the Helpdesk over the past month or so; in these cases, dependencies had been updated and resulted in content being unobtainable (previously working images, etc).

Hope things are working :+1:.