あるSEのつぶやき・改

ITやシステム開発などの技術に関する話題を、取り上げたりしています。

TypeScriptのReactでAmplifyを使おうとしたらエラーでハマったのでその解決方法

はじめに

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.jsonnoImplicitAnyfalseに変更するだけで解決できました。

まあ、あまり望ましい解決方法ではないのでしょうが仕方がないですね。

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 を正式サポートしていないっぽいのですが、どうなんでしょうね?

基本的な部分でエラーが出てしまっている感じがします。