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

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.

中文

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.

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.

Step1: Find out yarn cache folder ( I was using yarn) by using $yarn cache dir

Step2: Go to “/Users/yourname/Library/Caches/Yarn/v6” and find the “npm-pngquant-bin…” folder and find “…/npm-pngquant-bin-6.0.0-aff0d7e61095feb96ced379ad8c7294ad3dd1712-integrity/node_modules/pngquant-bin/lib/index.js”

Step3: open above index file and change raw.githubusercontent.com/imagemin to npm.taobao.org/mirrors Step4: success!

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！