---
title: "如何在 webpack 5 中 polyfill node 核心模組"
description: "學習如何使用 react-app-rewired 套件，在 webpack 5 以上版本中 polyfill node 核心模組，包含安裝所需的相依套件，以及覆寫預設的 webpack 設定。"
---

# 如何在 webpack 5 中 polyfill node 核心模組

在本教學中，你將學習如何使用 **react-app-rewired 套件**，在 webpack 5 以上版本中 polyfill node core modules，包括安裝所需的相依套件，以及覆寫預設的 webpack 設定。

### 什麼原因導致 polyfill node core module 錯誤？

在 webpack \_\_\_ 的最新更新之前，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 錯誤的樣子：

## 4 個簡單步驟修復 webpack 5 中的 polyfill node core modules

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 套件。

使用 yarn 安裝 react-app-rewired 套件：

使用 npm 安裝 react-app-rewired 套件：

### 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 程式碼片段告訴 webpack 如何解析瀏覽器中支援 web3 libraries 和 wallet providers 所需的缺少相依套件。

### 4. 覆寫 package.json 以包含 webpack 設定

在 package.json 檔案中，將以下三個 scripts 欄位的 **react-scripts** 替換為 **react-app-rewired** scripts，以更新 webpack 設定：

- start
- build
- test

以下是替換 react-scripts **之前**的 package.json 檔案：

以下是將 react-scripts 替換為 react-app-rewired scripts **之後**的 package.json 檔案：

就是這樣！

現在，polyfill node core module 錯誤應該已經修復，缺少的 NodeJS polyfills 應該已包含在你的應用程式中，並且你的應用程式應該可以與 web3.js 和 [Alchemyweb3.js library](https://github.com/alchemyplatform/alchemy-web3) 正常運作。