【Next.js】Can’t resolve ‘@img/sharp-libvips-dev/include’

こんにちは、フリーランスエンジニアの太田雅昭です。

環境とエラー

今回、pnpmモノレポNext.jsです。packageの一つでsharpを使っていたのですが、next devで下記のエラーとなりました。

Module not found: Can't resolve '@img/sharp-libvips-dev/include'

バイナリファイルが、webpackで正しく処理されていないことが原因のようです。

webpackでsharpの扱いを指定する

next.config.tsで下記のようにします。

const nextConfig: NextConfig = {
  webpack: (config, { isServer }) => {
    if (isServer) {
      config.externals.push({
        sharp: 'commonjs sharp',
      });
    }
    return config;
  },
};

export default nextConfig;

これで、解決しました。