CODEWITHSUNDEEP
reactjscreate-react-appnode-pre-gyp
Aria Geng
Aria Geng

Reputation: 11

create react project with create-react-app but error

I try to create a react demo with create-react-app but it always error, my node -v is 18.17.1 and it is mac m1, thanks for your help!

Creating a new React app in /Users/gengyinshan/gys/kwr-chrome-extension.

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/gengyinshan/gys/kwr-chrome-extension/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-pre-gyp install --fallback-to-build --update-binary
npm ERR! Failed to execute '/Users/gengyinshan/.nvm/versions/node/v18.17.1/bin/node /Users/gengyinshan/.nvm/versions/node/v18.17.1/lib/node_modules/npm/node_modules/@npmcli/run-script/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/gengyinshan/gys/kwr-chrome-extension/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/gengyinshan/gys/kwr-chrome-extension/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1)
npm ERR! node-pre-gyp ERR! install response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz 
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/gengyinshan/.nvm/versions/node/v18.17.1/lib/node_modules/npm/node_modules/@npmcli/run-script/node_modules/node-gyp/lib/configure.js:325:16)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:514:28)
npm ERR! gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:291:12)
npm ERR! gyp ERR! System Darwin 22.1.0
npm ERR! gyp ERR! command "/Users/gengyinshan/.nvm/versions/node/v18.17.1/bin/node" "/Users/gengyinshan/.nvm/versions/node/v18.17.1/lib/node_modules/npm/node_modules/@npmcli/run-script/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--update-binary" "--module=/Users/gengyinshan/gys/kwr-chrome-extension/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/gengyinshan/gys/kwr-chrome-extension/node_modules/canvas/build/Release" "--napi_version=9" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v108"
npm ERR! gyp ERR! cwd /Users/gengyinshan/gys/kwr-chrome-extension/node_modules/canvas
npm ERR! gyp ERR! node -v v18.17.1
npm ERR! gyp ERR! node-gyp -v v9.4.0
npm ERR! gyp ERR! not ok 
npm ERR! node-pre-gyp ERR! build error 
npm ERR! node-pre-gyp ERR! stack Error: Failed to execute '/Users/gengyinshan/.nvm/versions/node/v18.17.1/bin/node /Users/gengyinshan/.nvm/versions/node/v18.17.1/lib/node_modules/npm/node_modules/@npmcli/run-script/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/gengyinshan/gys/kwr-chrome-extension/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/gengyinshan/gys/kwr-chrome-extension/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/gengyinshan/gys/kwr-chrome-extension/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:514:28)
npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1091:16)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! node-pre-gyp ERR! System Darwin 22.1.0
npm ERR! node-pre-gyp ERR! command "/Users/gengyinshan/.nvm/versions/node/v18.17.1/bin/node" "/Users/gengyinshan/gys/kwr-chrome-extension/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
npm ERR! node-pre-gyp ERR! cwd /Users/gengyinshan/gys/kwr-chrome-extension/node_modules/canvas
npm ERR! node-pre-gyp ERR! node -v v18.17.1
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.11
npm ERR! node-pre-gyp ERR! not ok

npm ERR! A complete log of this run can be found in: /Users/gengyinshan/.npm/_logs/2023-09-25T22_49_47_655Z-debug-0.log

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

Deleting generated file... package.json
Deleting kwr-chrome-extension/ from /Users/gengyinshan/gys
Done.

I have try to change node version, npm cache clean --force and it still failed!

Upvotes: 0

Views: 95

Answers (1)

Iyo
Iyo

Reputation: 49

Based on the error message provided, it seems that the issue is related to the installation of the node-canvas package. Specifically, the error message mentions that the package pixman-1 was not found in the pkg-config search path, and that there was a call to 'pkg-config pixman-1 --libs' that returned an exit status of 1 while trying to load binding.gyp. This error message is similar to those reported here and here, which suggest that the issue may be related to the installation of dependencies such as pkg-config, cairo, pango, libpng, jpeg, giflib, and librsvg.

Since you're using a Mac M1, try this

brew install pkg-config cairo pango libpng jpeg giflib librsvg

Upvotes: 0

Related Questions