konstantinmuenster / gatsby-theme-portfolio-minimal

A Gatsby Theme to create modern one-page portfolios with a clean yet expressive design.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.

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 👍

c9f47c5