AmplifyでAuthしてみるときに詰まったこと

概要

基本的には このサイト を参考にさせていただいてほとんど完結しました。
しかし、詰まるところもあったので、その部分について書きます。

詰まったこと

aws-amplify-reactが読み込めない

エラー発生箇所

import { Authenticator } from 'aws-amplify-react'

発生したエラー

Could not find a declaration file for module 'aws-amplify-react'. '<path>' implicitly has an 'any' type.
  Try `npm install @types/aws-amplify-react` if it exists or add a new declaration (.d.ts) file containing `declare module 'aws-amplify-react';`ts(7016)

参考にさせていただいたサイトでも同様のエラーが出たことが報告されていて、その解決法が書かれていたのですが、その解決法では解決しませんでした。

そこで、ググりました。
この GitHubのページ によると
aws-amplify-reactの型が定義されていないために起こるエラーであるそうです。

.d.tsファイルにdeclare module 'aws-amplify-react'を追加するとエラーが消えました。

ググってから気づきましたが、解決方法がエラーメッセージに出てましたね。
エラーメッセージをちゃんと読まずにGoogle検索しがちなのは良くない癖ですね。

まとめ

このエラーは型が定義されていないときに起こるエラーであり、型の定義が見つからない時は、エラーメッセージに出てる通りnpm install @type/hogeで型の定義を追加できればそれでよく、できない場合は今回のように自分で追加すれば解決できるようです。