はじめに
React の TypeScript をベースとしたプロジェクトで、AWS Amplify + Cognito でユーザー認証のサンプルを動作させようとしたらエラーが頻発してハマってしまいましたので、解決方法のメモを残しておきます。
ちなみに TypeScript な React プロジェクトの作成は、以下のコマンドを実行します。
> npx create-react-app react-cognito --scripts-version=react-scripts-ts > cd react-cognito > yarn add aws-amplify aws-amplify-react
aws-amplify-react が読み込めないエラー
Amplify を動作させようとすると、以下の import 文がエラーになりました。
import { Authenticator } from 'aws-amplify-react';
ビルド時のエラーは以下のようになります。
Could not find a declaration file for module 'aws-amplify-react'. 'c:/Users/xxx/Projects/react-cognito/node_modules/aws-amplify-react/dist/index.js' 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)
このエラーですが、ぐぐってもなかなか解決しなかったのですが、tsconfig.jsonのnoImplicitAnyをfalseに変更するだけで解決できました。
まあ、あまり望ましい解決方法ではないのでしょうが仕方がないですね。
graphql のエラー
graphql 絡みで以下のエラーが出ました。
Failed to compile C:/Users/xxx/Projects/react-cognito/node_modules/@aws-amplify/api/lib/types/index.d.ts (1,30): Could not find a declaration file for module 'graphql/language/ast'. 'C:/Users/xxx/Projects/react-cognito/node_modules/graphql/language/ast.js' implicitly has an 'any' type. Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql/language/ast';`
これはエラーメッセージにあるように、以下のコマンド実行で解決しました。
> yarn add @types/graphql
aws-amplify/ui のエラー
aws-amplify/ui 絡みで以下のエラーが出ました。
Failed to compile. ./node_modules/aws-amplify-react/dist/Amplify-UI/Amplify-UI-Components-React.js Module not found: Can't resolve '@aws-amplify/ui' in 'C:\Users\xxx\Projects\react-cognito\node_modules\aws-amplify-react\dist\Amplify-UI'
これは以下のコマンド実行で解決しました。
> yarn add @aws-amplify/ui
おわりに
どうも Amplify は TypeScript を正式サポートしていないっぽいのですが、どうなんでしょうね？
基本的な部分でエラーが出てしまっている感じがします。
