Gatsby: `yarn add xxxx` error "pngquant pre-build test failed"

[Chad97]

os: MacOS 10.15.2

• Every time I install the package, I get the error pngquant pre-build test failed, macOS cannot install "libpng-dev", only "libpng"
  
  

  > 每次安装包裹，都会出现 pngquant pre-build test failed 这个错误，macOS 无法安装 "libpng-dev", 只有“libpng”

Is there a stable solution?

有稳定的解决方案吗？

• The result of my attempt
  > 我尝试的结果

brew install libpng Install once, reopeniterm Use sudo yarn add xxx to complete the installation, but the above problems will still occur next time, you can only installlibpng repeatedly! It ’s bad!

brew install libpng 安装一次，重新打开 iterm 使用 sudo yarn add xxx 可以完成安装，但是下次安装还是会出现以上问题，只能反复的安装 libpng 很糟糕！

[sidharthachatterjee]

Hey @Chad97

What version of Node are you using?
您正在使用哪个版本的Node？

Can you link to the repository by any chance?
您可以随时链接到存储库吗？

(Apologies if my Chinese is incorrect, using Google Translate)
抱歉，如果我的中文不正确，请使用Google翻译

[Chad97]

node: 10.16.3

I can link to repository, use is China's repository

This problem will occasionally occur

Your chinese nice ！

[sidharthachatterjee]

Please link me to the repository. I'll take a look and try to reproduce the issue!
请将我链接到资源库。我会看一下并尝试重现该问题！

Your chinese nice ！

Thank you so much, my friend.
非常感谢你我的朋友。

[Chad97]

yarn origin yarn origin

my project my project

[sidharthachatterjee]

I tried your project and the yarn origin you posted. And it seemed to work fine for me.
尝试了您的项目以及您发布的纱线来源。它对我来说似乎很好。

Looks like you might not have libpng
看来您可能没有libpng

Can you try installing that via brew install libpng and then trying to install dependencies via yarn again?
您可以尝试通过“ brew install libpng”安装，然后再次尝试通过“ yarn”安装依赖项吗？

[Chad97]

At present, this problem does not appear. Occasionally it appears when initializing "Gatsby". It can be solved by "brew install lippng".

Feel very much to you, my friend.

[lastingman]

After I installed libpng, this issue still occurs.

> yarn
yarn install v1.22.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "gatsby > [email protected]" has unmet peer dependency "@types/react@^15.0.0 || ^16.0.0".
warning "gatsby > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning "gatsby > gatsby-cli > [email protected]" has unmet peer dependency "@types/react@>=16.8.0".
[4/4] 🔨  Building fresh packages...
[6/10] ⠠ sharp
[-/10] ⠠ waiting...
[7/10] ⠠ mozjpeg
[9/10] ⠠ pngquant-bin
error /Users/like/repo/work/arc/docs/node_modules/pngquant-bin: Command failed.
Exit code: 1
Command: node lib/install.js
Arguments:
Directory: /Users/like/repo/work/arc/docs/node_modules/pngquant-bin
Output:
⚠ connect ECONNREFUSED 151.101.228.133:443
  ⚠ pngquant pre-build test failed
  ℹ compiling from source
  ✖ Error: pngquant failed to build, make sure that libpng is installed

> brew list
boost           htop            ncurses         shadowsocks-libev
c-ares          icu4c           nvm         sqlite
cmake           libev           [email protected]     telnet
coreutils       libpng          pcre            trojan
gdbm            libsodium       pcre2           v2ray-core
gettext         mbedtls         python          watchman
git         mercurial       readline        xz

> gatsby info

  System:
    OS: macOS 10.15.3
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.14.0 - ~/.nvm/versions/node/v12.14.0/bin/node
    Yarn: 1.22.0 - ~/.nvm/versions/node/v12.14.0/bin/yarn
    npm: 6.14.1 - ~/.nvm/versions/node/v12.14.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 80.0.3987.122
    Safari: 13.0.5
  npmPackages:
    gatsby: ^2.19.7 => 2.19.7
    gatsby-image: ^2.2.39 => 2.2.39
    gatsby-plugin-manifest: ^2.2.39 => 2.2.39
    gatsby-plugin-offline: ^3.0.32 => 3.0.32
    gatsby-plugin-react-helmet: ^3.1.21 => 3.1.21
    gatsby-plugin-sharp: ^2.4.3 => 2.4.3
    gatsby-source-filesystem: ^2.1.46 => 2.1.46
    gatsby-transformer-sharp: ^2.3.13 => 2.3.13
  npmGlobalPackages:
    gatsby-cli: 2.10.0

[Chad97]

@lastingman 删除 node_modules 然后 yarn 试一下

[runningIris]

@Chad97 Problem is not solved, still presents

⚠ connect ECONNREFUSED 151.101.228.133:443
  ⚠ pngquant pre-build test failed
  ℹ compiling from source
  ✖ Error: pngquant failed to build, make sure that libpng is installed

I figured that is because the great wall is blocking, so I set proxy to npm, but it doesn't work. The error message becomes tunneling socket could not be established, cause=Parse Error because of the proxy config.

[guaputao]

how to solve it ,this problem occured when I yarn install

[XYShaoKang]

中文

The following content is generated by Google Translate, if there are any errors, please let me know

Reason:

The reason is that the default site generated by Gatsby depends on a package pngquant-bin

[email protected]
└─┬ [email protected]
  └─┬ [email protected]
    └── [email protected]

pngquant-bin will go toraw.githubusercontent.com to download the corresponding binary file according to different platforms.When the download fails, it will start to compile and generate the binary file from the source code.

raw.githubusercontent.com is blocked in China, When we don't have an environment that can compile pngquant-bin, the installation fails.

Usually we can configure HTTP_PROXY to allow terminal programs to access the blocked network through a proxy.

pngquant-bin is used to download the dependent package isbin-wrapper -> download -> got. Finally, the file is downloaded via got

However, got does not support the use of environment variables to set the proxy. For example, we often use the value of HTTP_PROXY to set the proxy, which has no effect on got.

got can only set the agent manually when using the package, or use theglobal-agent method to deal with it. Unfortunately, when installing pngquant-bin, I have not found a place where these two methods can be used. If anyone knows, can tell me.

Solution:

There is a fix in imagemin/pngquant-bin#110 , which can make the download address of bin configurable, but it seems not smooth

After @Renchongyi's reminder, I found that I was wrong. You can set the proxy by setting HTTP_PROXY or usingnpm config set proxy, but it must be a proxy of the http protocol.

Supported proxy configuration

1. (Valid as a temporary solution) If you use yarn, after the first installation fails, find npm-pngquant-bin-5.0.2-6f34f3e89c9722a72bbc509062b40f1b17cda460-integrity/node_modules/pngquant-bin/lib/index.js in the yarn cache, Modify the download source url, modify raw.githubusercontent.com/imagemin to npm.taobao.org/mirrors, and then reinstall it. Use yarn cache dir to print out the location of yarn cache.
2. Use a global proxy or VPN, or use software like Proxifier to specifically proxy traffic in node.
3. If there is a private server similar to Nexus in the LAN, directly clone pngquant-bin, modify the download source, and publish it to the private server.
4. You can configure the compilation environment so that pngquant-bin can be generated by compilation, but this is not my expertise, so I can't provide more suggestions.

[AboyL]

You can try to rebuild locally,see:
https://pngquant.org/install.html

[Chad97]

libpng is the devil

I tried vpn,reset libpng and this the above approach ⬆️

This problem occurs again

[yinyimingall]

I meet the same problem. But I have been yarn it successful.
I will be sharing my experience below.
I install libpng on my mac. then yarn, It still errors.
So I view https://pngquant.org/install.html and try to install pngquant. But it makes errors.

So I brew install pkg-config, then I yarn, it works!
Actually, It makes errors, Because some dependencies missed.

[creasyimm]

I meet the same problem. But I have been yarn it successful.
I will be sharing my experience below.
I install libpng on my mac. then yarn, It still errors.
So I view https://pngquant.org/install.html and try to install pngquant. But it makes errors.

So I brew install pkg-config, then I yarn, it works!
Actually, It makes errors, Because some dependencies missed.

Great！
”brew install pkg-config“ works！