Next.js で fs モジュールが使えない時に確認すること
はじめに
Next.js で、フルスタックアプリを構築しています。
先日、fs モジュールがうまく読み込めないエラーが発生しました。
そこで今回は、
エラーの解消と、その際に調べたことをまとめました。
時間の節約になれば、嬉しいです :)
検証環境：
・Next.js v14.2.5/ App Router
エラー：Module not found: Can't resolve 'fs' - NextJS
開発中に、npm run devコマンドで、ローカルサーバーを起動した際に、
以下の箇所でエラーが発生しました。
import fs from "fs";
まさに同様のスレッドが、Next.js の GitHub 上にもありました:
どうやら、API routes に限らず、page ファイルでも同様のエラーが出るようです！
結論:fsは、Node.js 環境でしか動かない
fsは、Node.js に組み込まれたモジュールなので、
Node.js 環境以外では動かない、、というだけです！
言い換えれば、:
- エッジランタイム環境では、動かない
- クライアントサイドの環境でも、動かない
今回発生したエラーの原因:fsは、エッジランタイム環境では動かない
公式のページ内にちゃんと、書いてありました。。🫠🫠
サポートされていない API
エッジランタイムには、次のようないくつかの制限があります。
- ネイティブの Node.js API はサポートされていません。たとえば、ファイルシステムを読み書きすることはできません。
今回の、筆者のケースでは、
API の処理を、エッジランタイム環境にて行うようにしています。
つまり、fsは、Node.js とは異なるエッジランタイム上では動かないので、
エラーが出ていたようです！
（原因がわかった後では、すごい当たり前ですね。。🫠）
なので、同様に、
クライアントサイドも Node.js 環境ではないので、fsをインポートしようとするとエラーが発生します。
解説:クライアントバンドルとfs
上記のエラー解決にあたって、調べたことは以下の通りです。
さらに深掘りしたい箇所があれば、適宜参照してください！
Next.js でクライアントバンドルを構築する
上記によると、
クライアントサイドで、fsを使用していなくても、インポートされているだけで、同様のエラーが発生するようです。
その際は、
getStaticProps()やgetServerSideProps()内で、fsを使用することで、回避できます。
もしくは、下記によると、
クライアントにバンドルする、モジュールの設定を追加することでも、エラーを回避できるようです。
その際は、next.config.jsファイルに、以下の記述を追加します：
module.exports = {
webpack5: true,
webpack: (config) => {
config.resolve.fallback = { fs: false };
return config;
},
};
node:fs とは ？
ちなみに、
fs は、ファイルシステム（File system）の略です。
下記のサイトによると、
node:fs モジュールは、Node.js でファイルの読み書きを行うための基本的な関数を提供するモジュールです。
つまり、ローカルのファイルやディレクトリを読み込む際に役立ちます。
fsは、Node.js 環境で使用することに、注意が必要ですね！
おわりに
最後まで読んでいただだき、ありがとうございます 🥳
下記の開発中に、調べたことの記録のような記事ですが、
少しでも参考になれば、嬉しいです！
そして、オリジナルのフリー LGTM 画像を生成できる、オープンソースのサイトを、リリースしました 🎉📦
よかったら、チェックしてみてください！
Happy Hacking :)
参考
もし間違いや補足情報などがありましたら、ぜひコメントを追加してください！
Discussion