webpack 5でnode coreモジュールをpolyfillする方法

このチュートリアルでは、react-app-rewired packageを使用してwebpack version 5以降でnode core modulesをpolyfillする方法、必要な依存関係のインストール方法、デフォルトのwebpack設定の上書き方法を学びます。

polyfill node core moduleエラーの原因は何か

webpack version ___の最新アップデートまで、webpack < 5はデフォルトでNodeJS polyfillsを含んでいました。現在のバージョンのwebpackはデフォルトでNodeJS polyfillsを含まなくなったため、create-react-appとwebpack > 5を使ってweb3.jsやalchemyweb3.js libraryでアプリケーションを構築している開発者に問題が発生しています。

polyfill node core moduleエラーは次のような見た目になります。

webpack 5でpolyfill node core modulesを修正する4つの簡単なステップ

create-react-appとpolyfillエラーの主な問題は、create-react-appがデフォルトでwebpack設定ファイルをnode-modules内に隠していることです。これによりファイルはビルド時に生成され、開発者はそれを変更できません。

幸い、react-app-rewiredというパッケージがあり、これを使うと開発者はwebpack設定ファイルを簡単に編集し、polyfill node core moduleエラーを修正できます。

1. react-app-rewiredをインストールする

まず、お好みのパッケージマネージャーでreach-app-rewiredパッケージをインストールします。

react-app-rewiredパッケージをyarnでインストール：

react-app-rewiredパッケージをnpmでインストール：

2. 不足している依存関係をインストールする

次に、以下の不足している依存関係をインストールします。

• crypto-browserify
• stream-browserify
• assert
• stream-http
• https-browserify
• os-browserify
• url

不足している依存関係をyarnでインストール：

yarn add process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

不足している依存関係をnpmでインストール：

3. create-react-appのwebpack設定ファイルを上書きする

プロジェクトのルートフォルダにconfig-overrides.jsという新しいファイルを作成し、次のコードを追加します。

このconfig-overrides.jsのコードスニペットは、ブラウザ上でweb3ライブラリとwallet providersをサポートするために必要な、不足している依存関係をwebpackがどのように解決するかを指定しています。

4. package.jsonを上書きしてwebpack設定を含める

package.jsonファイル内で、以下の3つのscriptsフィールドについてreact-scriptsをreact-app-rewiredスクリプトに置き換え、webpack設定を更新します。

• start
• build
• test

react-scriptsを置き換える前のpackage.jsonファイルは次のようになります。

react-scriptsをreact-app-rewiredスクリプトに置き換えた後のpackage.jsonファイルは次のようになります。

以上です。

これで、polyfill node core moduleエラーが修正され、不足していたNodeJS polyfillsがアプリに含まれるようになり、アプリはweb3.jsおよびAlchemyweb3.js libraryで動作するはずです。