---
title: "webpack 5でnode coreモジュールをpolyfillする方法"
description: "react-app-rewiredパッケージを使用し、必要な依存関係をインストールしてデフォルトのwebpack設定を上書きすることで、webpackバージョン5以降でnode coreモジュールをpolyfillする方法を解説します。"
---

# 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](https://github.com/webpack/webpack)はデフォルトでNodeJS polyfillsを含まなくなったため、create-react-appとwebpack \> 5を使って[web3.js](https://www.alchemy.com/dapps/web3-js)や[alchemyweb3.js library](https://www.alchemy.com/docs/alchemy-quickstart-guide)でアプリケーションを構築している開発者に問題が発生しています。

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

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

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

幸い、[react-app-rewired](https://www.npmjs.com/package/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](https://github.com/alchemyplatform/alchemy-web3)で動作するはずです。