[macOS에 canvas 관련 에러가 발생할 때 해결하는 방법]
상황
기존에 macbook으로 작업하다가 다른 환경에서 imac으로 작업하게 되어 clone 받고 npm install하는 과정에서 다음과 같은 에러를 마주했다.
발생 error 코드
3622 error code 1
3623 error path /Users/iyeseul/Documents/yeaseul/neekoblog/node_modules/canvas
3624 error command failed
3625 error command sh -c node-pre-gyp install --fallback-to-build --update-binary
3626 error Failed to execute '/Users/iyeseul/.nvm/versions/node/v22.11.0/bin/node /Users/iyeseul/.nvm/versions/node/v22.11.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/iyeseul/Documents/yeaseul/neekoblog/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/iyeseul/Documents/yeaseul/neekoblog/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v127' (1)
3627 error node-pre-gyp info it worked if it ends with ok
3627 error node-pre-gyp info using node-pre-gyp@1.0.11
3627 error node-pre-gyp info using node@22.11.0 | darwin | x64
3627 error (node:95216) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
3627 error (Use `node --trace-deprecation ...` to show where the warning was created)
3627 error node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v127-darwin-unknown-x64.tar.gz
3627 error 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-v127-darwin-unknown-x64.tar.gz
3627 error node-pre-gyp WARN Pre-built binaries not installable for canvas@2.11.2 and node@22.11.0 (node-v127 ABI, unknown) (falling back to source compile with node-gyp)
3627 error node-pre-gyp WARN Hit error response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v127-darwin-unknown-x64.tar.gz
3627 error gyp info it worked if it ends with ok
3627 error gyp info using node-gyp@10.2.0
3627 error gyp info using node@22.11.0 | darwin | x64
3627 error gyp info ok
3627 error gyp info it worked if it ends with ok
3627 error gyp info using node-gyp@10.2.0
3627 error gyp info using node@22.11.0 | darwin | x64
3627 error gyp info find Python using Python version 3.9.6 found at "/Library/Developer/CommandLineTools/usr/bin/python3"
3627 error gyp info spawn /Library/Developer/CommandLineTools/usr/bin/python3
3627 error gyp info spawn args [
3627 error gyp info spawn args '/Users/iyeseul/.nvm/versions/node/v22.11.0/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
3627 error gyp info spawn args 'binding.gyp',
3627 error gyp info spawn args '-f',
3627 error gyp info spawn args 'make',
3627 error gyp info spawn args '-I',
3627 error gyp info spawn args '/Users/iyeseul/Documents/yeaseul/neekoblog/node_modules/canvas/build/config.gypi',
3627 error gyp info spawn args '-I',
3627 error gyp info spawn args '/Users/iyeseul/.nvm/versions/node/v22.11.0/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
3627 error gyp info spawn args '-I',
3627 error gyp info spawn args '/Users/iyeseul/Library/Caches/node-gyp/22.11.0/include/node/common.gypi',
3627 error gyp info spawn args '-Dlibrary=shared_library',
3627 error gyp info spawn args '-Dvisibility=default',
3627 error gyp info spawn args '-Dnode_root_dir=/Users/iyeseul/Library/Caches/node-gyp/22.11.0',
3627 error gyp info spawn args '-Dnode_gyp_dir=/Users/iyeseul/.nvm/versions/node/v22.11.0/lib/node_modules/npm/node_modules/node-gyp',
3627 error gyp info spawn args '-Dnode_lib_file=/Users/iyeseul/Library/Caches/node-gyp/22.11.0/<(target_arch)/node.lib',
3627 error gyp info spawn args '-Dmodule_root_dir=/Users/iyeseul/Documents/yeaseul/neekoblog/node_modules/canvas',
3627 error gyp info spawn args '-Dnode_engine=v8',
3627 error gyp info spawn args '--depth=.',
3627 error gyp info spawn args '--no-parallel',
3627 error gyp info spawn args '--generator-output',
3627 error gyp info spawn args 'build',
3627 error gyp info spawn args '-Goutput_dir=.'
3627 error gyp info spawn args ]
3627 error /bin/sh: pkg-config: command not found
3627 error gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 127 while in binding.gyp. while trying to load binding.gyp
3627 error gyp ERR! configure error
3627 error gyp ERR! stack Error: `gyp` failed with exit code: 1
3627 error gyp ERR! stack at ChildProcess.<anonymous> (/Users/iyeseul/.nvm/versions/node/v22.11.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:317:18)
3627 error gyp ERR! stack at ChildProcess.emit (node:events:518:28)
3627 error gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:293:12)
3627 error gyp ERR! System Darwin 22.6.0
3627 error gyp ERR! command "/Users/iyeseul/.nvm/versions/node/v22.11.0/bin/node" "/Users/iyeseul/.nvm/versions/node/v22.11.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--update-binary" "--module=/Users/iyeseul/Documents/yeaseul/neekoblog/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/iyeseul/Documents/yeaseul/neekoblog/node_modules/canvas/build/Release" "--napi_version=9" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v127"
3627 error gyp ERR! cwd /Users/iyeseul/Documents/yeaseul/neekoblog/node_modules/canvas
3627 error gyp ERR! node -v v22.11.0
3627 error gyp ERR! node-gyp -v v10.2.0
3627 error gyp ERR! not ok
3627 error node-pre-gyp ERR! build error
3627 error node-pre-gyp ERR! stack Error: Failed to execute '/Users/iyeseul/.nvm/versions/node/v22.11.0/bin/node /Users/iyeseul/.nvm/versions/node/v22.11.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/iyeseul/Documents/yeaseul/neekoblog/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/iyeseul/Documents/yeaseul/neekoblog/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v127' (1)
3627 error node-pre-gyp ERR! stack at ChildProcess.<anonymous> (/Users/iyeseul/Documents/yeaseul/neekoblog/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
3627 error node-pre-gyp ERR! stack at ChildProcess.emit (node:events:518:28)
3627 error node-pre-gyp ERR! stack at maybeClose (node:internal/child_process:1104:16)
3627 error node-pre-gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:304:5)
3627 error node-pre-gyp ERR! System Darwin 22.6.0
3627 error node-pre-gyp ERR! command "/Users/iyeseul/.nvm/versions/node/v22.11.0/bin/node" "/Users/iyeseul/Documents/yeaseul/neekoblog/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
3627 error node-pre-gyp ERR! cwd /Users/iyeseul/Documents/yeaseul/neekoblog/node_modules/canvas
3627 error node-pre-gyp ERR! node -v v22.11.0
3627 error node-pre-gyp ERR! node-pre-gyp -v v1.0.11
3627 error node-pre-gyp ERR! not ok해결 과정
아무래도 코드의 내용을 보아 canvas를 설치하는 과정에서 오류를 뱉는 것 같다고 생각했다.
canvas 설치를 실패한 원인이 뭐지
error command sh -c node-pre-gyp install --fallback-to-build --update-binary위의 코드를 봤을 때 빌드때 필요한 바이너리를 찾지 못했기 때문이었다.
그리고 libpng, pixman, cairo같은 라이브러리도 필요했으나 존재하지 않는 것으로 확인되었다.
그래서 터미널을 켜준 다음에
brew install pkg-config cairo pango libpng jpeg giflib librsvg코드를 작성해주었다.
이후에 존재하는 node_modules를 제거해주고
rm -rf node_modules관련 캐쉬도 다 지웠다.
npm cache clean --force이후에 다시 node_modules를 설치했더니 성공~
npm i정리하자면 간단하다.
node_modules에 canvas를 깔아야 하는데 관련 라이브러리를 찾지 못해서 brew를 통해 깔아준 것 뿐이다.
편안~
Frontend 개발자 이예슬입니다.