Loading chunk node_modules_next_dist_client_dev_noop_js failed にぶちあたった
はじめに
これまでバックエンド系の業務がメインだった筆者なのですが、だんだんフロントエンドの業務も増えてきており、最近ではReactやNext.jsなどの勉強をしています。
今回はNext.jsのプロジェクトを立ち上げた時に発現したエラーについて情報を備忘録的に残したいと思います。
発生したエラー
私はローカル環境で、業務のプロジェクトと個人開発のプロジェクトを都度yarnで立ち上げて開発をしています。
今回のエラーは、業務で使っているReactプロジェクトを停止して、個人プロジェクトをyarn devで立ち上げた時に発生しました。
ChunkLoadError: Loading chunk node_modules_next_dist_client_dev_noop_js failed.
対処方法
今回のエラーについて調べてみると、結構同じエラーで悩んでいる方々いらっしゃるようでした。
先人の知恵の再掲になってしまいますが、対応方法をまとめると以下のようになります。
- プロジェクトの停止
- プロジェクトディレクトリに存在する
.nextを削除 - 再度プロジェクトのbuild & start (
yarn devやyarn startなど) - ブラウザの更新(
shift+F5+shift+cmd+R)
原因の調査
いろいろな記事や Github issue も確認させて頂いたのですが、原因は不明でした。。。
どうやらキャッシュが影響しているようですが、どうしても解明できませんでした。
It apparently is a cache issue.
今後やること
今回のエラー内容に ChunkLoadErrorという文言があり、なんだこれと調べてみました。
ですが、結局わからなかったので、これから調べていきたいなと思います。(もしご存知の方いらっしゃればコメントからでも是非教えてください！)
一応、英語では Chunk = 塊、データのひとまとまり という意味らしく、大きなデータを分割して取り扱うものらしいです。
推察してみる
Next.js プロジェクト内で「chunk」とかで検索してみると、micromark-util-chunked というものが見つかりました。
このライブラリの説明を調べてみると、
micromark utility to splice and push with giant arrays.
ということで、どうやら大きいサイズの配列を操作するライブラリらしいです。
まだまだわからないのですが、この配列操作にあたりどこかのデータが破損して本エラーになっているのか？とか推察している段階です。
今後時間がある時にこのあたり調べていければなと思います。
Discussion