← 戻る

Astro 5: getStaticPaths()のモジュールスコープ分離に注意

astro static-generation debugging

問題

Astro のページファイル（.astro）でフロントマター内に定義した定数を、export async function getStaticPaths() から参照すると ReferenceError が発生する。

---
const ITEMS_PER_PAGE = 10;

export async function getStaticPaths() {
  const pageSize = ITEMS_PER_PAGE; // ❌ ReferenceError
  // ...
}
---

原因

getStaticPaths() はビルド時に別のスコープで実行されるため、フロントマターで定義した定数にアクセスできない。

解決策

パターン1: getStaticPaths() 内で定義

---
export async function getStaticPaths() {
  const ITEMS_PER_PAGE = 10; // ✓ ローカルで定義
  // ...
}
---

パターン2: 外部ファイルからインポート

// src/config.ts
export const ITEMS_PER_PAGE = 10;
---
import { ITEMS_PER_PAGE } from '../config';

export async function getStaticPaths() {
  const pageSize = ITEMS_PER_PAGE; // ✓ インポートされた定数
  // ...
}
---

デバッグのコツ

getStaticPaths() の catch でエラーを握り潰すと、ページが0件生成される（404）という症状になり、原因特定が困難。最低限ログ出力を：

export async function getStaticPaths() {
  try {
    // ...
  } catch (error) {
    console.error('getStaticPaths failed:', error); // 必ず出力
    return [];
  }
}