Closed lesliecdubs closed 6 years ago
Hey @lesliecdubs , thanks for the issue writeup! Is there any way you could throw together a quick-n-dirty reproduction repo and paste a link here?
There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub issues, we have to clean some of the old issues as many of them have already been resolved with the latest updates.
Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍
I encountered a similar issue when pulling and transforming relatively large files from Wordpress. Small files would appear as expected, larger files would return null. Upgrading to v1.9.277 resolved the issue
Hi @lesliecdubs, can you try upgrading to v1.9.277 as @thedistricts suggested? That should fix the issue for you.
(If you disagree, feel free to re-open 😄 and we can look further)
Hi everyone, thanks for chiming in. I upgraded to v1.9.277 but the errors from the original post were still coming through.
Our "bandaid fix" has been working consistently and I know efforts are focused on v2 right now, so I'm fine leaving this issue closed. If I run into similar problems in v2 I'll be sure to report. Thanks!!
Thanks for the update @lesliecdubs!
Feel free to open a new one if you still experience this problem in v2👍
I've been getting this error frequently when querying ACF images from Wordpress. It happens suddenly with images that were loading fine previously. Seems to happen randomly after editing an arbitary piece of content in Wordpress. After rebuilding the error happens. Experienced in v1 and now v2.
@iaindurie can you open a new issue and provide relevant environment information and a reproduction repo?
@kakadiadarpan The Wordpress site I'm querying from isn't a publicly accessible site. I haven't seen this issue in a while, since clearing the cache folder and rebuidling. However If I stumble across it again, I'll create a new issue/repo and see if I can get my Wordpress site accessible too. Thanks.
Description
It seems that there may be a race condition where Gatsby tries to query images coming in from WordPress before the images have finished processing (using
gatsby-plugin-sharp
andgatsby-image
). Have confirmed that the image(s) in question exist in the Wordpress admin.The build succeeds, but then we get the in-browser error:
Uncaught TypeError: Cannot read property 'childImageSharp' of null
.Steps to reproduce
hero
field in WordPressGatsbyImageSharpSizes
with the fragment:Uncaught TypeError: Cannot read property 'childImageSharp' of null
. The error traces back to theguid
line in theHeroFragment
query. Printing out the value ofhero.guid.localFile.childImageSharp.hero
returnsnull
.Expected result
The query
hero.guid.localFile.childImageSharp.hero
should return the image object instead ofnull
.Actual result
Receive this error in the browser:
Uncaught TypeError: Cannot read property 'childImageSharp' of null
. Error traces back to theguid
line in theHeroFragment
query.Bandaid fix
To fix, we added a line to the query to capture the image
source_url
, then importedget
from lodash and updated the image var in our normalize function as follows:image: get(hero.image, 'guid.localFile.childImageSharp.hero', defaultImg(hero.image.guid.source_url))
It will now grab the
source_url
of the image if theguid
object returnsnull
, which is not the desired behavior but does stop the build from erroring in the browser.Environment
System: OS: macOS High Sierra 10.13.6 CPU: x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 8.9.1 - /usr/local/bin/node Yarn: 1.3.2 - /usr/local/bin/yarn npm: 5.5.1 - /usr/local/bin/npm Browsers: Chrome: 68.0.3440.106 Firefox: 61.0.1 Safari: 11.1.2 npmPackages: gatsby: ^1.9.270 => 1.9.277 gatsby-image: ^1.0.54 => 1.0.54 gatsby-link: ^1.6.39 => 1.6.46 gatsby-plugin-emotion: ^1.1.17 => 1.1.17 gatsby-plugin-netlify: ^1.0.21 => 1.0.21 gatsby-plugin-node-fields: ^1.0.0 => 0.0.6 gatsby-plugin-react-helmet: ^2.0.10 => 2.0.11 gatsby-plugin-react-svg: ^1.1.1 => 1.1.1 gatsby-plugin-sharp: ^1.6.48 => 1.6.48 gatsby-source-filesystem: ^1.5.39 => 1.5.39 gatsby-source-wordpress: ^2.0.93 => 2.0.93 gatsby-transformer-sharp: ^1.6.27 => 1.6.27 npmGlobalPackages: gatsby-cli: 1.1.50 gatsby: 0.12.28
File contents (if changed)
gatsby-config.js
:package.json
: