🖼️
Vercel上でnode-canvasを動かすときは代わりに@napi-rs/canvasを使うと良い
Next.jsで構築したプロジェクトでcanvasを使うと、ローカルでは普通に動くしビルドも通るが、Vercel上にデプロイすると以下のようなビルドエラーが発生する。
error /vercel/path0/node_modules/canvas: Command failed.
Error [ERR_REQUIRE_ESM]: require() of ES Module /vercel/path0/node_modules/string-width/index.js from /vercel/path0/node_modules/wide-align/align.js not supported.
1年くらい前に同じ事象にぶち当たり、環境変数やらpackage.jsonを弄って対応したような気もするが、具体的な手順は忘れた。
改めて調べてみたところ、依存関係の問題を解消したcanvasの拡張版みたいなライブラリを見つけた。
これを
yarn add @napi-rs/canvas
でインストールする。
import文を
import { createCanvas } from 'canvas';
から
import { createCanvas } from '@napi-rs/canvas';
に変えたら今まで通りcanvasは動くし、Vercelでのビルドでもエラーを吐かなくなった。
昔はあーでもないこーでもないと環境設定をいじくりまわして時間を溶かしていたが、今は@napi-rs/canvasに置き換えるだけで良くなったようだ。
Discussion