Use bitcoinjs-lib Uncaught TypeErrorCannot read properties of undefined (reading 'alloc')

Question

Vite & React In js

import * as bitcoin from 'bitcoinjs-lib';

but something wrong :

Cannot read properties of undefined (reading 'alloc')
at node_modules/bitcoinjs-lib/src/types.js (bitcoinjs-lib.js?v=cf991875:920:34)
    at __require (chunk-Y2F7D3TJ.js?v=e728907c:3:50)
    at node_modules/bitcoinjs-lib/src/script_signature.js (bitcoinjs-lib.js?v=cf991875:1030:17)
    at __require (chunk-Y2F7D3TJ.js?v=e728907c:3:50)
    at node_modules/bitcoinjs-lib/src/script.js (bitcoinjs-lib.js?v=cf991875:1101:27)
    at __require (chunk-Y2F7D3TJ.js?v=e728907c:3:50)
    at node_modules/bitcoinjs-lib/src/payments/embed.js (bitcoinjs-lib.js?v=cf991875:1312:19)
    at __require (chunk-Y2F7D3TJ.js?v=e728907c:3:50)
    at node_modules/bitcoinjs-lib/src/payments/index.js (bitcoinjs-lib.js?v=cf991875:4800:19)
    at __require (chunk-Y2F7D3TJ.js?v=e728907c:3:50)

screenshot： https://imgse.com/i/pi7KPOJ

package.json

`"bip32": "^4.0.0",
"bitcoinjs-lib": "^6.1.5",
"ecpair": "^2.1.0",`

I would be grateful for any help!

How to use bitcoinjs-lib?

Answer 1

what is alloc, Need more clarification share your code.

here example :

import { BIP32Factory } from 'bip32';
import * as bitcoin from 'bitcoinjs-lib';

const mainnet = bitcoin.networks.bitcoin;
bitcoin.initEccLib(ecc);
const bip32 = BIP32Factory(ecc);

More in official documentation

Answer 2

Need

yarn add Buffer

vite.config.js node built-in polyfills

    // yarn add --dev @esbuild-plugins/node-globals-polyfill
    import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
    // yarn add --dev @esbuild-plugins/node-modules-polyfill
    import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'

...
    optimizeDeps: {
            esbuildOptions: {
                // Node.js global to browser globalThis
                define: {
                    global: 'globalThis'
                },
                // Enable esbuild polyfill plugins
                plugins: [
                    NodeGlobalsPolyfillPlugin({
                        process: true,
                        buffer: true
                    }),
                    NodeModulesPolyfillPlugin()
                ]
            }
        }

Reference:

Buffer is not defined in React-vite

https://gist.github.com/FbN/0e651105937c8000f10fefdf9ec9af3d