ChunkLoadError: Loading chunk node_modules_next_dist_client_dev_noop_js failed

問題の概要

Next.jsを使用した開発中に、以下のようなエラーが発生することがあります：

ChunkLoadError: Loading chunk node_modules_next_dist_client_dev_noop_js failed.
(error: http://localhost:3000/_next/static/chunks/fallback/node_modules_next_dist_client_dev_noop_js.js)

このエラーは通常、開発サーバー（localhost:3000）で発生し、モーダルウィンドウで表示された後、閉じるとアプリケーションは正常に動作し続けます。この問題は主にキャッシュ関連の不整合が原因で発生します。

INFO

このエラーは本番環境では発生せず、開発環境でのみ見られる一時的な問題です。アプリケーションの機能自体に問題があるわけではありません。

主な解決策

1. キャッシュのクリア（最も効果的）

プロジェクトルートの.nextフォルダを削除し、再度開発サーバーを起動します：

# .nextフォルダを削除
rm -rf .next

# 開発サーバーを再起動
npm run dev
# または
yarn dev

その後、ブラウザで強制再読み込み（Shift+F5 または Ctrl+Shift+R）を実行してブラウザキャッシュもクリアします。

補足情報

Windows環境では、エクスプローラーで.nextフォルダを表示するために「隠しファイルを表示」設定を有効にする必要がある場合があります。

2. node_modulesの再インストール

上記で解決しない場合、node_modulesフォルダも削除して再インストールします：

# node_modulesと.nextを削除
rm -rf node_modules .next

# 依存関係を再インストール
npm install
# または
yarn install

# 開発サーバーを再起動
npm run dev

3. ブラウザのキャッシュとCookieのクリア

ブラウザ側のキャッシュが原因の場合もあります：

1. ブラウザの開発者ツールを開く（F12）
2. アプリケーション/ストレージタブを選択
3. キャッシュストレージとCookieをクリア
4. サイトデータを完全に削除

その他の原因と対策

ビルド構成の変更

最近プロジェクトの構成を変更した場合（例：next.config.jsの修正、パブリックフォルダのファイル削除、Tailwindプラグインの追加など）、.nextフォルダを削除して再ビルドする必要があります。

// next.config.jsでカスタムビルドディレクトリを設定している場合
module.exports = {
  distDir: 'nextjs', // カスタム設定時はこのフォルダを削除
}

サードパーティライブラリの競合

特定のライブラリ（例：next-sentryなど）が開発環境で競合を引き起こす場合があります：

# 問題のあるライブラリを一時的に削除
npm uninstall next-sentry
# または
yarn remove next-sentry

ライブラリのバージョンをダウングレードしたり、設定を見直すことで解決することもあります。

根本原因

このエラーは、Webpackのホットリロード機能とNext.jsの開発サーバー間のキャッシュ不整合によって発生します。開発中にコードが変更されると、Webpackは新しいチャンクを生成しますが、ブラウザが古いチャンクをキャッシュしていると、このようなエラーが発生します。

予防策

1. 定期的に.nextフォルダをクリーンアップする
2. 主要な変更後はブラウザキャッシュをクリアする習慣をつける
3. Next.jsを最新バージョンに保つ（バグ修正が含まれる場合があります）

注意

Gitリポジトリに.nextフォルダをコミットしないでください。このフォルダはビルド時に生成される一時的なファイルで、.gitignoreに追加することを推奨します。

まとめ

ChunkLoadErrorはNext.js開発で頻繁に遭遇する一時的な問題です。ほとんどの場合、キャッシュをクリアすることで簡単に解決できます。問題が続く場合は、node_modulesの再インストールやブラウザキャッシュの完全削除を試してみてください。

# 完全クリーンインストール手順
rm -rf node_modules .next
npm install
npm run dev

このエラーは開発体験に影響しますが、アプリケーションの本番ビルドやパフォーマンスには影響しないため、安心してください。