設定エラーのトラブルシューティング
設定の欠落またはNoCredentialsエラーメッセージが表示されており、プロジェクトでAmplify.configureを呼び出している場合、Amplify APIはAmplify.configureより前に呼び出されている可能性が高いです。これはいくつかの異なる方法で発生する可能性があります。以下はこの問題をトラブルシューティングするために確認できる3つの可能性です。
チェック1: Amplify.configureがプロジェクトのルートで呼び出されていることを確認する
プロジェクトのルートファイルでAmplify.configureを呼び出していることを確認してください。アプリのルートファイルはフロントエンドフレームワークによって異なる場合があります。いくつかの一般的なフレームワークの現在のデフォルトは以下の通りです（TypeScriptを使用していない場合、tsとtsx拡張子はjsとjsxになります）:
- Vue.js: src/main.ts
- React: src/main.tsx
- Angular: src/main.ts
- Next.js Page Router: pages/_app.tsx or src/pages/_app.tsx
- Nuxt: app.vue （またはこちらで推奨されているプラグインファイル内）
チェック2: モジュールレベルのAmplify API呼び出しを移動する
Amplify APIがアプリケーションライフサイクルの外で使用されている場合、JavaScriptバンドラーがそのAPI呼び出しをAmplify.configureの前に配置するリスクがあります。モジュールレベルの関数呼び出し（ファイルのトップレベルでの呼び出し）は、一般的にインポートされた順序で評価されます。
以下は、設定の欠落またはNoCredentialsエラーメッセージをもたらす可能性が高いコードの例です:
import { Amplify } from 'aws-amplify';import ComponentX from 'module-fetch-auth';
// fetchAuthSession() in ComponentX executed on import
Amplify.configure();
export default function App() { return ( <div> <ComponentX /> </div> );}import { fetchAuthSession } from 'aws-amplify/auth';
fetchAuthSession(); // Will throw "AuthUserPoolException: Auth UserPool not configured."
export default function ComponentX() { return ( <div className="box"> ... </div> );}このエラーは、Next.js Layoutsを使用し、子コンポーネントでAmplify APIをモジュールレベル（ファイル/モジュールの先頭）で呼び出す場合にも発生します。以下はこの問題の例です:
import ConfigureAmplifyClientSide from '@/ConfigureAmplifyClientSide';
export default function RootLayout({ children,}: { children: React.ReactNode;}) { return ( <html lang="en"> <body className="container py-6"> <> <ConfigureAmplifyClientSide /> {children} </> </body> </html> );}import { Amplify } from "aws-amplify";
Amplify.configure(config, { ssr: true });
export default function ConfigureAmplifyClientSide() { return null;}import { fetchAuthSession } from "aws-amplify/auth";
// The layout calls configure, but fetchAuthSession ends up executing first// Will throw "AuthUserPoolException: Auth UserPool not configured."fetchAuthSession().then((session) => { console.log(session);});
export default function HomePage() { return ( <div className="box"> ... </div> );}これを修正するには、すべてのAmplify API呼び出しをアプリケーションライフサイクル内に移動することをお勧めします。たとえば、Reactを使用している場合、useEffectフックを使用してアプリが読み込まれる前に実行すべき関数に対して使用できます:
import { Amplify } from 'aws-amplify';import ComponentX from 'module-fetch-auth';
Amplify.configure();
export default function App() { return ( <div> <ComponentX /> </div> );}import { type AuthSession, fetchAuthSession } from 'aws-amplify/auth';import { useEffect, useState } from 'react';
export default function ComponentX() { const [session, setSession] = useState<AuthSession|undefined>();
const getSession = async () => { try { const currentSession = await fetchAuthSession(); setSession(currentSession); } catch (error: unknown) { console.log(error); } };
useEffect(() => { getSession(); }, []);
return ( <div className="box"> ... </div> );}チェック3: マルチページアプリの各ページでAmplifyを設定する
マルチページアプリで作業している場合、アプリケーションの各ページ/ルートでAmplify.configure()を呼び出す必要があります。共通のソースファイルでAmplify.configureを呼び出し、各ページにインポートすることをお勧めします。