Q&A
前提・実現したいこと
nextjsでcanvas2.6.1を導入して，ogp画像を生成し，vercelにデプロイしたいです．
ver2.6.1を導入するのは，このバージョンじゃないとvercel側でエラーがでるからです．
ところが，yarn add canvas@2.6.1をするとエラーがでて，canvas2.6.1が導入できません．
canvas2.6.1を導入したいです．
※"canvas": "^2.9.0",を使えばOGP画像を生成できますが，vercelで動きません
発生している問題・エラーメッセージ
console
1nt@MacBook-Air qapp-1 % yarn add canvas@2.6.1 2yarn add v1.22.17 3[1/4] 🔍 Resolving packages... 4warning canvas > node-pre-gyp@0.11.0: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the future 5[2/4] 🚚 Fetching packages... 6[3/4] 🔗 Linking dependencies... 7warning " > bootstrap@5.1.3" has unmet peer dependency "@popperjs/core@^2.10.2". 8[4/4] 🔨 Building fresh packages... 9error /Users/nt/React/qapp-1/node_modules/canvas: Command failed. 10Exit code: 1 11Command: node-pre-gyp install --fallback-to-build 12Arguments: 13Directory: /Users/nt/React/qapp-1/node_modules/canvas 14Output: 15node-pre-gyp info it worked if it ends with ok 16node-pre-gyp info using node-pre-gyp@0.11.0 17node-pre-gyp info using node@16.14.0 | darwin | arm64 18node-pre-gyp WARN Using needle for node-pre-gyp https download 19node-pre-gyp info check checked for "/Users/nt/React/qapp-1/node_modules/canvas/build/Release/canvas.node" (not found) 20node-pre-gyp http GET https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-node-v93-darwin-unknown-arm64.tar.gz 21node-pre-gyp http 404 https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-node-v93-darwin-unknown-arm64.tar.gz 22node-pre-gyp WARN Tried to download(404): https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-node-v93-darwin-unknown-arm64.tar.gz 23node-pre-gyp WARN Pre-built binaries not found for canvas@2.6.1 and node@16.14.0 (node-v93 ABI, unknown) (falling back to source compile with node-gyp) 24node-pre-gyp http 404 status code downloading tarball https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-node-v93-darwin-unknown-arm64.tar.gz 25gyp info it worked if it ends with ok 26gyp info using node-gyp@8.4.1 27gyp info using node@16.14.0 | darwin | arm64 28gyp info ok 29gyp info it worked if it ends with ok 30gyp info using node-gyp@8.4.1 31gyp info using node@16.14.0 | darwin | arm64 32gyp info find Python using Python version 3.9.10 found at "/opt/homebrew/opt/python@3.9/bin/python3.9" 33gyp info spawn /opt/homebrew/opt/python@3.9/bin/python3.9 34gyp info spawn args [ 35gyp info spawn args '/Users/nt/.nodebrew/node/v16.14.0/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py', 36gyp info spawn args 'binding.gyp', 37gyp info spawn args '-f', 38gyp info spawn args 'make', 39gyp info spawn args '-I', 40gyp info spawn args '/Users/nt/React/qapp-1/node_modules/canvas/build/config.gypi', 41gyp info spawn args '-I', 42gyp info spawn args '/Users/nt/.nodebrew/node/v16.14.0/lib/node_modules/npm/node_modules/node-gyp/addon.gypi', 43gyp info spawn args '-I', 44gyp info spawn args '/Users/nt/Library/Caches/node-gyp/16.14.0/include/node/common.gypi', 45gyp info spawn args '-Dlibrary=shared_library', 46gyp info spawn args '-Dvisibility=default', 47gyp info spawn args '-Dnode_root_dir=/Users/nt/Library/Caches/node-gyp/16.14.0', 48gyp info spawn args '-Dnode_gyp_dir=/Users/nt/.nodebrew/node/v16.14.0/lib/node_modules/npm/node_modules/node-gyp', 49gyp info spawn args '-Dnode_lib_file=/Users/nt/Library/Caches/node-gyp/16.14.0/<(target_arch)/node.lib', 50gyp info spawn args '-Dmodule_root_dir=/Users/nt/React/qapp-1/node_modules/canvas', 51gyp info spawn args '-Dnode_engine=v8', 52gyp info spawn args '--depth=.', 53gyp info spawn args '--no-parallel', 54gyp info spawn args '--generator-output', 55gyp info spawn args 'build', 56gyp info spawn args '-Goutput_dir=.' 57gyp info spawn args ] 58gyp info ok 59gyp info it worked if it ends with ok 60gyp info using node-gyp@8.4.1 61gyp info using node@16.14.0 | darwin | arm64 62gyp info spawn make 63gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ] 64 SOLINK_MODULE(target) Release/canvas-postbuild.node 65 CXX(target) Release/obj.target/canvas/src/backend/Backend.o 66../src/backend/Backend.cc:111:10: warning: address of stack memory associated with local variable 'msg' returned [-Wreturn-stack-address] 67 return msg.c_str(); 68 ^~~ 691 warning generated. 70 CXX(target) Release/obj.target/canvas/src/backend/ImageBackend.o 71 CXX(target) Release/obj.target/canvas/src/backend/PdfBackend.o 72In file included from ../src/backend/PdfBackend.cc:1: 73In file included from ../src/backend/PdfBackend.h:4: 74../src/backend/../closure.h:6:10: fatal error: 'jpeglib.h' file not found 75#include <jpeglib.h> 76 ^~~~~~~~~~~ 771 error generated. 78make: *** [Release/obj.target/canvas/src/backend/PdfBackend.o] Error 1 79gyp ERR! build error 80gyp ERR! stack Error: `make` failed with exit code: 2 81gyp ERR! stack at ChildProcess.onExit (/Users/nt/.nodebrew/node/v16.14.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23) 82gyp ERR! stack at ChildProcess.emit (node:events:520:28) 83gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12) 84gyp ERR! System Darwin 20.6.0 85gyp ERR! command "/Users/nt/.nodebrew/node/v16.14.0/bin/node" "/Users/nt/.nodebrew/node/v16.14.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--module=/Users/nt/React/qapp-1/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/nt/React/qapp-1/node_modules/canvas/build/Release" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v93" 86gyp ERR! cwd /Users/nt/React/qapp-1/node_modules/canvas 87gyp ERR! node -v v16.14.0 88gyp ERR! node-gyp -v v8.4.1 89gyp ERR! not ok 90node-pre-gyp ERR! build error 91node-pre-gyp ERR! stack Error: Failed to execute '/Users/nt/.nodebrew/node/v16.14.0/bin/node /Users/nt/.nodebrew/node/v16.14.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Users/nt/React/qapp-1/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/nt/React/qapp-1/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1) 92node-pre-gyp ERR! stack at ChildProcess.<anonymous> (/Users/nt/React/qapp-1/node_modules/node-pre-gyp/lib/util/compile.js:83:29) 93node-pre-gyp ERR! stack at ChildProcess.emit (node:events:520:28) 94node-pre-gyp ERR! stack at maybeClose (node:internal/child_process:1092:16) 95node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5) 96node-pre-gyp ERR! System Darwin 20.6.0 97node-pre-gyp ERR! command "/Users/nt/.nodebrew/node/v16.14.0/bin/node" "/Users/nt/React/qapp-1/node_modules/canvas/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" 98node-pre-gyp ERR! cwd /Users/nt/React/qapp-1/node_modules/canvas 99node-pre-gyp ERR! node -v v16.14.0 100node-pre-gyp ERR! node-pre-gyp -v v0.11.0 101node-pre-gyp ERR! not ok 102Failed to execute '/Users/nt/.nodebrew/node/v16.14.0/bin/node /Users/nt/.nodebrew/node/v16.14.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Users/nt/React/qapp-1/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/nt/React/qapp-1/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1) 103info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
試したこと
nodeのバージョンが問題かと思ってnode12.22.0にダウングレードしてみましたがうまくいきません．
補足情報（FW/ツールのバージョンなど）
"next": "^12.0.10"
node v16.14.0
回答1件
0
自己解決
原因はM1 Macを使っていることにありました．
terminal
1brew install pkg-config cairo pango libpng jpeg giflib librsvg 2brew doctor 3CPLUS_INCLUDE_PATH=/opt/homebrew/include yarn add canvas@2.6.1
で解決しました．
投稿2022/02/15 10:20
総合スコア42
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。