ReferenceError: Buffer is not defined

On page load I’m getting the error Buffer is not defined:

It seems to only happen when I’ve imported the '@metamask/eth-sig-util' script and try to encrypt data:

import ethUtil from 'ethereumjs-util'
import sigUtil from '@metamask/eth-sig-util'

const encryptedData = ethUtil.bufferToHex(
  Buffer.from(
    JSON.stringify(
      sigUtil.encrypt({
        publicKey: publicKey,
        data: 'hello world data',
        version: 'x25519-xsalsa20-poly1305',
      })
    ),
    'utf8'
  )
)

I’ve tried adding in import { Buffer } from 'buffer/', but this doesn’t seem to help. Chrome version: Version 100.0.4896.88 (Official Build) (64-bit) on Ubuntu 20 and in FireFox 100.0 (64-bit).

If I omit import sigUtil from '@metamask/eth-sig-util' or

const encryptedData = ethUtil.bufferToHex(
  Buffer.from(
    JSON.stringify(
      sigUtil.encrypt({
        publicKey: publicKey,
        data: 'hello world data',
        version: 'x25519-xsalsa20-poly1305',
      })
    ),
    'utf8'
  )
)

The error goes away.

[mcmire]

Hi @SyedImam1998. Did you see my instructions above?

[mcmire]

Ah, perfect, that makes sense too! Glad I could help. 😃