CODEWITHSUNDEEP
node.jswebpack
whileone
whileone

Reputation: 2845

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!

Upvotes: 105

Views: 229666

Answers (16)

NgVtu Bot
NgVtu Bot

Reputation: 61

  1. 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

  2. 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;
};

Upvotes: 1

nitzan
nitzan

Reputation: 21

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

Upvotes: 1

Dave Cole
Dave Cole

Reputation: 2775

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.

Upvotes: 0

Amit Nuhiyan
Amit Nuhiyan

Reputation: 1

Install casbin.js@^1.0.1 instead of casbin.

Upvotes: 0

vlasterx
vlasterx

Reputation: 3856

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.

Upvotes: 3

Soroosh Ansari
Soroosh Ansari

Reputation: 71

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;

Upvotes: 7

Yulian
Yulian

Reputation: 6769

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

Upvotes: 11

Harshadeva Priyankara Bandara
Harshadeva Priyankara Bandara

Reputation: 169

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.

Upvotes: 4

esafresa
esafresa

Reputation: 600

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

Upvotes: 14

bFunc
bFunc

Reputation: 1465

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.

Upvotes: 0

Wells
Wells

Reputation: 131

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.

Upvotes: 1

parliament
parliament

Reputation: 22964

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

Upvotes: 74

Paul
Paul

Reputation: 1441

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.

Upvotes: 42

sirKris van Dela
sirKris van Dela

Reputation: 75

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

yarn add buffer

Upvotes: 3

nnsk
nnsk

Reputation: 133

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.

Upvotes: 0

whileone
whileone

Reputation: 2845

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',
        }),
    ],
  1. Also add in resolve.fallback into webpack.config.js:
    resolve: {
        extensions: [ '.ts', '.js' ],
        fallback: {
            "stream": require.resolve("stream-browserify"),
            "buffer": require.resolve("buffer")
        }
    },

Upvotes: 112

Related Questions