recoverTypedSignature function on @metamask/eth-sig-util is not working

Question

It seems that every that the updated recoverTypedSignature function on @metamask/eth-sig-util is not working properly. As soon as I add it into the project, it gives out an error.

Any help would be greatly appreciated it.

The error is:

bundle.js:6306 Uncaught ReferenceError: Buffer is not defined at Object../node_modules/@metamask/eth-sig-util/node_modules/ethereumjs-util/dist/secp256k1v3-lib/der.js (bundle.js:6306:40) at Object.options.factory (bundle.js:84170:31) at webpack_require (bundle.js:83608:33) at fn (bundle.js:83841:21) at Object../node_modules/@metamask/eth-sig-util/node_modules/ethereumjs-util/dist/secp256k1v3-adapter.js (bundle.js:5932:11) at Object.options.factory (bundle.js:84170:31) at webpack_require (bundle.js:83608:33) at fn (bundle.js:83841:21) at Object../node_modules/@metamask/eth-sig-util/node_modules/ethereumjs-util/dist/index.js (bundle.js:5724:17) at Object.options.factory (bundle.js:84170:31)

The code is:

import { SignTypedDataVersion, recoverTypedSignature } from '@metamask/eth-sig-util';


const Request_Signature = (props: any) => {
    // Step 2:  Once user has authorized the use of its crypto wallet a signature can
    //          be requested

    async function sign_TypedDataV4() {
        const msgParamsOg = {
            domain: {
                // Defining the chain: 1 - Ethereum Main Net
                chainId: 1,
                // Friendly name
                name: "Initial Example Contract",
                // Additional way of verifying contract to make sure you are establishing contracts with the proper entity
                verifyingContract: "this",
                // Just let's you know the latest version. Definitely make sure the field name is correct.
                version: "1",
            },

            // Defining the message signing data content.
            message: {
                Request: "Please complete your authentication by signing this",
                username: "test_user",
            },
            // Refers to the keys of the *types* object below.
            primaryType: "LogIn",
            types: {
                EIP712Domain: [
                    {
                        name: "name",
                        type: "string",
                    },
                    {
                        name: "version",
                        type: "string",
                    },
                    {
                        name: "chainId",
                        type: "uint256",
                    },
                    {
                        name: "verifyingContract",
                        type: "address",
                    },
                ],
                // Refer to PrimaryType
                LogIn: [
                    {
                        name: "username",
                        type: "string",
                    },
                ],
            },
        };
        let msgParams = JSON.stringify(msgParamsOg);

        let account = props.account;
        var params = [account, msgParams];
        var method = "eth_signTypedData_v4";
        console.log('User Address:' + account);

        (window as any).ethereum.sendAsync(
            {
                method,
                params,
                account,
            },
            async function (err: Error, result: any) {
                if (err) return console.dir(err);
                if (result.error) {
                    alert(result.error.message);
                    return console.error("ERROR", result);
                }
                //console.log('TYPED SIGNED:' + JSON.stringify(result.result));

                let signature = result.result;

                const restored = recoverTypedSignature({
                    data: msgParamsOg as any,
                    signature,
                    version: SignTypedDataVersion.V4,
                  });

                console.log(restored);

            }
        );
    }


    return (
        <div>
            <button
                className='btn_main'
                type="button"
                onClick={async (e) => {
                    e.preventDefault();
                    sign_TypedDataV4();
                }}
            >
                Sign Now
            </button>
        </div>
    )
};

export default Request_Signature;

Answer 1

I had to use webpack (https://webpack.js.org/) with Babel (https://babeljs.io/docs/en/babel-preset-react) to solve this. I as well had to install Buffer (https://www.npmjs.com/package/buffer) and stream-browserify (https://www.npmjs.com/package/stream-browserify)

This resolved the problem

Answer 2

If you are using react, I don't know the exact fix but this is a workaround: downgrade react-scripts to version 4.0.3

In my case I needed to do the following also:

1. In package.json use react-script 4.0.3
2. Remove package-lock.json
3. remove node_modules folder
4. run npm install

After all this everything seems to be working fine.