設定エラーのトラブルシューティング
プロジェクトで設定なしまたは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 または 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';
// ComponentXのfetchAuthSession()はインポート時に実行されます
Amplify.configure();
export default function App() { return ( <div> <ComponentX /> </div> );}import { fetchAuthSession } from 'aws-amplify/auth';
fetchAuthSession(); // "AuthUserPoolException: Auth UserPool not configured."をスローします
export default function ComponentX() { return ( <div className="box"> ... </div> );}このエラーは、Next.jsレイアウトを使用してモジュールレベルで子コンポーネントの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";
// レイアウトがconfigureを呼び出しますが、fetchAuthSessionが最初に実行されます// "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を呼び出し、各ページにインポートすることをお勧めします。