Zenn
🚫

【Next.js】@napi-rs/canvasのインポートエラーの解決方法

2025/01/31に公開
Next.js
tech

Next.jsのRoute Handlersで@napi-rs/canvasを使用した際にエラーが発生しました。

今回のエラー

# エラー文
⨯ Error: could not resolve "@napi-rs/canvas-linux-arm64-gnu" into a module

原因

このエラーは、Next.jsのServer Components環境で@napi-rs/canvasが正しく読み込まれないことが原因でした（適切にバンドルされない）。

Next.jsでは、サーバー側で使用する外部パッケージのバンドル最適化が行われますが、ネイティブバイナリを含むパッケージは適切に解決されないことがあります。

対処法

next.config.tsに追記する

Next.jsのserverComponentsExternalPackagesに@napi-rs/canvasを追加すると、サーバーコンポーネント環境で正しく読み込めるようになります。

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
    experimental: {
        serverComponentsExternalPackages: ["@napi-rs/canvas"],
    },
};

export default nextConfig;

参考

https://www.npmjs.com/package/@napi-rs/canvas

Discussion