Help us understand the problem. What is going on with this article?

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

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 で使用の pdfmake などが maximumFileSizeToCacheInBytes を超過しているとのこと

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

source-map-explorer で確認

pdfmake.png

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

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

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

webpack.exterals
    externals: {
      pdfmake: 'pdfmake',
      xlsx: 'xlsx',
      canvg: 'canvg',
    },

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

pdfmake-not-excluded.png

減っていない・・・

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 と差異があることに気づく

pdfmake.png

xlsx.png

これ 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-excluded.png

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

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

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

vfs_fonts.png

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

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

ysKuga
いつもの vagrant のおっさん
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした