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

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, reopen iterm Use sudo yarn add xxx to complete the installation, but the above problems will still occur next time, you can only install libpng repeatedly! It ’s bad!

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

[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.

[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

gatsby-starter-default@0.1.0
└─┬ gatsby-plugin-sharp@2.6.1
  └─┬ imagemin-pngquant@6.0.1
    └── pngquant-bin@5.0.2

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 using npm 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.