der.ts:6 Uncaught ReferenceError: Buffer is not defined

[SyedImam1998]

I am facing this issue when i used
import { encrypt } from '@metamask/eth-sig-util';
i am facing this error
i have also tried
import {Buffer} from 'buffer';
Can someone please guide me here?

`

[mcmire]

Hi @SyedImam1998, I saw your comment in the other issue. No need to create another issue if it is related. I am going to paste the comment I left there:

Buffer is a class in the Node standard library, so it works in a Node context, but in a browser context, you will probably need to configure your preprocessor to replace this with a polyfill. If you're using Webpack, then you can:

1. Install the buffer module.
2. Configure Webpack to use it via the resolve.fallback option. This should allow you to use Buffer in your own code.
3. Configure Webpack with ProvidePlugin. This should fix dependencies like ethereumjs-util so that anywhere Buffer appears, it is automatically replaced with the class exported by buffer.

Hope that helps. Let me know if you encounter any more issues.

[Ian-Bright]

Hey @mcmire would you mind providing an example? I have tried the steps you described but still cannot get Buffer recognized. Here is my webpack.config.js file

module.exports = {
  resolve: {
    fallback: {
      buffer: require.resolve('buffer/'),
    },
  },
  plugins: [
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
    }),
  ],
};

EDIT: I was able to solve this by using craco but still would would love to know what is incorrect about my configuration :)