🌐

Nuxt+Amplifyで"global is not defined"が発生する場合の対処法

2023/08/19に公開

Nuxt

まずは対処法

nuxt.config.tsにこちらの設定を追加してください。

nuxt.config.ts

export default defineNuxtConfig({
  // ...,
  vite: {
    define: {
      "window.global": {},
    },
  },
});

これにてエラーが解消されるはずです。ここまで読んでくださりありがとうございました！

・・・以下は全ておまけです。

どうしてエラーが発生するのか

原因はaws-amplifyの依存モジュールbufferにあるこちらの処理です。

Buffer.TYPED_ARRAY_SUPPORT = global.TYPED_ARRAY_SUPPORT !== undefined
  ? global.TYPED_ARRAY_SUPPORT
  : typedArraySupport()

Nuxtでviteを使用している場合、npm run dev等で開発サーバーを起動すると、node_modulesはバンドルされずにそのまま使われるようです。
それにもかかわらず、ブラウザでは未定義のglobalを使おうとするためglobal is not definedとなってしまいます。

OSSコミュニティに直接聞いてみた

エラーの原因となっているbufferモジュールのこのバグは、最新バージョンでは解消されています。しかし、aws-amplifyの依存モジュールamazon-cognito-identity-jsでは、古いバージョンの4.9.2を使い続けていました。こちらをバージョンアップするためのPRをリポジトリで見つけたのですが、マージされずに放置されていたので質問してみました。

回答がこちら。

this issue will cause some breaking changes, and it will be fixed as part of our next major version bump of our library. We do not have an exact ETA, but we will provide an update when we do!

どうやら、次のメジャーバージョンのリリースで解消されるようです。（予定は未定）

結論

とりあえずは、viteの設定にてglobalを空のオブジェクトとして定義することでエラーを解消することができます。
いずれは、amazon-cognito-identity-jsのアップデートでその設定が不要になるはずです。

まずは対処法

どうしてエラーが発生するのか

OSSコミュニティに直接聞いてみた

結論

Discussion