---
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 核心模块，包括安装所需依赖以及重写默认的 webpack 配置。

### polyfill node 核心模块报错的原因是什么？

在 webpack 最新一次更新到 \_\_\_ 版本之前，webpack \< 5 默认是包含 NodeJS polyfill 的。由于[当前版本的 webpack](https://github.com/webpack/webpack)不再默认包含 NodeJS polyfill，这导致使用 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 核心模块报错的样子如下：

## 4 个简单步骤，修复 webpack 5 中的 polyfill node 核心模块问题

create-react-app 和 polyfill 报错的主要问题在于，create-react-app 默认**将 webpack 配置文件隐藏在 node-modules 中**，并在构建时生成该文件，导致开发者无法对其进行修改。

好在有一个包，[react-app-rewired](https://www.npmjs.com/package/react-app-rewired)，可以让开发者轻松编辑 webpack 配置文件，修复 polyfill node 核心模块报错。

### 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 库和钱包提供方在浏览器中运行所需的缺失依赖。

### 4. 重写 package.json 以包含 webpack 配置

在 package.json 文件中，将以下三个 scripts 字段中的 **react-scripts** 替换为 **react-app-rewired**，以更新 webpack 配置：

- start
- build
- test

以下是替换 react-scripts **之前**的 package.json 文件：

以下是将 react-scripts 替换为 react-app-rewired 脚本**之后**的 package.json 文件：

就是这样！

现在，polyfill node 核心模块的报错应该已被修复，缺失的 NodeJS polyfill 应该已被包含进你的应用中，并且你的应用应该可以正常配合 web3.js 和 [Alchemyweb3.js library](https://github.com/alchemyplatform/alchemy-web3) 使用了。