Nuestra aplicación seguía mostrando el error en el título. Es muy probable que el problema esté relacionado con el polyfill de Webpack 5 y después de pasar por un par de soluciones:
fallback: { "stream": require.resolve("stream-browserify"), "buffer": require.resolve("buffer/") } alias: { "buffer": "buffer", "stream": "stream-browserify" }Seguimos viendo el terrible error:
rfc6979.js:3 Uncaught ReferenceError: Buffer is not defined at Object.4142 (rfc6979.js:3) at r (bootstrap:19) at Object.5892 (js.js:4) at r (bootstrap:19) at Object.4090 (bip32.js:5) at r (bootstrap:19) at Object.7786 (index.js:3) at r (bootstrap:19) at Object.1649 (MnemonicKey.js:50) at r (bootstrap:19)Nuestra configuración es Vanilla NodeJS + TypeScript + Webpack para múltiples objetivos: nodo + navegador. ¡Cualquier ayuda sería genial!
Respondiendo a mi propia pregunta. Dos cosas ayudaron a resolver el problema:
const webpack = require('webpack'); module.exports = { // ... plugins: [ // Work around for Buffer is undefined: // https://github.com/webpack/changelog-v5/issues/10 new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'], }), new webpack.ProvidePlugin({ process: 'process/browser', }), ], resolve: { extensions: [ '.ts', '.js' ], fallback: { "stream": require.resolve("stream-browserify"), "buffer": require.resolve("buffer") } },La degradación de los scripts de reacción a 4.0.3 funcionó https://github.com/terra-money/terra.js/issues/223 . Puede que no sea la solución óptima, pero fue lo único que funcionó para mí.
Todos los que vinieron aquí por react-scripts (5.0.0) (la respuesta de (@whileons es correcta, esta es solo la configuración para react-scripts):
Primero, agregue estas dependencias a su paquete.json:
"buffer": "^6.0.3", "process": "^0.11.10", "stream-browserify": "^3.0.0" "react-app-rewired": "^2.2.1" --devActualice sus scripts de package.json.
Antes:
"scripts": { "debug": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },Después
"scripts": { "debug": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-app-rewired eject" }, Cree un archivo config-overrides.js en la carpeta raíz (NO en src, en la misma carpeta que su paquete.json) y pegue el siguiente código dentro:
const webpack = require("webpack") module.exports = function override(config, env) { //do stuff with the webpack config... config.resolve.fallback = { ...config.resolve.fallback, stream: require.resolve("stream-browserify"), buffer: require.resolve("buffer"), } config.resolve.extensions = [...config.resolve.extensions, ".ts", ".js"] config.plugins = [ ...config.plugins, new webpack.ProvidePlugin({ process: "process/browser", Buffer: ["buffer", "Buffer"], }), ] // console.log(config.resolve) // console.log(config.plugins) return config } No olvide eliminar node_modules y npm install nuevamente.
También puede simplemente instalar la siguiente biblioteca: https://github.com/feross/buffer
yarn add buffer
Lo que funcionó para mí es lo siguiente:
Primero:
npm install --save bufferLuego:
// webpack.config.js const webpack = require("webpack"); module.exports = { plugins: { new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'], }), // .. } // .. }