webpack4とelectronでfsモジュールが見つからないエラーの解決方法について

webpack4とelectronでfsモジュールが見つからない問題

webpack4とelectronを使って開発している場合にfsモジュールが見つからないエラーが出てきました。

まずfsモジュールについてですが、これはファイルシステムを使用する際に利用するものです。

fs.readFile()といったように使用するものです。

webpack4でビルドを実行した際に以下のようなエラーとして出力されます。

ERROR in ./node_modules/electron/index.js
Module not found: Error: Can't resolve 'fs' in './node_modules/electron'
resolve 'fs' in './node_modules/electron'
  Parsed request is a module
  using description file: ./node_modules/electron/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration

この解決方法について試したことを記事にします。

調査1

まず最初に以下のような対応を見つけました。

module.exports = {
  node: {
    fs: "empty"
  }
}

webpack.config.jsに以上の設定を追加することでエラーが消えるという対応です。

この対処の場合、nodeのfsモジュールをからのオブジェクトで置き換えることになります。

https://webpack.js.org/configuration/node/#node

この問題点はいざfsモジュールを使用した際にからのオブジェクトになっているので利用できなくなるということです。

いざ使う際に別のモジュールを取り込んで開発した場合、また別の問題が出てくる可能性があります。 そして作業が止まります。

使えるものは最初から使えたほうが良いでしょう。

調査2

次に以下のような対応を見つけました。

module.exports = {
  target: 'node',
}

webpack.config.jsに以上の設定を追加するとエラーが消えるというものです。

targetをnodeとすることでエラーが消えます。

これはnodejsを使った環境で使用する場合に設定する値です。

サーバーサイドプログラミングにおいてはこれを設定しても良いと思いますが、electronにおいては間違いかと思います。

electronはあくまでもフロントエンドのアプリケーションなので。

ということでこの対応方法は設定しないほうが良いでしょう。

解決方法

たどり着いた解決方法です。

参考になった記事がこちらです。

https://blog.mbaas.nifcloud.com/entry/2019/04/10/103228

この記事中の以下の部分がヒントになりました。

さらに Module not found: Error: Can't resolve 'fs' というエラーも出ます。 これはビルド環境はNode.jsながら、対象がWebブラウザであるために発生するエラーです

ということで、webpack.config.jsに以下の設定を追加します。

module.exports = {
  target: 'electron-main',
}

つまり、electronようにコンパイルするようにするということです。

設定値については以下のページに載っていました。

https://webpack.js.org/configuration/target/#string

ちなみにですが、webを設定しても解決するのではと考えたのですが、解決しませんでした。

最後に

エラー内容で検索したら解決方法は出るのですが、なぜその解決方法なのかも調べたほうが良いと思いました。

1. エラー内容で検索する
2. 解決方法を見つける
3. 解決方法で不明な点を調べる
4. 現状を解決するのに適切な解決方法かを検討する
5. 解決方法を取り込む

何時間も詰まった場合は以下のようにする。

1. 現状使っているライブラリのドキュメントを読み込む

以上です。