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:

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!

whileone · Accepted Answer · 2021-08-10 08:15:51Z

113

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

answered Aug 10, 2021 at 8:15

whileone

2,8856 gold badges24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

tonisives Over a year ago

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 Over a year ago

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

tonisives Over a year ago

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

nsun Over a year ago

hello @whileone -- this helped my use case, but by any chance do you know why this works and wasnt needed in Webpack 4? Why in Webpack 5? -- its been a nightmare fixing breaking changes

STEEL Jun 26 at 8:21

thanks this helped :) even in the AI era

parliament · Accepted Answer · 2022-04-21 11:28:44Z

76

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

answered Apr 21, 2022 at 11:28

parliament

23.2k39 gold badges155 silver badges248 bronze badges

4 Comments

Florian Metzger-Noel Over a year ago

Great! This works independent of the framework used.

Gustavo Garcia Over a year ago

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.

Black Beard Over a year ago

If you use React with Vite and don't have any polyfill files - add it somewhere in the root of your app. For example in App.jsx or in main.jsx

Buchi Over a year ago

worked for me Angular

Paul · Accepted Answer · 2022-02-28 07:31:02Z

43

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.

edited Feb 28, 2022 at 7:31

answered Feb 21, 2022 at 10:50

Paul

1,4814 gold badges22 silver badges44 bronze badges

3 Comments

Adam Thompson Over a year ago

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

Learner Over a year ago

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

Korimako Over a year ago

Thank you. One thing that threw me - is that I was using "yarn start" - and in your version, you have "debug" as the name of the start script - so "start" wasn't working. I changed it to "start" and everything worked as expected. Just noting this in case others also fall down that rabbit hole.

esafresa · Accepted Answer · 2022-07-23 06:29:53Z

14

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

answered Jul 23, 2022 at 6:29

esafresa

60010 silver badges22 bronze badges

1 Comment

NULL pointer Over a year ago

Is there some way to install this globally? Like how you no longer need to import React to use React functionality? I don't understand how/why we no longer need to import React but if we could use the same tecnhnique with Buffer, I would not need to import it - and I need to import it into my node_modules/mqtt-packet/constants file to make my mqtt-react-hooks package useable.

Fomalhaut · Accepted Answer · 2022-10-31 10:26:52Z

12

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

edited Oct 31, 2022 at 10:26

Fomalhaut

9,99111 gold badges59 silver badges111 bronze badges

answered Mar 17, 2022 at 15:41

Yulian

6,84911 gold badges73 silver badges103 bronze badges

Comments

Soroosh Ansari · Accepted Answer · 2023-01-03 16:32:25Z

7

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;

answered Jan 3, 2023 at 16:32

Soroosh Ansari

711 silver badge3 bronze badges

Comments

Harshadeva Priyankara Bandara · Accepted Answer · 2022-09-05 08:11:59Z

4

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.

answered Sep 5, 2022 at 8:11

Harshadeva Priyankara Bandara

1691 silver badge7 bronze badges

2 Comments

Abdul Manan Over a year ago

TypeError: defineConfig is not a function

luke Over a year ago

What webpack, vue, and npm versions are you using? vue 3 with webpack 5.88.2 and npm 9.8.1 causes a TypeError in `webpack\lib\compilation.js`?

sirKris van Dela · Accepted Answer · 2022-02-24 23:38:18Z

3

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

yarn add buffer

answered Feb 24, 2022 at 23:38

sirKris van Dela

757 bronze badges

Comments

vlasterx · Accepted Answer · 2023-05-31 11:47:12Z

3

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.

answered May 31, 2023 at 11:47

vlasterx

4,0161 gold badge25 silver badges30 bronze badges

Comments

Wells · Accepted Answer · 2022-05-14 20:59:22Z

1

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.

answered May 14, 2022 at 20:59

Wells

1312 silver badges11 bronze badges

Comments

nitzan · Accepted Answer · 2024-03-20 16:08:21Z

1

If you're using Craco, this is the way to format the code in craco.config.js to resolve the Buffer is not defined:


//plugin to avoid Buffer is not defined
webpackConfig.plugins.push(
  new webpack.ProvidePlugin({
     process: 'process/browser',
  }),
  new webpack.ProvidePlugin({
     Buffer: ['buffer', 'Buffer'],
  })
);

edited Mar 20, 2024 at 16:08

answered Mar 5, 2024 at 16:56

nitzan

213 bronze badges

Comments

NgVtu Bot · Accepted Answer · 2024-09-19 00:04:08Z

Install node-polyfill-webpack-plugin:

This plugin will add polyfills for Node.js core modules that your dependencies might be expecting.
```
npm install node-polyfill-webpack-plugin
```

Update Your Webpack Configuration:

If you're using react-app-rewired for customizing Webpack, you can modify your config-overrides.js file to include this plugin:

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

module.exports = function override(config, env) {
  // Add polyfills for Node.js core modules
  config.plugins = [
    ...config.plugins,
    new NodePolyfillPlugin()
  ];

  // Ensure that extensions are properly handled
  config.resolve.extensions = ['.js', '.jsx', '.ts', '.tsx', '.mjs', '.json'];

  return config;
};

nnsk · Accepted Answer · 2022-02-19 09:16:02Z

0

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.

answered Feb 19, 2022 at 9:16

nnsk

1331 silver badge5 bronze badges

2 Comments

fl-web Over a year ago

Check answer of @parliament here

TheDiveO Over a year ago

That really isn't a solution, as there are more and more security issues with the dependencies pulled in by CRA 4.

bFunc · Accepted Answer · 2022-06-02 08:41:19Z

0

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.

answered Jun 2, 2022 at 8:41

bFunc

1,4751 gold badge13 silver badges22 bronze badges

Comments

Tyler2P · Accepted Answer · 2023-06-25 11:53:04Z

0

Install casbin.js@^1.0.1 instead of casbin.

edited Jun 25, 2023 at 11:53

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Jun 23, 2023 at 11:06

Amit Nuhiyan

1

Comments

Dave Cole · Accepted Answer · 2023-11-21 23:25:11Z

0

The CSS minimizer in Webpack 5 is more strict about what is allowed in the CSS files. You likely have a misplaced / somewhere in your CSS.

For instance, it does not like // comments: // This will break

Also, check for slashes in any className paths, e.g.: .myDiv/otherDiv

Removing these will solve your problem and allow you to keep your optimized CSS. Replace any comments using the /* */ syntax. Also check to make sure those are well-formed.

answered Nov 21, 2023 at 23:25

Dave Cole

2,7752 gold badges25 silver badges26 bronze badges

Comments

Michael Rovinsky · Accepted Answer · 2025-08-04 08:35:37Z

0

I have a React/TS/Vite project.

The only thing that worked for me is putting a script tag directly to index.html:

        <script type="module">
            import { Buffer } from 'buffer';
            window.Buffer = Buffer;
          </script>

answered Aug 4 at 8:35

Michael Rovinsky

7,2957 gold badges17 silver badges33 bronze badges

Collectives™ on Stack Overflow

Uncaught ReferenceError: Buffer is not defined

17 Answers 17

5 Comments

4 Comments

3 Comments

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

17 Answers 17

5 Comments

4 Comments

3 Comments

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related