Build failing with TypeError: Cannot read properties of null (reading 'childImageSharp')
arjundhanjal opened this issue · comments
I'm trying to build my site for the first time and I'm encountering this error when I try to build:
failed Building static HTML for pages - 2.783s
ERROR #95313 HTML.COMPILATION
Building static HTML failed for path "/blog/brand-new-look-same-great-arjun/"
See our docs page for more info on this error: https://gatsby.dev/debug-html
8 | return (
9 | <div className={classes.AuthorSnippet}>
> 10 | <GatsbyImage image={avatar.childImageSharp.gatsbyImageData} alt={author} className={classes.Avatar} />
| ^
11 | <div className={classes.Description}>
12 | <span className={classes.WrittenBy}>
13 | Written By <u>{author}</u>
WebpackError: TypeError: Cannot read properties of null (reading 'childImageSharp')
- index.tsx:10
[gatsby-starter-portfolio-minimal-theme]/[gatsby-theme-portfolio-minimal]/src/components/AuthorSnippet/index.tsx:10:40
- linkedin.js:33
[gatsby-starter-portfolio-minimal-theme]/[gatsby-plugin-gdpr-cookies]/services/linkedin.js:33:12
- TemplateTag.js:18
[gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:18:44
- TemplateTag.js:24
[gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:24:1
- TemplateTag.js:27
[gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:27:1
- TemplateTag.js:19
[gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:19:1
- TemplateTag.js:24
[gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:24:1
- TemplateTag.js:27
[gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:27:1
- TemplateTag.js:24
[gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:24:1
- TemplateTag.js:27
[gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:27:1
- TemplateTag.js:19
[gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:19:1
- TemplateTag.js:24
[gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:24:1
- TemplateTag.js:27
[gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:27:1
- TemplateTag.js:19
[gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:19:1
- TemplateTag.js:24
[gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:24:1
The build completes successfully if I omit the articles
folder. I suspect I'm getting the filepath wrong for the avatar. I've tried many different ones but I just can't get it to work.
Any ideas here? Happy to provide more information if needed.
Hi @arjundhanjal !
Did you try to set the same avatar path as in the example-site
project?
Ugh, now I'm embarrassed. I did use the path from the settings.json file but I had my file extension wrong (was using headshot.png
when it should have been headshot.jpg
).
At any rate, it might be helpful to wrap this in some kind of condition so that it compiles successfully even if it can't find the avatar (something like this, perhaps).
Good point! I added a fix 👍