'Uncaught ReferenceError: Buffer is not defined

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:

  1. Setting fallback + install with npm
fallback: {
  "stream": require.resolve("stream-browserify"),
  "buffer": require.resolve("buffer/")
}
  1. 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!

node.jswebpack


Solution 1:[1]

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.

Solution 2:[2]

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

Solution 3:[3]

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'],
    }),
    // ..
  }
  // ..
}

Solution 4:[4]

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.

Solution 5:[5]

You could also just install the following library: https://github.com/feross/buffer

yarn add buffer

Solution 6:[6]

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.

Solution 7:[7]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 parliament
Solution 3 Yulian
Solution 4 nnsk
Solution 5 sirKris van Dela
Solution 6 Wells
Solution 7 bFunc

Related Questions