Our application kept showing the error in the title. The problem is very likely related to Webpack 5 polyfill and after going through a couple of solutions:
fallback: {
"stream": require.resolve("stream-browserify"),
"buffer": require.resolve("buffer/")
}
alias: {
"buffer": "buffer",
"stream": "stream-browserify"
}
We are still seeing the dreadful 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)
Our setup is vanilla NodeJS + TypeScript + Webpack for multi-target: node + browser. Any help would be great!
Answering my own question. Two things helped to resolve the issue:
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")
}
},
Downgrading react-scripts to 4.0.3 worked https://github.com/terra-money/terra.js/issues/223. It may not be the optimal solution, but it was the only thing that worked for me.
Everyone who came here because of react-scripts (5.0.0) (@whileons answer is correct, this is only the configuration for react-scripts):
First, add these dependencies to your package.json:
"buffer": "^6.0.3",
"process": "^0.11.10",
"stream-browserify": "^3.0.0"
"react-app-rewired": "^2.2.1" --dev
Update your package.json scripts.
Before:
"scripts": {
"debug": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
After
"scripts": {
"debug": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
Create a file config-overrides.js in the root folder (NOT under src, in the same folder like your package.json) and paste the following code inside:
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
}
Dont forget to delete node_modules and npm install it again.
You could also just install the following library: https://github.com/feross/buffer
yarn add buffer
What worked for me is the following:
First:
npm install --save buffer
Then:
// webpack.config.js
const webpack = require("webpack");
module.exports = {
plugins: {
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
}),
// ..
}
// ..
}