Issue following the examples in a react app about tiny-secp256k1 HOT 8 CLOSED

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

from tiny-secp256k1.

See this comment: bitcoinjs/bitcoinjs-lib#1777 (comment)

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.

from tiny-secp256k1.

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.

from tiny-secp256k1.

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)

from tiny-secp256k1.

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.

from tiny-secp256k1.

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

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

from tiny-secp256k1.

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

from tiny-secp256k1.

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.

from tiny-secp256k1.