search
LoginSignup
0

More than 1 year has passed since last update.

posted at

updated at

【Gatsby.js】対処しよう、「Error: Input file contains unsupported image format」に

概要

  • Gatsby を Netlify で build した時に出たエラーが出る
  • Error: Input file contains unsupported image format
  • なんかパッケージを全部バージョンアップしたら治った

トラブルシューティング

Error: Input file contains unsupported image format, gatsby - Support - Netlify Community

によると、以下の文言がありました。

I tried to the suggetion but it doesn`t work.
I think I mistook maybe.
But I fixed it this followings:
Find old version for sharp: npm list sharp
Upgrade version dependencies that uses old sharp version.

やんわり翻訳すると 「Sharp のバージョンが古いからだめなんじゃね?」 ということらしいです、やんわりすぎる。

教示されたやり方でパッケージを確認したら、確かに古いパッケージが見つかりました。

terminal
$ npm list sharp
gatsby-starter-blog@0.1.0 ~
├─┬ gatsby-plugin-manifest@2.6.1
│ └── sharp@0.25.4
├─┬ gatsby-plugin-sharp@2.14.0
│ └── sharp@0.27.1
└─┬ gatsby-transformer-sharp@2.12.0
  └── sharp@0.27.1

じゃあこれをアップデートしたら治るんじゃね!?

…どうやって? (Python以外の能がない男)

というわけで

パッケージを全部最新にしてみたらうまくいきました。

terminal
# ncuを使えるようにする
$ npm install -g npm-check-updates

# プロジェクトフォルダーに移動
$ cd ~

# バージョンのチェック
$ ncu
Upgrading ~/package.json
[====================] 29/29 100%

 gatsby                            ^2.32.0  →  ^2.32.3
 gatsby-plugin-feed                 ^2.7.0  →  ^2.13.0
 gatsby-plugin-manifest             ^2.6.1  →  ^2.12.0
 gatsby-plugin-offline              ^3.4.0  →  ^3.10.0
 gatsby-plugin-react-helmet         ^3.4.0  →  ^3.10.0
 gatsby-plugin-sharp               ^2.14.0  →  ^2.14.1
 gatsby-remark-copy-linked-files    ^2.4.0  →  ^2.10.0
 gatsby-remark-images               ^3.5.1  →  ^3.11.0
 gatsby-remark-responsive-iframe    ^2.5.0  →  ^2.11.0
 gatsby-remark-smartypants          ^2.4.0  →  ^2.10.0
 gatsby-transformer-remark         ^2.10.0  →  ^2.16.0
 react                            ^16.12.0  →  ^17.0.1
 react-dom                        ^16.12.0  →  ^17.0.1
 react-helmet                       ^5.2.1  →   ^6.1.0
 typeface-merriweather              0.0.72  →   1.1.13
 typeface-montserrat                0.0.75  →   1.1.13

Run ncu -u to upgrade package.json

# 更新かける
$ ncu -u
省略
Run npm install to install new versions.

$ npm install
省略

$ ncu
Checking ~/package.json
[====================] 29/29 100%

All dependencies match the latest package versions :)

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0