Issue following the examples in a react app

[birimbau]

Hello,

I'm developing a BTC wallet using bitcoinjs-lib. Following the examples this peace of code breaks my FE:

import as assert from 'assert'; import BIP32Factory from 'bip32'; import as ecc from 'tiny-secp256k1';

const bip32 = BIP32Factory(ecc);

I receive the following error in the console:

Please let me know if you need more information, I just tried to add the minimum necessary info in order to avoid unecessary noise.

Thanks in advance.

[birimbau]

Im using this in the browser in a simple Create React App application.

The versions I'm using:

"tiny-secp256k1": "^2.2.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-hook-form": "^7.27.1", "react-router-dom": "^6.2.1", "react-scripts": "5.0.0", webpack: 5.69.1 webpack-cli: 4.9.2 webpack-dev-server 4.7.4

Im also using Craco to overrride the default React CRA webpack configs whith the following configuration in craco.config.js:

module.exports = {
    webpack: {
        configure: {
            resolve: {
                fallback: {
                    process: require.resolve("process/browser"),
                    zlib: require.resolve("browserify-zlib"),
                    stream: require.resolve("stream-browserify"),
                    util: require.resolve("util"),
                    buffer: require.resolve("buffer"),
                    asset: require.resolve("assert")
                },
            },
            plugins: [
                new webpack.ProvidePlugin({
                    Buffer: ["buffer", "Buffer"],
                    process: "process/browser",
                }),
            ],
        },
    },
};

[junderw]

See this comment: https://github.com/bitcoinjs/bitcoinjs-lib/issues/1777#issuecomment-1059754579

This is not an issue with bitcoinjs-lib or tiny-secp256k1.

This is an issue with your config or react / webpack itself. Since we have a working example using react and webpack, it's probably because you lack the asyncWebAssembly option in your webpack config.

[Janaka-Steph]

I would say this is an issue with tiny-secp256k1 because the lib is using NodeJS modules so it cannot work out-of-the box in the browser. And now that Webpack 5 has decided to remove NodeJS polyfills it becomes a pain to install it.

[junderw]

Where does tiny-secp256k1 use NodeJS modules? (That isn't inside a file that is specified for NodeJS environment only in the package.json exports)

[Janaka-Steph]

I didn't dig where modules are used but here https://github.com/bitcoinjs/tiny-secp256k1/blob/master/examples/react-app/webpack.config.js#L41-L44 if you have to polyfill it means that they are used.

[junderw]

https://github.com/bitcoinjs/tiny-secp256k1/blob/master/examples/react-app/index.js

The example app uses Buffer. This is not the library.

[junderw]

I have removed NodeJS dependencies in the example app to prove that the main library (which I have not touched) does not use NodeJS.

See #82

[Janaka-Steph]

Ok so the error in the issue description Uncaught TypeError: Cannot read properties of undefined (reading 'buffer') is only due to lack of asyncWebAssembly property. I misinterpreted the error message. I still have to eject the webpack config in create-react-app to add that property but it's not an issue with the lib. Thank you for you quick reply.