gatsby build 時の「WebpackError: TypeError: Cannot read property 'hoge' of undefined」対処法

概要

• gatsby build 時に WebpackError: TypeError: Cannot read property 'hoge' of undefined が発生
• hogeはプロパティ名
• Nelifyへのデブロイ時も発生
• gatsby develop では発生せず正常にbuildされる

対処法

エラーとなっているプロパティ（この場合はhoge）の前に?.を付け、?.hogeとすることで解消しました。

何をしようとしてエラーになったのか

Gatsby.jsでブログを作成している中で、以下のようなコードを書いていました。

  const data = useStaticQuery(graphql`
    query{
      allFile {
        nodes {
          name
          publicURL
        }
      }
    }  
  `)

  const eyecatch = data.allFile.nodes.find( file => file.name === category).publicURL // ここがエラー

アイキャッチ用の画像ファイルをカテゴリ名と同一名称で特定のディレクリに置いておき、そのpublicURLをGraphQLで取得するという処理です。
上記コードの中のプロパティpublicURLがgatsby buildでエラーになってしまっていました。

冒頭の通り、この部分を

const eyecatch = data.allFile.nodes.find( file => file.name === category)?.publicURL

とすることでエラーは解消しました。

?.とは何なのか

調べてみると、オプショナルチェイング演算子と呼ばれるものみたいです。

MDNによると、深い入れ子構造になったサブプロパティにアクセスする際は、各プロパティ間の参照を確認する必要があるとのこと。今回のコードで言うと、data.allFile.nodes内にfindでヒットした要素が存在することを確認した上で、publicURLを取得する必要があるようです。

これを暗黙的にやってくれるのが、オプショナルチェイング演算子です。

残った謎

なぜ、gatsby developではエラーが発生せず、gatsby buildのみ発生するのかが不明です…。