Gatsby-ImageからGatsby-plugin-imageへ移行した

2021年8月26日にメンテナンス済み

こんにちはリビットです。

当ブログはフレームワークとしてGatsby.jsを使用しているんですが、OSをクリーンインストールし、環境を再構築した後からうまくビルドが通らなくなってしまいました。

Cannot read property 'bitmap' of undefined

上記のエラーが出てしまい、開発環境をlocalhostで立ち上げられなくなりました。

エラーメッセージに"bitmap"とあることと、スタティッククエリの画像を取得する部分を削除すれば動いたことから、画像関係で問題がでていることはわかったんですが、Github上のいろんなissuesを読み漁ってみても解決できず…

幸いホスティングしているサーバー側のビルドはうまく動いていたようなので、稼働上の問題はなく、Dockerを使用すれば開発環境を立ち上げることもできたのでそのまま放置。

その後しばらくしてから、gatsby-imageからgatsby-plugin-imageへの移行が推奨されていることを知り、実際に移行してみたところビルドの問題を解決することができました。

今回はその顛末を備忘として残しておきます。

まず変更点をざっくり

このように記述していたものを、

import Img, { FluidObject } from 'gatsby-image';

...

<Img fluid={fluid} />

このように記述します。

import { GatsbyImage, IGatsbyImageData } from 'gatsby-plugin-image';

<GatsbyImage alt={alt} image={image} />

このように記述していたものを、

heroImage {
  fluid(maxWidth: 700) {
    ...GatsbyContentfulFluid_tracedSVG
  }
}

このように記述します。

heroImage {
  gatsbyImageData(width: 700, layout: FULL_WIDTH, placeholder: TRACED_SVG)
}

今回の移行に伴い、gatsby-imageを完全に使用しない形で運用が可能となるため、gatsby-imageは削除して問題ありません。

代わりにgatsby-plugin-imageを追加します。

npm i -D gatsby-plugin-image

npm uninstall gatsby-image

gatsby-imageはコード内で直接インポートして使用していましたが、gatsby-plugin-imageはgatsby-config.jsへ登録が必要となります。

  ...
  `gatsby-plugin-image`,
  `gatsby-plugin-sharp`,
  `gatsby-transformer-sharp`,
  ...

gatsby-imageを使った運用では、フォルダ内に直接保存されているような静的なコンテンツであっても、graphqlを使用してfluidもしくはfixedオブジェクトを取得する必要がありましたが、gatsby-plugin-imageではパスを指定するだけで画像データを取得することができます。

私の環境では、スタティッククエリですべてのファイルを取得するフックを用意しておいて、必要な時にそのフックを利用していましたが、その必要がなくなりました。

gatsby-plugin-imageへの移行に伴い、fluidオブジェクトは完全に廃止されたみたいです。

代替する方法として、前述のコードのように、graphqlのオプションに(layout: FULL_WIDTH)を指定します。

graphqlで指定できるオプションの一覧はこちらにあります。 Gatsby Image plugin

順次追記していきます。