Resemble.jsがサーバーサイドで上手く動作しなかった話

2022年06月17日 17:14:14

2022年06月17日 19:43:00

概要

Next.js + Prisma環境で、サーバーサイドでResemble.jsが動作せず苦労したのでメモ。

no such file or directory canvas

これは分かりやすい。
node_modules を見るとcanvasがインストールされていないようなので、インストールする。

yarn add canvas

Error: Cannot find module '../build/Release/canvas.node'

このエラーに大変悩まされたが、node-canvasのリポジトリ(https://github.com/Automattic/node-canvas#compiling) に解決策が記載されていた。

まず、Resemble.jsはnode-canvas を利用している。
node-canvasとは、CairoをフレームとするNode.js用Canvas実装。
Cairoはデバイスに依存しないベクトルベースの描画APIを提供する、フリーの2Dグラフィックスライブラリ (Wikipedia調べ)。

node-canvasはサポートされているOSまたはプロセッサアーキテクチャがない場合、システム上でコンパイルされる。今回の場合、yarn add 時にコンパイルされると思われるが、この時システム上にいくつかの依存関係が必要。

本来であれば yarn add 時にコンパイルエラーがある場合はそこでインストールが止まると思われるが、node_modules/package.json を見ると

"optionalDependencies": {
    "canvas": "2.9.0"
},

となっていた。
optionalDependencies に指定されている場合、利用可能であればインストールされるが、利用不可であっても他の処理は止まらず継続される。
よくよくログを見ると、

npm ERR! node-pre-gyp info it worked if it ends with ok
npm ERR! node-pre-gyp info using node-pre-gyp@1.0.6

みたいなエラーが大量に出ていた。

対策としては、上記リンクにあるようにOSごとに必要な依存関係をインストールしてから yarn add する。

MacOSであれば、

brew install pkg-config cairo pango libpng jpeg giflib librsvg

その後

yarn add canvas

以上でResemble.jsがサーバーサイドで正常動作するようになる🙌