amCharts の pdfmake を webpack の externals に指定する

amCharts を React のプロジェクトに使用したところ、 GitHub Actions にて以下のようなエラーが発生

{file path} is {file size} MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.

構成は以下の通り

package.json

{
  "dependencies": {
    "@amcharts/amcharts4": "^4.9.35",
    "webpack": "4.43.0"
  },
}

amCharts 配下の pdfmake が原因？

amCharts にて maximumFileSizeToCacheInBytes での問題が発生する旨の issue
Dependency sizes #569 - amCharts/amCharts4

上記によると amCharts で使用の pdfmake などが maximumFileSizeToCacheInBytes を超過しているとのこと

ビルドのファイルサイズの確認

source-map-explorer で確認

当初 npm run build -- --stats にてファイルサイズを取得しようとしたが
廃止されていたとのことで source-map-explorer を使用に切替
How to build bundle-stats.json in create react app? - stackoverflow

確かに pdfmake (ほかに xlsx) のサイズが大きいことを確認

webpack の externals を指定によりビルドに含まないように・・・

前述の Dependency sizes #569 - amCharts/amCharts4 にて、
webpack の externals を指定することによりビルドから除外できるとあったので再度ビルド

webpack.exterals

    externals: {
      pdfmake: 'pdfmake',
      xlsx: 'xlsx',
      canvg: 'canvg',
    },

再確認したところ以下にて、

減っていない・・・

externals を関数で指定する

前述の issue をよく見たところ、 externals の関数形式での指定を行うとよいとのこと

webpack.externals.function

    externals: [
      /(xlsx|canvg)/,
      function (context, request, callback) {
        if (/(pdfmake)/.test(request)) {
          return callback(null, 'commonjs ' + request);
        }
        callback();
      },
    ],

こちらの記述は公式のドキュメントにもありました。
Large file sizes - Using Webpack - amCharts 4 Documentation

webpack.externals.function.official

  externals: function (context, request, callback) {
    if (/xlsx|canvg|pdfmake/.test(request)) {
      return callback(null, "commonjs " + request);
    }
    callback();
  }

これを適用して再試行

compile-error

chunk runtime-main [entry]
Cannot convert undefined or null to object

なんかエラーが・・・

pdfmake の記述を詳細にする必要がある？

externals の指定をいじってみていたところ、 pdfmake 以外の xlsx などは記述通りで除外されることを確認
そこで source-map-explorer の出力を見直してみていたところ、 pdfmake の表示には xlsx と差異があることに気づく

これ externals の正規表現に変更を加えないといけないのかと思い、以下のように

webpack.externals.function.pdfmake-detailed

    externals: function (context, request, callback) {
      if (/xlsx|canvg|pdfmake[/]build|[.]internal[/]pdfmake/.test(request)) {
        return callback(null, 'commonjs ' + request);
      }
      callback();
    },

表示される pdfmake の 2 種類である以下に合致するように変更
- pdfmake/build/pdfmake.js
- src/.internal/pdfmake/vfs_fonts.ts

再度実行し・・・正常に終了
source-map-explorer にて確認したところ、

やったぜ。
pdfmake がなくなっていることを確認

しかしなんとなく設定していた Jest により GitHub Actions はこけていたところでいったん終了

・・・と思ったら vfs_fonts のほうはしっかり残留してしまっていた・・・

とりあえず有効となった記述について

webpack.externals.function.pdfmake-detailed-valid

    externals: function (context, request, callback) {
      if (/xlsx|canvg|pdfmake[/]build/.test(request)) {
        return callback(null, 'commonjs ' + request);
      }
      callback();
    },

Jest のエラーについて

Angular でも発生した事例
SyntaxError: Unexpected token 'export' with jest in Angular 9 project #2471 - amCharts/amCharts4

jest-error

    Details:

    ～\node_modules\@amcharts\amcharts4\charts.js:7
    export { GaugeChartDataItem, GaugeChart } from "./.internal/charts/types/GaugeChart";     
    ^^^^^^

    SyntaxError: Unexpected token 'export'

Using amCharts with Jest - amCharts 4 Documentation

amCharts が svg 使っているけど Jest では svg 対応していないよ

use Puppeteer with Jest