React 18 で aws-amplify v5 と AWS Amplify UI v4 にアップグレードしてみた

こんにちは、広野です。

React アプリを AWS サーバーレスサービスリソースと統合するのに、AWS が提供する AWS Amplify モジュールは開発を大きく効率化してくれます。

しかしながら、モジュールのバージョンアップは頻繁に行われており、特にメジャーバージョンアップの際には React コードの変更を強いられることもあります。アップグレードは検証の手間を考えると気軽にはできるものではありません。

この度、少し時間ができたので、私が開発している React 18 アプリ環境で以下 2 つのモジュールをアップグレードしました。

環境

執筆時点、以下のような React 環境がありました。

AWS リソースとの統合のため、以下の AWS ドキュメントに書かれていることをやっていました。

以下のモジュールをアップグレードしました。

@aws-amplify/ui-react は、以下のドキュメントでも紹介されている Amplify UI というものです。

アップグレード時、インストールしているモジュール間の依存性のエラーが発生します。

GitHub のコミュニティで記載されていたのですが、エラーは出ても React 18 で問題なく動くというコメントがありましたので、npm で以下のようにオプションを付けてインストールしました。

npm install --save aws-amplify @aws-amplify/ui-react --legacy-peer-deps

依存性のエラーはこれでクリアできます。（解決というよりは回避ですが）

コードの変更点については、以下の AWS 公式ブログが参考になりました。

このブログに直接的には書いていないのですが、AWS リソースとの統合の設定をするコンポーネントの中で必ず書かれているであろう、Amplify.configure に関わる以下のコードを修正する必要があります。

import Amplify from 'aws-amplify';

import { Amplify } from 'aws-amplify';

波カッコが不要か必要かの違いですが、これを直さないとビルドが失敗しました。

Amazon Cognito、AWS AppSync、Amazon S3、Amazon Kinesis Data Firehose との統合に関するコードを変更する必要はありませんでした。今回のアップグレードの変更箇所には抵触しなかったものと思います。

おそらくモジュールの問題ではないと思うのですが、デプロイが正常に完了した後に React アプリから Amazon Cognito と通信できなくなりました。ブラウザには以下のエラーメッセージが表示されました。

AuthError - Error: Amplify has not been configured correctly.

アップグレード作業の過程で、package.json と package-lock.json に不整合ができてしまったのかも。

と思い、一度インストールした全てのモジュールを全て削除して、ゼロから綺麗にインストールし直したところデプロイ後も動作するようになりました。私の環境ではこれが発生したのですが、他の方には発生しないかもしれません。

いかがでしたでしょうか？

あまり細かく説明しておらず恐縮ですが、絶対に直さないといけないコード以外は変更点に抵触する可能性は少ないのかな、と思います。当たり前ですが検証をしっかりやってもらえれば、大丈夫と思います。

本記事が皆様のお役に立てれば幸いです。