質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Vercel

Vercelとは、フロントエンド開発向けのフレームワークです。静的サイトとサーバレス機能のためのクラウドプラットフォームで、簡単にWebサイトやWebサービスをデプロイできます。自動でスケールでき、監視や各種設定も必要ありません。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

1回答

2943閲覧

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

bbdd

総合スコア43

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Vercel

Vercelとは、フロントエンド開発向けのフレームワークです。静的サイトとサーバレス機能のためのクラウドプラットフォームで、簡単にWebサイトやWebサービスをデプロイできます。自動でスケールでき、監視や各種設定も必要ありません。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2022/05/12 18:30

前提

  • 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

試したこと

  • 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" } }

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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

ログの中に以下の記述があります。
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には正常にデプロイできていません。きちんと解決したいのであれば、最初から正しいバージョンで作り直すのが早いかもしれません。

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

投稿2022/09/02 07:34

satoshitodaka

総合スコア7

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問