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

ruoduan-hub commented 4 years ago

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 commented 4 years ago

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翻译

ruoduan-hub commented 4 years ago

node: 10.16.3

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

This problem will occasionally occur

Your chinese nice ！

sidharthachatterjee commented 4 years ago

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. 非常感谢你我的朋友。

ruoduan-hub commented 4 years ago

yarn origin yarn origin

my project my project

sidharthachatterjee commented 4 years ago

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

Screenshot 2020-01-10 at 7 38 05 PM

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”安装依赖项吗？

ruoduan-hub commented 4 years ago

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.

ekil1100 commented 4 years ago

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 > react-hot-loader@4.12.19" has unmet peer dependency "@types/react@^15.0.0 || ^16.0.0".
warning "gatsby > @typescript-eslint/eslint-plugin > tsutils@3.17.1" 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 > ink@2.6.0" 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           openssl@1.1     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

ruoduan-hub commented 4 years ago

@lastingman 删除 node_modules 然后 yarn 试一下

runningIris commented 4 years ago

@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 commented 4 years ago

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

XYShaoKang commented 4 years ago

中文

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 usingnpm config set proxy, but it must be a proxy of the http protocol.

Supported proxy configuration

(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.
Use a global proxy or VPN, or use software like Proxifier to specifically proxy traffic in node.
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.
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 commented 4 years ago

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

ruoduan-hub commented 4 years ago

libpng is the devil

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

This problem occurs again

yinyimingall commented 4 years ago

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. 屏幕快照 2020-06-26 下午6 15 25 So I brew install pkg-config, then I yarn, it works! Actually, It makes errors, Because some dependencies missed.

creasyimm commented 3 years ago

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！

codeyourwayup commented 2 years ago

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!

BytefishMedium commented 2 years ago

Hi guys, I have met the same problem.

Problem

When I run yarn install on macOS, an error occurs:

Output:
⚠ connect ECONNREFUSED 0.0.0.0:443
  ⚠ pngquant pre-build test failed
  ℹ compiling from source
  ✖ Error: pngquant failed to build, make sure that libpng is installed
    at /Users/lishuai/GitHub/reactjs.org/node_modules/bin-build/node_modules/execa/index.js:231:11

It says I'm not installing libpng, but actually, I have installed it:

 $ brew list
==> Formulae
autoconf    libpng      m4

Solution

@ yinyimingall

His solution works!

brew install pkg-config

yuanguandong commented 1 year ago

brew install pkg-config it works , thanks my all friends

gatsbyjs / gatsby