webpackで「Module not found: Error: Can’t resolve ‘fs’」が出たときの対処法




まずwebpackとは

webpackはjs、css、imageを一つのファイルにまとめることで、これらを取得するための通信回数を減らすことが目的のツールです。webpackを使うことでフロントエンドでの描画スピードを高速にすることができます。

よくある問題点

webpackビルドして一つにまとめたファイルはブラウザやサーバーで実行されます。

ブラウザで実行する場合、ブラウザによって使える機能が異なります。サーバーで実行する場合はNode.jsとして実行するため、Node.jsのバージョンに注意する必要があります。

このようにビルドしたファイルの実行環境に対応したビルド方法が重要になります。

今回の問題点

このエラーはブラウザ環境向けにwebpackでビルドするファイルにNode.js固有の機能であるfsモジュールを使っているのが原因でした。

自分の実装した処理でfsを使っている場合はfsの処理を別の実装に変更するか消すかしかありません。

公式でもfsの変わりは今のところ準備されていません。もしfsを使っているライブラリを使っているのであれば使っていない別のものを使用するように変更しなければいけません。

よくある間違った回答

ネットでよくある間違った回答をあげます。

fs: ‘empty’やtarget: ‘node’を設定する。emptyを設定するとビルド後のファイルでfsは空になってしまいます。これはビルドは成功しても実際に使用した時にエラーになることが多いです。

target: ‘node’でうまくいっているのは実行環境がNode.jsだからですね。

GitHubのissueでもよく見かけます。ビルド後のファイルが実行環境に依存していることを分かっていない人がたまたまうまくいっているだけです。

ちなみにwebpackはデフォルトでブラウザ向けにビルドします。

The following two tabs change content below.

高妻智一

2013年CyberAgent新卒入社 スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。2年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。 2018年仮想通貨のスマホウォレットを提供するGinco Incにブロックチェーンエンジニアとして入社。






よく読まれている関連記事はこちら



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です