【Next.js】webpack.cache.PackFileCacheStrategyのエラーの解決
技術約2分で読めます
この記事でわかること
- webpack.cache.PackFileCacheStrategy のメッセージが実はエラーではなく警告だということ
- .next を消して再起動すれば治る理由と、消しても安全な根拠
- 消しても再発するときに疑うべき別の原因
Next.js のプロジェクトをローカルで起動できること。webpack を使うビルド構成が対象です。
概要
この記事では、Next.jsアプリケーションのビルド時にwebpack.cache.PackFileCacheStrategyというエラーに遭遇した際の解決方法について説明します。
エラーメッセージ
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file or directory, stat '/Users/User名/Next_App/.next/cache/webpack/client-development/18.pack.gz'何が起きているか
アプリケーションのビルド時に、毎回ターミナルにこのメッセージが出ます。
ポイント
先頭の
<w> は warning（警告）の印です。つまりこれはビルドを止めるエラーではなく、キャッシュの書き込みに失敗しただけです。放置してもアプリは動きますが、キャッシュが効かない分だけ再ビルドが遅くなります。解決方法
プロジェクトのルートディレクトリ直下の .next フォルダを削除して、アプリケーションを再起動します。
rm -rf .next
npm run devTips
なぜこれで直るのか: 出ているのが webpack のキャッシュの読み書き失敗なので、キャッシュを入れているフォルダごと捨てて作り直させています。
.next は生成物なので、消してもソースには影響しません（次の起動が少し遅くなるだけです）。キャッシュだけを捨てたいなら rm -rf .next/cache でも構いません。注意
再発する場合は、別の原因を疑ってください。よくあるのは、ビルド中にエディタや Git の操作で
.next 配下が書き換わった、ディスクの空きがない、複数の npm run dev が同じプロジェクトで同時に走っている、といったケースです。参考リンク
おわりに
issue を見ても解決している感じがなかったので根本的な原因はわかりませんでした。
個人的には cache している webpack が怪しいなと思っているのですが、Next.jsに関する理解が甘いせいで完全に原因を探し切れていません。
もし、詳しく理解されている方がいらっしゃいましたら知見を共有いただけると幸いです。
更新履歴
- メッセージ先頭の <w> が警告でありビルドを止めるエラーではないことを補足。文章だけだった手順に実際のコマンドを追加。.next を消しても安全な理由と、再発する場合に疑うべき原因を追加。見出しの番号を削除。コードブロックの言語指定を javascript から text に修正。参考文献に入っていた旧ドメイン（vercel.app）の同記事へのリンクを削除し、裸 URL をタイトル付きに変更。
