はじめに

Next.jsを利用しているとnode_modulesのchokidarのreaddirpで問題が発生しnpm run devをする度に黄色のエラー文が表示されました。

この時私はまだ知らなかったのですが、chokidarはファイル監視を行いファイルの変更を検知して処理を実行できるモジュールのことみたいですね。

サイトをlocalhostで立ち上げたり、本番環境では特に問題がなかったのですが毎回黄色の文で注意されるのもなんだったので解決策を考えてみました。

開発環境

node v14.14.1 (Fermium)
npm v6.14.14
macOS BigSur

黄色で出力されるエラー文

このような文で始まり、 エラー文は黄色の太文字で出力されていました。

意味としてはデータをキャッシュへ保存しようとしている最中にエラーが発生し、その問題はchokidarのreaddirpを解決できなかったことを示しています。

[webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'readdirp' in [パス名]/node_modules/chokidar to a directory

解決方法

私が行った解決方法としては以下の手順です。

nodeのバージョンをアップグレード

nodeはバージョン17.0.1が最新版でリリースされていたので今回はそれをインストールします。

※現在v17.0.0以降にするとエラーが発生する可能性があるので心配な方はv16以前のものにアップグレードしてください。

v17.0.0以降にしてエラーが発生してしまった方は下記の記事を参考にしてみてください。
Node.jsをアップデートしたらエラーが発生し強制終了する

私はnodeのバージョン管理ツールとして「n」を使用します(他にはnodebrewやnodeenvもありますね)。

nodeがあってこその今回のエラーなのでnodeはもう導入済みだと思います。

下記コマンドでグローバルインストールしてしまいましょう。

npm install -g n

nのバージョン確認を行ってインストールができたか確認してみましょう。

n -V

latestとすることでnodeの最新版をインストールできます。

n latest// バージョンを指定したい方はlatestの代わりに17.0.0などバージョンの値を入れてください！

インストールが完了したらこちらも再度確認しておきましょう。

任意のバージョンになっていたら成功です！

node -v

package-lock.jsonとnode_modulesの削除

以下のコマンドを実行することで削除の確認をせずに一発で削除できます。

rm -rf package-lock.json node_modules/

npmのキャッシュを削除しておかないと次に行うnpmの再インストールでエラーが出る可能性があるので実行しておくことをお勧めします。

npm cache clean --force

npmの再インストール

削除したnode_modules/とpackage-lock.jsonが生成されます。

npm install

なぜこのエラーが発生したのか

私は当初、npm audit fixで修正できない依存関係があったためpackage-lock.jsonの中身を手動で修正しアップデートしていました。

その後、発見されている脆弱性はなくなったのですがアップデートをしてしまったためかnodeのバージョンが古く、対応しきれずにいた可能性があります。

おわりに

私が調べた限りだと日本語の記事はまだ存在しておらず、英語の記事も今回のエラー文と一致するものはなかったので同じ理由でお困りの方のお力添えができたらと思い記事にまとめました。

皆様のお役に立てれば幸いです。最後までご覧くださりありがとうございました。