何が起きたか

AWS Cognitoで作ったユーザープールで認証認可機能を提供するReactアプリで、フロントにおいてAWS Amplifyのパッケージを利用してAuth機能を行なっていました。
実際に作ってるアプリは以下です。
[個人開発]誰かの人生の1ページを覗けるアプリをGo&Reactでサーバーレスに開発

(AWS cognito × Reactの実装自体は以下の記事を参考にしました。)

この時、なぜか急に

AuthError - 
            Error: Amplify has not been configured correctly. 
            The configuration object is missing required auth properties.
            This error is typically caused by one of the following scenarios:

            1. Did you run `amplify push` after adding auth via `amplify add auth`?
                See https://aws-amplify.github.io/docs/js/authentication#amplify-project-setup for more information

            2. This could also be caused by multiple conflicting versions of amplify packages, see (https://docs.amplify.aws/lib/troubleshooting/upgrading/q/platform/js) for help upgrading Amplify packages.

というエラーが出てしまいログイン画面において認証ができなくなってしまいました。

結論、npmのバージョンを下げることでなんとか解決できたのですが、これが起こってしまった原因かもしれないことを挙げてどう解決したのかをメモ的に載せておきます。
実際この方法で治ってはいるけど本当に大丈夫なのか？という不安もあるので何か詳しい方がいたらぜひともコメントいただけるとありがたいです。
拙い文章ではありますが、AuthErrorが出てamplify関連のパッケージのバージョン上げたのになおらない方の助けになれば幸いです。

前提

npm install aws-amplify aws-amplify-react @aws-amplify/ui-react

をしてReactでCognitoのユーザープールを利用できるようにしました。

package.json

{
  "name": "unknwon-react-diary",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/ui-react": "^1.0.6",
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "aws-amplify": "^3.3.26",
    "aws-amplify-react": "^4.2.30",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hook-form": "^7.0.5",
    "react-icons": "^4.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },

AuthErrorが出るまでにやったこと

これが原因なんじゃないか、よくなかったんじゃないかと思うことを列挙していきます。

package-lock.jsonを削除した
npmのバージョンを上げた

package-lock.jsonを削除したが良くないことだというのは後々知りました。
流れとしては、別の全く関係ない@date-io/date-fnsというパッケージを入れるときにエラーが出たため、ググっていたところ
package-lock.jsonを削除して〜、npm自体をアップグレードして〜、という修復方法が書かれていたためその通り削除して、npmをupgradeして、もう一度npm installして、、ということをやりました。

その後、npm installすると、package-lock.jsonファイルに書かれているaws-amplifyをinstallすると一緒にインストールされる関連パッケージのバージョンが下がっていました。
結果このバージョンが低い問題なのではないかと思いこれを元に戻す方法を試していました。

ググってみるとaws-amplifyのバージョンが低いのが原因で同じエラーに遭遇している方がかなりいました。
https://github.com/aws-amplify/amplify-js/issues/4315
https://kazu22002.hatenablog.com/entry/2020/10/28/080000

ただ自分はこれをやってaws-amplifyのバージョンを上げても関連の

@aws-amplify/analytics
@aws-amplify/api
@aws-amplify/api-graphql
@aws-amplify/api-rest
@aws-amplify/auth
@aws-amplify/cache
@aws-amplify/core
@aws-amplify/interactions
@aws-amplify/pubsub
@aws-amplify/storage
@aws-amplify/xr

これらのバージョンがちゃんと動いていたときのバージョンと比べて低いままinstallされてました。

どう解決したか

ちゃんと動いていたときのpackage-lock.jsonと比べてみると、
"lockfileVersion": という項目が1から2に変わっていることがわかりました。
これを調べてみると、npmのv7からpackage-lock.jsonの形式が変わったそうです。もしかしたらこれが原因で何かしらの依存関係があって低いバージョンが入ってしまっているかもと思い

npm install -g npm@6

を行い、package-lock.json,yarn.lock,node_modulesを削除してもう一度npm installをすると治りました。
M1 Mac node.js v15 と Intel Mac node.js v14 で package-lock.json の lockfileVersion が違う

結論

結果的にこれで治ったのですが、本当にこの解決方法で良かったのかはイマイチ分かりません。
疑問なのは、依存するパッケージたちがなぜ低いバージョンでinstallされてしまったのかということです。
そして出てきた解決方法を脳死で行っていくのは良くないなと学びました。

補足

いろいろ調べて実験していくうちにわかったことを記していきます。

エラーの再現

なぜエラーになったか探るため、もう一度エラーを再現してみました。

まずnpmを7系にアップデートしてnpm installする

このタイミングではエラーになりませんでした。lockfileVersionは2でしたが、

@aws-amplify/analytics
@aws-amplify/api
@aws-amplify/api-graphql
@aws-amplify/api-rest
@aws-amplify/auth
@aws-amplify/cache
@aws-amplify/core
@aws-amplify/interactions
@aws-amplify/pubsub
@aws-amplify/storage
@aws-amplify/xr

これらの依存パッケージのバージョンはちゃんと新しいものでした。

次にpackage-lock.json,node_modulesを消して再度npm installする

このタイミングでエラーでました。上記依存パッケージのバージョンが低い状態でinstallされてしまいました。

次に低いバージョンで入ってしまっている@aws-amplify/analyticsを最新でinstallしてみる

これはできませんでした。具体的には、

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: aws-amplify-react@5.0.9
npm ERR! Found: @aws-amplify/analytics@5.0.9
npm ERR! node_modules/@aws-amplify/analytics
npm ERR!   @aws-amplify/analytics@"*" from the root project
npm ERR!   @aws-amplify/analytics@"5.0.9" from aws-amplify@4.2.3
npm ERR!   node_modules/aws-amplify
npm ERR!     peer aws-amplify@"3.x.x || 4.x.x" from @aws-amplify/ui-components@1.7.2
npm ERR!     node_modules/@aws-amplify/ui-components
npm ERR!       @aws-amplify/ui-components@"1.7.2" from @aws-amplify/ui-react@1.2.9
npm ERR!       node_modules/@aws-amplify/ui-react
npm ERR!         @aws-amplify/ui-react@"^1.2.9" from the root project
npm ERR!     aws-amplify@"^4.2.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @aws-amplify/analytics@"3.x.x" from aws-amplify-react@5.0.9
npm ERR! node_modules/aws-amplify-react
npm ERR!   aws-amplify-react@"^5.0.9" from the root project

このようなエラー。つまり、aws-amplify-react@5.0.9とコンフリクトして@aws-amplify/analyticsの最新バージョンがinstallできないということでした。
さらに、aws-amplify-react,@aws-amplify/ui-reactをアンインストールした後であれば、@aws-amplify/analyticsの最新バージョンがインストールすることが確認できました。

npmのバージョンを6に下げて再度`aws-amplify-react`をインストールしてみる

コンフリクトせずにできました。そしてAuthエラーもなくなっていました。

結局原因は？？

npm 7系でaws-amplifyの依存パッケージの最新版とaws-amplify-reactの最新版がコンフリクトしてしまっている。
なのではないかと考えました。
もう少し調べて根本的な原因を探ってみます。

参考リンク

package-lock.json ってなに？

AWS Amplify(Cognito)でAuthエラーが出た(AuthError - Error: Amplify has not been configured correctly. )