Next.jsでcanvasをいれてVercelにデプロイした際に「error /vercel/path0/node_modules/canvas: Command failed.」が発生する

Question

前提

• Mac OS：Monterey 12.3.1
• チップ：M1

問題

Next.jsでWebアプリケーションを作成しているのですが、
canvasをいれてVercelにデプロイした際に以下のようなビルドエラーが出ていますが解決方法がわかりません。

[03:07:41.356] Cloning github.com/yyokii/MyCuration (Branch: develop, Commit: b5aab05)
[03:07:42.774] Cloning completed: 1.418s
[03:07:42.935] Installing build runtime...
[03:07:45.519] Build runtime installed: 2.583s
[03:07:45.972] Looking up build cache...
[03:07:46.047] Build Cache not found
[03:07:46.257] Installing dependencies...
[03:07:46.617] yarn install v1.22.17
[03:07:46.690] [1/4] Resolving packages...
[03:07:46.921] [2/4] Fetching packages...
[03:08:00.571] [3/4] Linking dependencies...
[03:08:00.572] warning " > bootstrap@5.1.3" has unmet peer dependency "@popperjs/core@^2.10.2".
[03:08:00.575] warning "firebase-admin > @firebase/database-compat@0.1.8" has unmet peer dependency "@firebase/app-compat@0.x".
[03:08:09.943] [4/4] Building fresh packages...
[03:08:11.708] error /vercel/path0/node_modules/canvas: Command failed.
[03:08:11.708] Exit code: 1
[03:08:11.708] Command: node-pre-gyp install --fallback-to-build
[03:08:11.708] Arguments: 
[03:08:11.708] Directory: /vercel/path0/node_modules/canvas
[03:08:11.708] Output:
[03:08:11.708] node-pre-gyp info it worked if it ends with ok
[03:08:11.708] node-pre-gyp info using node-pre-gyp@0.11.0
[03:08:11.709] node-pre-gyp info using node@16.14.0 | linux | x64
[03:08:11.709] node-pre-gyp WARN Using needle for node-pre-gyp https download 
[03:08:11.709] node-pre-gyp info check checked for "/vercel/path0/node_modules/canvas/build/Release/canvas.node" (not found)
[03:08:11.709] node-pre-gyp http GET https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-node-v93-linux-glibc-x64.tar.gz
[03:08:11.709] node-pre-gyp http 404 https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-node-v93-linux-glibc-x64.tar.gz
[03:08:11.709] node-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-linux-glibc-x64.tar.gz 
[03:08:11.709] node-pre-gyp WARN Pre-built binaries not found for canvas@2.6.1 and node@16.14.0 (node-v93 ABI, glibc) (falling back to source compile with node-gyp) 
[03:08:11.709] node-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-linux-glibc-x64.tar.gz 
[03:08:11.709] gyp info it worked if it ends with ok
[03:08:11.709] gyp info using node-gyp@8.4.1
[03:08:11.709] gyp info using node@16.14.0 | linux | x64
[03:08:11.709] gyp info ok 
[03:08:11.709] gyp info it worked if it ends with ok
[03:08:11.709] gyp info using node-gyp@8.4.1
[03:08:11.710] gyp info using node@16.14.0 | linux | x64
[03:08:11.710] gyp info find Python using Python version 3.9.8 found at "/usr/local/bin/python3"
[03:08:11.710] gyp http GET https://nodejs.org/download/release/v16.14.0/node-v16.14.0-headers.tar.gz
[03:08:11.710] gyp http 200 https://nodejs.org/download/release/v16.14.0/node-v16.14.0-headers.tar.gz
[03:08:11.710] gyp http GET https://nodejs.org/download/release/v16.14.0/SHASUMS256.txt
[03:08:11.710] gyp http 200 https://nodejs.org/download/release/v16.14.0/SHASUMS256.txt
[03:08:11.710] gyp info spawn /usr/local/bin/python3
[03:08:11.710] gyp info spawn args [
[03:08:11.710] gyp info spawn args   '/node16/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
[03:08:11.710] gyp info spawn args   'binding.gyp',
[03:08:11.710] gyp info spawn args   '-f',
[03:08:11.710] gyp info spawn args   'make',
[03:08:11.710] gyp info spawn args   '-I',
[03:08:11.710] gyp info spawn args   '/vercel/path0/node_modules/canvas/build/config.gypi',
[03:08:11.711] gyp info spawn args   '-I',
[03:08:11.711] gyp info spawn args   '/node16/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
[03:08:11.711] gyp info spawn args   '-I',
[03:08:11.711] gyp info spawn args   '/vercel/.cache/node-gyp/16.14.0/include/node/common.gypi',
[03:08:11.711] gyp info spawn args   '-Dlibrary=shared_library',
[03:08:11.711] gyp info spawn args   '-Dvisibility=default',
[03:08:11.712] gyp info spawn args   '-Dnode_root_dir=/vercel/.cache/node-gyp/16.14.0',
[03:08:11.712] gyp info spawn args   '-Dnode_gyp_dir=/node16/lib/node_modules/npm/node_modules/node-gyp',
[03:08:11.712] gyp info spawn args   '-Dnode_lib_file=/vercel/.cache/node-gyp/16.14.0/<(target_arch)/node.lib',
[03:08:11.712] gyp info spawn args   '-Dmodule_root_dir=/vercel/path0/node_modules/canvas',
[03:08:11.712] gyp info spawn args   '-Dnode_engine=v8',
[03:08:11.712] gyp info spawn args   '--depth=.',
[03:08:11.712] gyp info spawn args   '--no-parallel',
[03:08:11.712] gyp info spawn args   '--generator-output',
[03:08:11.713] gyp info spawn args   'build',
[03:08:11.714] gyp info spawn args   '-Goutput_dir=.'
[03:08:11.714] gyp info spawn args ]
[03:08:11.714] Package pixman-1 was not found in the pkg-config search path.
[03:08:11.714] Perhaps you should add the directory containing `pixman-1.pc'
[03:08:11.714] to the PKG_CONFIG_PATH environment variable
[03:08:11.715] No package 'pixman-1' found
[03:08:11.715] gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
[03:08:11.715] gyp ERR! configure error 
[03:08:11.715] gyp ERR! stack Error: `gyp` failed with exit code: 1
[03:08:11.715] gyp ERR! stack     at ChildProcess.onCpExit (/node16/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:259:16)
[03:08:11.715] gyp ERR! stack     at ChildProcess.emit (node:events:520:28)
[03:08:11.715] gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
[03:08:11.715] gyp ERR! System Linux 4.14.275-207.503.amzn2.x86_64
[03:08:11.715] gyp ERR! command "/node16/bin/node" "/node16/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/vercel/path0/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/vercel/path0/node_modules/canvas/build/Release" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v93"
[03:08:11.715] gyp ERR! cwd /vercel/path0/node_modules/canvas
[03:08:11.715] gyp ERR! node -v v16.14.0
[03:08:11.715] gyp ERR! node-gyp -v v8.4.1
[03:08:11.715] gyp ERR! not ok 
[03:08:11.715] node-pre-gyp ERR! build error 
[03:08:11.715] node-pre-gyp ERR! stack Error: Failed to execute '/node16/bin/node /node16/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/vercel/path0/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/vercel/path0/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1)
[03:08:11.716] node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/vercel/path0/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
[03:08:11.716] node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:520:28)
[03:08:11.716] node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1092:16)
[03:08:11.716] node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)
[03:08:11.716] node-pre-gyp ERR! System Linux 4.14.275-207.503.amzn2.x86_64
[03:08:11.716] node-pre-gyp ERR! command "/node16/bin/node" "/vercel/path0/node_modules/canvas/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
[03:08:11.716] node-pre-gyp ERR! cwd /vercel/path0/node_modules/canvas
[03:08:11.716] node-pre-gyp ERR! node -v v16.14.0
[03:08:11.716] node-pre-gyp ERR! node-pre-gyp -v v0.11.0
[03:08:11.716] node-pre-gyp ERR! not ok 
[03:08:11.716] Failed to execute '/node16/bin/node /node16/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/vercel/path0/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/vercel/path0/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1)
[03:08:11.717] info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
[03:08:11.744] Error: Command "yarn install" exited with 1

試したこと

関連していると思われる事象はweb上でいくつかあり、試したのですがどれも同じ結果でした。

関連issue

• Build fails on Vercel due to ZLIB not found #259

試したこと

• canvasのバージョンを2.6.1にする
• next.config.jsにて下記を先頭に付与する

// For building on vercel: https://github.com/Automattic/node-canvas/issues/1779
if (
  process.env.LD_LIBRARY_PATH == null ||
  !process.env.LD_LIBRARY_PATH.includes(
    `${process.env.PWD}/node_modules/canvas/build/Release:`,
  )
) {
  process.env.LD_LIBRARY_PATH = `${
    process.env.PWD
  }/node_modules/canvas/build/Release:${process.env.LD_LIBRARY_PATH || ''}`;
}

• now-build時にyumで任意のパッケージのインストールを行う

    "now-build": "yum install libuuid-devel libmount-devel && cp canvas_lib64/*so.1 node_modules/canvas/build/Release/ && yarn build",

補足情報

元々のpackage.jsonは以下のようになっています

{
  "name": "aaaaaaaa",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "now-build": "cp /canvas_lib64/*so.1 node_modules/canvas/build/Release/ && yarn build",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "bootstrap": "^5.1.3",
    "canvas": "2.6.1",
    "dayjs": "^1.11.2",
    "firebase": "^9.8.1",
    "firebase-admin": "^10.2.0",
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-toastify": "^9.0.1",
    "recoil": "^0.7.3-alpha.2",
    "sass": "^1.51.0"
  },
  "devDependencies": {
    "@types/node": "^17.0.31",
    "@types/react": "^18.0.9",
    "eslint": "8.15.0",
    "eslint-config-next": "12.1.6",
    "typescript": "^4.6.4"
  }
}

些細なことでも良いのでコメントいただけると嬉しいです。

Answer 1

投稿から時間が経ってしまっているので、質問者様の助けになるかわかりませんが、同じ箇所で詰まったので、ヒントになりそうなトピックを共有いたします。
当方は最終的には未解決なのですが、同様のエラーに困った人のヒントになればと思います。

ログの中に以下の記述があります。
node-canvas-prebuiltのパッケージを取得しようとしていますが、取得先のページを確認すると、該当するバージョンが存在しないことがわかります。

// 存在しないパッケージを取得しようとし、失敗している。
[03:08:11.709] node-pre-gyp http GET https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-node-v93-linux-glibc-x64.tar.gz
[03:08:11.709] node-pre-gyp http 404 https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-node-v93-linux-glibc-x64.tar.gz

これについて、おそらくNode.jsのバージョンが適切ではないことが原因かと思われます（メンターさんに相談したところ、Node.jsのバージョンを14くらいに下げるようアドバイスをいただきました）
また、何かテキストを参考に進めているのであれば、テキストに記載の諸々のバージョンを再度確認してみてください。

デプロイの際は、Vercelのアプリの設定画面で、使用するNode.jsのバージョンが正しく設定できているかを確認すると良いと思います。

Node.js Version - Vercel

ローカルのNode.jsのバージョン変更、使用するパッケージのバージョンを再確認することによって、当初のエラーは解消しました。ただ、微妙なパッケージの依存の影響か？別のエラーが発生し、Vercelには正常にデプロイできていません。きちんと解決したいのであれば、最初から正しいバージョンで作り直すのが早いかもしれません。

中途半端な回答になってしまって申し訳ないですが、解決のヒントになれば嬉しいです。