bigSur npx创建react应用出的错

lambert@lantiandeMacBook-Air resources % npx create-react-app web-root

Creating a new React app in /Users/lambert/IdeaProjects/springMvc/web/WEB-INF/resources/web-root.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

npm ERR! code 1
npm ERR! path /Users/lambert/IdeaProjects/springMvc/web/WEB-INF/resources/web-root/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-gyp rebuild
npm ERR! /bin/sh: pkg-config: command not found
npm ERR! gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 127 while in binding.gyp. while trying to load binding.gyp
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1
npm ERR! gyp ERR! stack     at ChildProcess.onCpExit (/Users/lambert/IdeaProjects/springMvc/web/WEB-INF/resources/web-root/node_modules/node-gyp/lib/configure.js:351:16)
npm ERR! gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12)
npm ERR! gyp ERR! System Darwin 20.5.0
npm ERR! gyp ERR! command "/usr/local/bin/node" "/Users/lambert/IdeaProjects/springMvc/web/WEB-INF/resources/web-root/node_modules/.bin/node-gyp" "rebuild"
npm ERR! gyp ERR! cwd /Users/lambert/IdeaProjects/springMvc/web/WEB-INF/resources/web-root/node_modules/canvas
npm ERR! gyp ERR! node -v v14.16.1
npm ERR! gyp ERR! node-gyp -v v7.1.2
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/lambert/.npm/_logs/2021-06-04T01_25_43_962Z-debug.log

Aborting installation.
  npm install --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed.

Deleting generated file... package.json
Deleting web-root/ from /Users/lambert/IdeaProjects/springMvc/web/WEB-INF/resources
Done.

解决办法：
brew install pkg-config cairo libpng jpeg giflib
尝试了此方法无效！

出现此错误的原因更新系统...
参见原文链接