Cómo hacer polyfill de módulos core de node en webpack 5

En este tutorial, aprenderás a hacer polyfill de los módulos core de Node en webpack versión 5 y superior usando el paquete react-app-rewired, instalando las dependencias necesarias y sobreescribiendo la configuración predeterminada de webpack.

¿Qué causa el error de polyfill de módulos core de node?

Hasta la última actualización de webpack versión ___, webpack < 5 solía incluir polyfills de NodeJS por defecto. Debido a que la versión actual de webpack ya no incluye polyfills de NodeJS por defecto, esto está causando problemas a los desarrolladores que usan create-react-app con webpack > 5 para construir aplicaciones con las librerías web3.js y alchemyweb3.js.

Así es como se ve el error de polyfill de módulos core de node:

4 pasos simples para corregir el error de polyfill de módulos core de node en webpack 5

El problema principal con create-react-app y el error de polyfill es que create-react-app, por defecto, oculta el archivo de configuración de webpack dentro de node-modules, y al hacer esto, genera el archivo en el momento del build, dejando a los desarrolladores sin poder modificarlo.

Por suerte existe un paquete, react-app-rewired, que permite a los desarrolladores editar fácilmente el archivo de configuración de webpack y corregir el error de polyfill de módulos core de node.

1. Instala react-app-rewired

Primero, instala el paquete react-app-rewired con tu gestor de paquetes preferido.

Instala el paquete react-app-rewired con yarn:

Instala el paquete react-app-rewired con npm:

2. Instala las dependencias faltantes

A continuación, instala estas dependencias faltantes:

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

Instala las dependencias faltantes con yarn:

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

Instala las dependencias faltantes con npm:

3. Sobreescribe el archivo de configuración de webpack de create-react-app

En la carpeta raíz de tu proyecto, crea un nuevo archivo llamado config-overrides.js, y agrégale el siguiente código:

Este fragmento de código de config-overrides.js le indica a webpack cómo resolver las dependencias faltantes que se necesitan para dar soporte a las librerías de web3 y a los proveedores de wallets en el navegador.

4. Sobreescribe el package.json para incluir la configuración de webpack

Dentro del archivo package.json, reemplaza react-scripts por los scripts de react-app-rewired en los siguientes tres campos de scripts para actualizar la configuración de webpack:

• start
• build
• test

Así es como se ve el archivo package.json antes de reemplazar los react-scripts:

Así es como se ve el archivo package.json después de reemplazar los react-scripts por los scripts de react-app-rewired:

¡Eso es todo!

Ahora, el error de polyfill de módulos core de node debería estar corregido, los polyfills de NodeJS faltantes deberían estar incluidos en tu aplicación, y tu aplicación debería funcionar con web3.js y con la librería Alchemyweb3.js.