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

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

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

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

Next.js

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

Vercel

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

OGP画像を生成して,vercelにデプロイするためにcanvas2.6.1を導入したい.

nk1
nk1

総合スコア42

canvas

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

Next.js

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

Vercel

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

-1評価

0クリップ

505閲覧

投稿2022/02/11 16:57

編集2022/02/15 19:20

前提・実現したいこと

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

nt@MacBook-Air qapp-1 % yarn add canvas@2.6.1 yarn add v1.22.17 [1/4] 🔍 Resolving packages... warning 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 [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... warning " > bootstrap@5.1.3" has unmet peer dependency "@popperjs/core@^2.10.2". [4/4] 🔨 Building fresh packages... error /Users/nt/React/qapp-1/node_modules/canvas: Command failed. Exit code: 1 Command: node-pre-gyp install --fallback-to-build Arguments: Directory: /Users/nt/React/qapp-1/node_modules/canvas Output: node-pre-gyp info it worked if it ends with ok node-pre-gyp info using node-pre-gyp@0.11.0 node-pre-gyp info using node@16.14.0 | darwin | arm64 node-pre-gyp WARN Using needle for node-pre-gyp https download node-pre-gyp info check checked for "/Users/nt/React/qapp-1/node_modules/canvas/build/Release/canvas.node" (not found) node-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 node-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 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-darwin-unknown-arm64.tar.gz node-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) 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-darwin-unknown-arm64.tar.gz gyp info it worked if it ends with ok gyp info using node-gyp@8.4.1 gyp info using node@16.14.0 | darwin | arm64 gyp info ok gyp info it worked if it ends with ok gyp info using node-gyp@8.4.1 gyp info using node@16.14.0 | darwin | arm64 gyp info find Python using Python version 3.9.10 found at "/opt/homebrew/opt/python@3.9/bin/python3.9" gyp info spawn /opt/homebrew/opt/python@3.9/bin/python3.9 gyp info spawn args [ gyp info spawn args '/Users/nt/.nodebrew/node/v16.14.0/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py', gyp info spawn args 'binding.gyp', gyp info spawn args '-f', gyp info spawn args 'make', gyp info spawn args '-I', gyp info spawn args '/Users/nt/React/qapp-1/node_modules/canvas/build/config.gypi', gyp info spawn args '-I', gyp info spawn args '/Users/nt/.nodebrew/node/v16.14.0/lib/node_modules/npm/node_modules/node-gyp/addon.gypi', gyp info spawn args '-I', gyp info spawn args '/Users/nt/Library/Caches/node-gyp/16.14.0/include/node/common.gypi', gyp info spawn args '-Dlibrary=shared_library', gyp info spawn args '-Dvisibility=default', gyp info spawn args '-Dnode_root_dir=/Users/nt/Library/Caches/node-gyp/16.14.0', gyp info spawn args '-Dnode_gyp_dir=/Users/nt/.nodebrew/node/v16.14.0/lib/node_modules/npm/node_modules/node-gyp', gyp info spawn args '-Dnode_lib_file=/Users/nt/Library/Caches/node-gyp/16.14.0/<(target_arch)/node.lib', gyp info spawn args '-Dmodule_root_dir=/Users/nt/React/qapp-1/node_modules/canvas', gyp info spawn args '-Dnode_engine=v8', gyp info spawn args '--depth=.', gyp info spawn args '--no-parallel', gyp info spawn args '--generator-output', gyp info spawn args 'build', gyp info spawn args '-Goutput_dir=.' gyp info spawn args ] gyp info ok gyp info it worked if it ends with ok gyp info using node-gyp@8.4.1 gyp info using node@16.14.0 | darwin | arm64 gyp info spawn make gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ] SOLINK_MODULE(target) Release/canvas-postbuild.node CXX(target) Release/obj.target/canvas/src/backend/Backend.o ../src/backend/Backend.cc:111:10: warning: address of stack memory associated with local variable 'msg' returned [-Wreturn-stack-address] return msg.c_str(); ^~~ 1 warning generated. CXX(target) Release/obj.target/canvas/src/backend/ImageBackend.o CXX(target) Release/obj.target/canvas/src/backend/PdfBackend.o In file included from ../src/backend/PdfBackend.cc:1: In file included from ../src/backend/PdfBackend.h:4: ../src/backend/../closure.h:6:10: fatal error: 'jpeglib.h' file not found #include <jpeglib.h> ^~~~~~~~~~~ 1 error generated. make: *** [Release/obj.target/canvas/src/backend/PdfBackend.o] Error 1 gyp ERR! build error gyp ERR! stack Error: `make` failed with exit code: 2 gyp 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) gyp ERR! stack at ChildProcess.emit (node:events:520:28) gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12) gyp ERR! System Darwin 20.6.0 gyp 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" gyp ERR! cwd /Users/nt/React/qapp-1/node_modules/canvas gyp ERR! node -v v16.14.0 gyp ERR! node-gyp -v v8.4.1 gyp ERR! not ok node-pre-gyp ERR! build error node-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) node-pre-gyp ERR! stack at ChildProcess.<anonymous> (/Users/nt/React/qapp-1/node_modules/node-pre-gyp/lib/util/compile.js:83:29) node-pre-gyp ERR! stack at ChildProcess.emit (node:events:520:28) node-pre-gyp ERR! stack at maybeClose (node:internal/child_process:1092:16) node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5) node-pre-gyp ERR! System Darwin 20.6.0 node-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" node-pre-gyp ERR! cwd /Users/nt/React/qapp-1/node_modules/canvas node-pre-gyp ERR! node -v v16.14.0 node-pre-gyp ERR! node-pre-gyp -v v0.11.0 node-pre-gyp ERR! not ok 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) info 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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

canvas

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

Next.js

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

Vercel

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。