はじめに
この記事では、Next.jsでModule not found: Can't resolve 'fs'
のようなエラーを、バージョンがそれぞれ9.3以前と9.4以降の時の対処法を書きます。
バージョン9.4の場合
以下の条件によって、設定ファイルの有無が決まります。
fs を使う場所 |
設定ファイル |
---|---|
getStaticProps と getServerSideProps
|
false |
それ以外(例えば、通常の関数内) | true |
つまり、getStaticProps
と getServerSideProps
関数以外でもfs
を使う場合は
次のような設定ファイルが必要になります。
空のオブジェクト渡すことで、npmパッケージがfs
モジュールに依存しないようにします。
next.config.js
module.exports = {
webpack: (config, { isServer }) => {
if (!isServer) {
config.node = {
fs: 'empty'
};
}
return config;
}
};
バージョン9.3以前
以下の条件によって、設定ファイルの有無が決まります。
fs を使う場所 |
設定ファイル |
---|---|
getInitialProps |
false |
それ以外(例えば、通常の関数内) | true |
注意
getInitialProps
内で使用する場合は、上述した設定ファイルは不要ですが
client bundleをビルドをする場合は、設定ファイルが必要だそうです。
なぜ、こんなややこしい?
そもそも、fs
の処理はクライアント側でなく、サーバー側のコードでのみ動くものだからだそうです。