Uncaught ReferenceError: Buffer is not defined

Question

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/")
}

2. 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!

Solution 1

Answering my own question. Two things helped to resolve the issue:

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

2. Also add in resolve.fallback into webpack.config.js:

    resolve: {
        extensions: [ '.ts', '.js' ],
        fallback: {
            "stream": require.resolve("stream-browserify"),
            "buffer": require.resolve("buffer")
        }
    },

Solution 2

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 3

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 4

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

View more solutions

Comments

[nuiun]

thank you! Was pulling my hair out trying to get a Vue3 project up and running.

[whileone]

@womp np. can totally relate. I'm already bald.

[Evan]

also feel u, this is a nasty bug

[Caner]

thank you so much man, I was hitting my bald head to the walls..you made me stop!

[tonisives]

I am using react-scripts 5 and this solution doesnt work for me. I tried to use react-app-rewired to add config-overrides.js as described. But app still doesnt find buffer

[jfrumar]

Note @tonisives that you may need to clear your cache after this change - rm -fr node_modules/.cache

[tonisives]

Thanks! I managed to fix it by adding yarn add process Here is my full overview github.com/terra-money/terra.js/issues/223

[Robin Curbelo]

thank you! you saved my day

[Rob Angelier]

You saved me another day of research, thanks sir.

[Rohit Kaushal]

can you please help me resolve this issue in vite - react ( it doesn't use webpack).

[Adam M Thompson]

This seems to work for me. Just wanted to point out the file name needs to be config-overrides.js (plural)

[Liki Crus]

Hey @whileone, could you guide me how to configure this setting on CRACO 6? Thanks in advance.

[Learner]

Very helpful, I forgot to follow the last line Delete node_modules. But finally deleted node_modules and installed again to get things running.

[Florian Metzger-Noel]

Great! This works independent of the framework used.

[Gustavo Garcia]

I was using Buffer on a single file. By just importing and setting window.Buffer on that single file fixed the problem for me without creating the polyfills.ts file.

[fl-web]

Check answer of @parliament here