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

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

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

在 webpack ___ 的最新更新之前，webpack < 5 預設會包含 NodeJS polyfills。由於目前版本的 webpack 不再預設包含 NodeJS polyfills，這導致使用 create-react-app 搭配 webpack > 5 建置應用程式，並使用 web3.js 和 alchemyweb3.js library 的開發者出現問題。

以下是 polyfill node core module 錯誤的樣子：

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

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

使用 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 正常運作。