Cannot install via npm

[gulsahkasdogan]

For usage npm install react-image-annotate is provided but is not working. I have tried several methods to fix the issue, tried to install canvas separately by following their guidelines but encountered different errors.
Unfortunately I could not understand the root cause of the problem, any help appreciated.
Thanks

Error log:

npm ERR! code 1
npm ERR! path /Users/gulsahkasdogan/projects/image-annotation-project/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-gyp rebuild
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp info find Python using Python version 3.8.2 found at "/Library/Developer/CommandLineTools/usr/bin/python3"
npm ERR! gyp info spawn /Library/Developer/CommandLineTools/usr/bin/python3
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/Users/gulsahkasdogan/projects/image-annotation-project/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args   'binding.gyp',
npm ERR! gyp info spawn args   '-f',
npm ERR! gyp info spawn args   'make',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/gulsahkasdogan/projects/image-annotation-project/node_modules/canvas/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/gulsahkasdogan/projects/image-annotation-project/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/gulsahkasdogan/Library/Caches/node-gyp/16.13.0/include/node/common.gypi',
npm ERR! gyp info spawn args   '-Dlibrary=shared_library',
npm ERR! gyp info spawn args   '-Dvisibility=default',
npm ERR! gyp info spawn args   '-Dnode_root_dir=/Users/gulsahkasdogan/Library/Caches/node-gyp/16.13.0',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/Users/gulsahkasdogan/projects/image-annotation-project/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/Users/gulsahkasdogan/Library/Caches/node-gyp/16.13.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/Users/gulsahkasdogan/projects/image-annotation-project/node_modules/canvas',
npm ERR! gyp info spawn args   '-Dnode_engine=v8',
npm ERR! gyp info spawn args   '--depth=.',
npm ERR! gyp info spawn args   '--no-parallel',
npm ERR! gyp info spawn args   '--generator-output',
npm ERR! gyp info spawn args   'build',
npm ERR! gyp info spawn args   '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! ./util/has_lib.sh: line 35: pkg-config: command not found
npm ERR! gyp: Call to './util/has_lib.sh pango' returned exit status 0 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/gulsahkasdogan/projects/image-annotation-project/node_modules/node-gyp/lib/configure.js:259:16)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! System Darwin 20.6.0
npm ERR! gyp ERR! command "/usr/local/bin/node" "/Users/gulsahkasdogan/projects/image-annotation-project/node_modules/.bin/node-gyp" "rebuild"
npm ERR! gyp ERR! cwd /Users/gulsahkasdogan/projects/image-annotation-project/node_modules/canvas
npm ERR! gyp ERR! node -v v16.13.0
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/gulsahkasdogan/.npm/_logs/2021-12-06T07_43_24_817Z-debug.log

[salahCoone]

same problem

[parvussaku]

You can bypass the problem with the --legacy-peer-deps flair, but you'll be hit with a wall of error when trying to start the dev server.. 😅

[salahCoone]

use 'yarn add react-image-annotate' instead, worked for me

[oliversmudge]

use 'yarn add react-image-annotate' instead, worked for me

I got this issue after using yarn add - Do you know how to solve this issue? Thanks in advance

[jpmancini]

Is there any workaround to this problem if I have to install with npm?