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の拡張版みたいなライブラリを見つけた。
https://www.npmjs.com/package/@napi-rs/canvas

これを

yarn add @napi-rs/canvas

でインストールする。

import文を

import { createCanvas } from 'canvas';

から

import { createCanvas } from '@napi-rs/canvas';

に変えたら今まで通りcanvasは動くし、Vercelでのビルドでもエラーを吐かなくなった。

昔はあーでもないこーでもないと環境設定をいじくりまわして時間を溶かしていたが、今は@napi-rs/canvasに置き換えるだけで良くなったようだ。