【Next.js】pdfkit-tableのエラーを解消する’

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

pdfkit-table

pdfkit-tableは、pdfkitでtableを簡単に作成できるライブラリです。2025年3月8日現在、最終更新が３年前です。とても便利なライブラリですが、エラーが出ます。

https://www.npmjs.com/package/pdfkit-table

Babel関連のエラー

Babelのバージョンアップに伴って、インポートでエラーになります。

TypeError: Class extends value #<Object> is not a constructor or null

issue: https://github.com/natancabral/pdfkit-table/issues/46

next.config.tsを下記のようにして解決します。

const nextConfig: NextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /pdfkit-table\/index\.js$/,
      loader: 'string-replace-loader',
      options: {
        search: 'require("pdfkit")',
        replace: 'require("pdfkit").default',
      },
    },);
    return config;
  },
};

string-replace-loaderをインストールしてください。

npm i -D string-replace-loader

フォントを修正する

レンダリングのたびにデフォルトフォントを読もうとするのですが、next.js環境ででフォントが見つからないためにエラーとなります。

no such file or directory, open '.../Helvetica-Bold.afm

issue: https://github.com/natancabral/pdfkit-table/issues/64

下記のようにして、レンダリング前に明示的にフォントを読み込むことで解決します。

await doc
      .table({
        ...
      }, {
        prepareHeader: () => doc.font(fontPath),
        prepareRow: () => doc.font(fontPath)
      });