---
title: "Como fazer polyfill de módulos core do node no webpack 5"
description: "Aprenda a fazer polyfill de módulos core do node no webpack versão 5 e superior usando o pacote react-app-rewired, instalando as dependências necessárias e sobrescrevendo a configuração padrão do webpack."
---

# Como fazer polyfill de módulos core do node no webpack 5

Neste tutorial, você vai aprender a fazer o polyfill dos módulos core do Node no webpack versão 5 e superior usando o **pacote react-app-rewired**, instalando as dependências necessárias e sobrescrevendo a configuração padrão do webpack.

### O que causa o erro de polyfill dos módulos core do node?

Até a última atualização do webpack versão \_\_\_, o webpack \< 5 costumava incluir polyfills do NodeJS por padrão. Como a [versão atual do webpack](https://github.com/webpack/webpack) não inclui mais polyfills do NodeJS por padrão, isso está causando problemas para desenvolvedores que usam create-react-app com webpack \> 5 para construir aplicações com as bibliotecas [web3.js](https://www.alchemy.com/dapps/web3-js) e [alchemyweb3.js](https://www.alchemy.com/docs/alchemy-quickstart-guide).

Veja como é o erro de polyfill dos módulos core do node:

## 4 passos simples para corrigir o polyfill dos módulos core do node no webpack 5

O principal problema com o create-react-app e o erro de polyfill é que o create-react-app, por padrão, **esconde o arquivo de configuração do webpack dentro do node-modules** e, ao fazer isso, gera o arquivo no momento do build, deixando os desenvolvedores sem conseguir modificá-lo.

Felizmente existe um pacote, o [react-app-rewired](https://www.npmjs.com/package/react-app-rewired), que permite aos desenvolvedores editar facilmente o arquivo de configuração do webpack e corrigir o erro de polyfill dos módulos core do node.

### 1. Instale o react-app-rewired

Primeiro, instale o pacote reach-app-rewired com o gerenciador de pacotes de sua preferência.

Instale o pacote react-app-rewired com yarn:

Instale o pacote react-app-rewired com npm:

### 2. Instale as dependências ausentes

Em seguida, instale estas dependências ausentes:

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

Instale as dependências ausentes com yarn:

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

Instale as dependências ausentes com npm:

### 3. Sobrescreva o arquivo de configuração do webpack do create-react-app

Na pasta raiz do seu projeto, crie um novo arquivo chamado config-overrides.js e adicione o seguinte código a ele:

Este trecho de código do config-overrides.js diz ao webpack como resolver as dependências ausentes necessárias para suportar bibliotecas web3 e provedores de carteira no navegador.

### 4. Sobrescreva o package.json para incluir a configuração do webpack

No arquivo package.json, substitua **react-scripts** por **react-app-rewired** nos três campos de scripts a seguir para atualizar a configuração do webpack:

- start
- build
- test

Veja como é o arquivo package.json **antes** de substituir os react-scripts:

Veja o arquivo package.json **depois** de substituir os react-scripts pelos scripts do react-app-rewired:

É isso!

Agora, o erro de polyfill dos módulos core do node deve estar corrigido, os polyfills ausentes do NodeJS devem estar incluídos no seu app, e seu app deve funcionar com as bibliotecas web3.js e [Alchemyweb3.js](https://github.com/alchemyplatform/alchemy-web3).