node_modules/canvas npm ERR! command failed

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

npm ERR! code 1
npm ERR! path /Users/Tutorial/my-react-project/my-react-app/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c -- node-gyp rebuild
npm ERR! Package pixman-1 was not found in the pkg-config search path.
npm ERR! Perhaps you should add the directory containing `pixman-1.pc'
npm ERR! to the PKG_CONFIG_PATH environment variable
npm ERR! No package 'pixman-1' found
npm ERR! gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 1 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/Tutorial/my-react-project/my-react-app/node_modules/node-gyp/lib/configure.js:259:16)

如果使用create-react-app创建项目的时候报上面的错，可能是确认了一下环境依赖，

可以尝试下面表格里面的方法。

npm ERR! gyp ERR! cwd /Users/Tutorial/my-react-project/my-react-app/node_modules/canvas
npm ERR! gyp ERR! node -v v16.14.2
npm ERR! gyp ERR! node-gyp -v v8.4.1
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/.npm/_logs/2022-11-15T02_01_43_860Z-debug-0.log