mrk21::blog {}

Nuxt app で AWS SDK for JavaScript v3 を使えるようにする

Nuxt JavaScript aws-sdk

AWS SDK for JavaScript v3 (@aws-sdk/***) では optional chaining operator ?. が使われており、Chrome や Node.js などでも割と最近になって使えるようになったので(2020年ごろ)、Nuxt app で使おうとすると設定にもよるがおそらく以下のようなエラーが出てビルドできない。

 ERROR  in ./node_modules/@aws-sdk/signature-v4/dist-es/getCanonicalHeaders.js                                                                                                             friendly-errors 22:57:25

Module parse failed: Unexpected token (10:30)                                                                                                                                              friendly-errors 22:57:25
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         const canonicalHeaderName = headerName.toLowerCase();
|         if (canonicalHeaderName in ALWAYS_UNSIGNABLE_HEADERS ||
>             unsignableHeaders?.has(canonicalHeaderName) ||
|             PROXY_HEADER_PATTERN.test(canonicalHeaderName) ||
|             SEC_HEADER_PATTERN.test(canonicalHeaderName)) {

なので、nuxt.config.js に以下の設定を加えて @aws-sdk をトランスパイルの対象にする必要がある。

export default {
  ...
  build: {
    transpile: [/@aws-sdk/],
  },
  ...
};

環境

Node.js: 16.13.2
nuxt: 2.15.7
@aws-sdk: 3.200.0

参考