create react app error

[ischaojie]

Hi, this's my first learn react, when I exec npx create-react-app frontend，get some error：

npm ERR! code 1
npm ERR! path /Users/zhezhezhu/projects/baozheng/frontend/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-gyp rebuild
npm ERR! Package zlib was not found in the pkg-config search path.
npm ERR! Perhaps you should add the directory containing `zlib.pc'
npm ERR! to the PKG_CONFIG_PATH environment variable
npm ERR! Package 'zlib', required by 'libpng', not found
npm ERR! gyp: Call to 'pkg-config libpng --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/zhezhezhu/projects/baozheng/frontend/node_modules/node-gyp/lib/configure.js:345:16)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:376:20)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:284:12)
npm ERR! gyp ERR! System Darwin 20.2.0
npm ERR! gyp ERR! command "/opt/homebrew/Cellar/node/15.5.1/bin/node" "/Users/zhezhezhu/projects/baozheng/frontend/node_modules/.bin/node-gyp" "rebuild"
npm ERR! gyp ERR! cwd /Users/zhezhezhu/projects/baozheng/frontend/node_modules/canvas
npm ERR! gyp ERR! node -v v15.5.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/zhezhezhu/.npm/_logs/2021-01-14T07_35_10_508Z-debug.log

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

Deleting generated file... node_modules
Deleting generated file... package.json
Deleting frontend/ from /Users/zhezhezhu/projects/baozheng
Done.
npm ERR! code 1
npm ERR! path /Users/zhezhezhu/projects/baozheng
npm ERR! command failed
npm ERR! command sh -c create-react-app frontend

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/zhezhezhu/.npm/_logs/2021-01-14T07_36_00_234Z-debug.log

what should I do?

[ischaojie]

That's mean I should install canvas first?

[ischaojie]

I solved it !!!

first:

brew install zlib expat

and then add config to .zshrc:

export PKG_CONFIG_PATH="$PKG_CONFIG_PATH:/opt/homebrew/opt/zlib/lib/pkgconfig:/opt/homebrew/opt/expat/lib/pkgconfig"

[EugeneGohh]

My error was : npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\SHILPA\AppData\Roaming\npm-cache_logs\2020-12-28T22_23_22_383Z-debug.log

Solution:

1. Delete your npm and npm-cache from your Roaming directory or any where it is present
2. Then go to your vs code or terminal and be on the folder which you are creating the project like (my app). Enter this command npm
   install npm@latest -g
3. and now run npx create-react-app ./ OR npx create-react-app my-app

Happy Hacking!!!!!