Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
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:
Setting fallback + install with npm
fallback: {
"stream": require.resolve("stream-browserify"),
"buffer": require.resolve("buffer/")
Setting alias
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:
Adding plugins section with ProviderPlugin into webpack.config.js
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',
Also add in resolve.fallback into webpack.config.js:
resolve: {
extensions: [ '.ts', '.js' ],
fallback: {
"stream": require.resolve("stream-browserify"),
"buffer": require.resolve("buffer")
–
–
–
I've tried all the answers here to resolve this issue and nothing worked for me. What did work for me was putting the following in my polyfills.ts:
import { Buffer } from 'buffer';
// @ts-ignore
window.Buffer = Buffer;
and of course, npm install --save buffer
–
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.
–
–
–
–
Additional detail for VueJS developers,
this answer worked and my vue.config.js file was like this.
const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack');
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
plugins: [
// Work around for Buffer is undefined:
// https://github.com/webpack/changelog-v5/issues/10
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
resolve: {
extensions: ['.ts', '.js'],
fallback: {
"stream": require.resolve("stream-browserify"),
"buffer": require.resolve("buffer")
I deleted my node_modules folder and ran npm install again.
I was getting the same error, and this is how I solved the problem.
First:
npm install --save buffer
Then:
Added this to my app.tsx file.
window.Buffer = window.Buffer || require("buffer").Buffer;
I've found a bug when I tried to use TonWebSDK with create-react-app and found a fix for that.
After project setup with npx create-react-app my-app I imported tonweb from 'tonweb' but faced an error Uncaught ReferenceError: Buffer is not defined.
I run npm run eject in order to modify the webpack config. I added Buffer support to the plugins of webpack with next lines:
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
And this worked for me.
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.
–
It turns out that there is third-party plugin that provides all node.js polyfills (not just Buffer) out of the box:
node-polyfill-webpack-plugin.
It brings all polyfills as its own dependancies, so you should use
excludeAliases config property to define what polyfills you do not want to be included.
While everyone is suggesting to install polyfill, there is a native way in NodeJS to do this, per their documentation
import { Buffer } from 'node:buffer'
If you are using this in NodeJs, including Webpack, and not in the browser, this is the preferred solution.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
