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 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 e alchemyweb3.js.

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, 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.