Amplify-js＋Viteでエラーになった件

amplify-jsでCognitoの認証を実装する際に困ったことと解決方法を残しておきます。
同じところで詰まってる方がいたら参考にどうぞ。

global is not definedが発生する

発生した事象

amplify-jsをimportしたコンポーネントをレンダリングすると真っ白の画面になると思います。ブラウザの開発者ツールのコンソールには"global is not defined"と表示されています。

解決法

"global is not defined"はglobalが定義されていませんという意味です。
globalはnode.jsで使用されるグローバルオブジェクトであり、JavaScriptではwindowを指します。

Viteを使用している場合は、vite.config.jsに以下の記述を追加してください。

vite.config.js

export default defineConfig({
  // 省略
  define: {
    global: 'window',
  },
})

amplify-jsはnode.jsでも利用される万能なパッケージなので、この辺はViteに限らずjsならどの環境でも発生するんじゃないかと思います。
（ちなみに、amazon-cognito-identity-jsでもCognitoの認証処理は実装可能です。ただ、amplify-jsによってラップされているので、amazon-cognito-identity-jsをわざわざ使わなくてもよいですね）

"request" is not exported by "__vite-browser-external"が発生する

発生した事象

buildすると次のエラーが発生します。

"request" is not exported by "__vite-browser-external", imported by "node_modules/@aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js"

解決法

こちらもamplify-jsがnode.js固有の機能を使っていることに起因するものですね。"http"パッケージがインストールされていないという意味のようです。

Viteを使用している場合は、vite.config.jsに以下の記述を追加してください。

vite.config.js

export default defineConfig({
  // 省略
  resolve: {
    alias: {
      "./runtimeConfig": "./runtimeConfig.browser",
    },
  },
})

補足事項

amplify-jsの利用にあたり、「Amplifyを使用していないのにamplify-jsって使えるのか？」という疑問がありましたが、Amplifyを使用していなくてもamplify-jsでCognitoの認証は可能でした。

上記のエラーは、React、Vue.jsに限らず同じ解決法で解決できると思います。