🐞

airtableのnpmモジュールをwebpackすると動かなくなる

2021/12/28に公開

Serverless Framework

Airtable

tech

airtableのAPIを公式のnpmモジュールを利用して実行しています。

https://www.npmjs.com/package/airtable

ローカルでは動作していたので、デプロイしたところ

TypeError: Expected signal to be an instanceof AbortSignal

というエラーが発生して実行できませんでした。内容を調べたのでメモとして残しておきます。

構成

severless framework 2.68.0
- serverless-webpack 5.5.1
node v14.17.0
airtable 0.11.1

上記のエラーを調べると出てくるのですが、原因としては、airtableのモジュールが内部的に利用しているnode-fetchでした。

airtableのissueとしては以下のissueが近いかと思います(ちょっと違う)

内容としては、object[NAME] === 'AbortSignal'というロジックがあり、それがwebpackでminifyされたときにNAMEが一致しないためにエラーになっていました。

解決方法としては、issueにもありますが、webpackのminifyのロジックを修正して、AbortSignalのみクラス名を保持するように変更します。

npm install terser-webpack-plugin --save-dev

webpack.config.js

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // 色々省略
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
          mangle: false,
          sourceMap: true,
          // compress: false,
          // for airtable
          keep_classnames: /AbortSignal/,
          keep_fnames: /AbortSignal/,
          output: {
            beautify: true,
            indent_level: 1
          }
        }
      }),
    ],
  },
}

構成

Discussion