Uncaught ReferenceError: Buffer is not defined

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

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.

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

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

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

yarn add 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.

This worked for me

npm install --save buffer

Then in the file where I was using buffer

import { Buffer } from 'buffer';

I guess it wasn't installed, but my IDE already had type descriptions for it? Idk

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.

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.