Error: pngquant failed to build, make sure that libpng-dev is installedの解決方法

PCを買い替えたところ、GatsbyJSを動かす際にエラーが出るようになってしまいました。

出てきたエラーは下記の通り。

Error: pngquant failed to build, make sure that libpng-dev is installed

解決方法

解決方法はWindows-Build-Toolsを入れること。

npmだと下記コマンドで入れられます。

npm install --global windows-build-tools

yarnだと下記。

yarn global add windows-build-tools

Windows-Build-ToolsはPythonなどを動かすのに必要な開発環境とのこと。

そういえば前のPCにはPythonの環境を作っていたのを失念していました。

GatsbyJSがうまく動かないよ～という方は試してみてください。

追記：GatsbyJS公式の方法が最強だった

※2020/6/3 追記

ソフト管理周りを見直しているうちに、再び同じエラーが出るようになってしまいました。

しかも今度はwindows-build-toolsを再インストールしても解消しない…。

yarnをメインで使用しているのでで、Yarn で windows-build-tools がインストールできなかったを参考にいじってみましたが解決せず。

こういうときはGatsbyJS公式に頼ろう、ということでマニュアルを漁ったらばっちりな記述を見つけました。

Setting up your environment for building native Node.js modules

要約すると、PowerShellを管理者権限で起動して、下記コマンドを入力してね～ということ。

npm install --global windows-build-tools --vs2015

コマンドを実行する前に、下記実行しました。

• Pythonのアンインストール
• Visual Studio Installerのアンインストール
• yarn、npmのconfigからpythonのパス削除
• yarn、npmのconfigからmsvs_versionの削除
• C:\Users\<ユーザー名>の「.windows-build-tools」フォルダ削除

この状態でコマンド実行したらバッチリでした。

yarnでも問題なくGatsbyJSのビルド実行できています。