Project builds locally but get "WebpackError: TypeError: Cannot read property 'childImageSharp' of null" with Netlify

Support
, , ,
1

I’m having issues deploying my gatsby site. I can build locally with no errors but when I go to deploy I get a “Cannot read property ‘childImageSharp’ of null” error. I’ve tried clearing the cache and no luck. I’m assuming it is some sort of settings or file structure issue with gatsby image but not really sure.

site name: stonestrategydesign.netlify.app

error message:
3:24:04 PM: success Building production JavaScript and CSS bundles - 24.971s
3:24:05 PM: success Rewriting compilation hashes - 0.001s
3:24:07 PM: success run queries - 38.054s - 22/22 0.58/s
3:25:42 PM: failed Building static HTML for pages - 4.054s
3:25:42 PM: error Building static HTML failed for path “/kotatsu/”
3:25:42 PM: 184 |


3:25:42 PM: 185 | <Img
3:25:42 PM: > 186 | fluid={data.Kotatsu_Statement.childImageSharp.fluid}
3:25:42 PM: | ^
3:25:42 PM: 187 | className=“equal-column”
3:25:42 PM: 188 | />
3:25:42 PM: 189 | <Img
3:25:42 PM:
3:25:42 PM: WebpackError: TypeError: Cannot read property ‘childImageSharp’ of null
3:25:42 PM:
3:25:42 PM: - kotatsu.js:186 Kotatsu
3:25:42 PM: src/pages/kotatsu.js:186:45
3:25:42 PM:
3:25:42 PM:
3:25:42 PM: not finished Generating image thumbnails - 132.832s

build

Screen Shot 2020-05-07 at 3.54.22 PM
Screen Shot 2020-05-07 at 3.54.22 PM904×641 64.7 KB
settings

2

hmm, thats an unusual error.

When things build locally but not on netlify, often, case sensitivity is the cause:

does that apply here?

3

Thanks for this message!

I thought the issue was coming from the Gatsby build.
Finally, the issue came from a locally renamed image but not in the GitHub repository…

2 Likes