試行錯誤の連続：Cloudflare Pagesでのビルドエラー

August 10, 2025 development notes Cloudflare 開発ノート

試行錯誤の連続：Cloudflare Pagesでのビルドエラー

Gitプッシュは成功したものの、Cloudflare Pagesでのデプロイは失敗しました。次から次へとエラーに直面しました。

1. 構文エラー

   • 'App's'のような文字列内のアポストロフィによるJavaScript構文エラーが発生しました。
   • JSXタグの閉じ忘れ。

   解決策：文字列を二重引用符で囲み、閉じタグの不足を補い、基本的な構文エラーを修正します。

2. TypeScript型エラー

   • getBlogPostがnullを返す可能性がありましたが、nullチェックが不十分でした。
   • useState([]) で配列を初期化し、その後Contentful Entry型を割り当てようとしました。
   • console.log がJSX内に残っていました。
   • setAttribute に数値が渡されました。

   解決策：nullチェックを強化し、useState<Entry<any>[]>([] のように明示的に型を設定し、console.log を削除し、型変換には String() を使用します。

3. Cloudflare Pages Edge Runtimeエラー

   • 以下のルートはEdge Runtimeで実行するように設定されていませんでした：...

   解決策：page.tsx ファイルの先頭に export const runtime = 'edge'; を追加します。

   blog/[lang]/tags/[tag]/page.tsx が存在しなかったため、runtime = 'edge' を追加したプレースホルダーファイルが作成されました。

4. Cloudflare Pages Node.js互換性エラー

   • nodejs_compat 互換性フラグが設定されていません。

   解決策：Cloudflare Pagesダッシュボードで、[Settings] → [Functions] → [Compatibility Flags] に移動し、nodejs_compat を追加して有効にします。

学んだこと

• 最初から node_modules を .gitignore に追加すること！（基本だが最も重要）
• Git履歴に大きなファイルをコミットしてしまった場合は、履歴を書き換える必要があります。
• 履歴を書き換えるには、まずBFG Repo-Cleanerを試すのが安全で簡単です。
• BFGが機能しない稀なケースでは、git filter-branch が最後の手段です。
• filter-branch や push --force のような危険な操作を実行する前に、必ず変更をバックアップしてください！

この記事が、同じエラーで苦しんでいる誰かの助けになることを願っています。