Cannot read properties of undefined at fromMnemonic

[Papillon6814]

Hello, I cannot get a wallet by @cosmjs/proto-signing

I'd like to try to send a transaction with cosmjs. I found an example of using wallet on github (https://gist.github.com/webmaster128/8444d42a7eceeda2544c8a59fbd7e1d9). But it does not work because of an error below. I thought and googled a lot, but I don't know what makes this error. Please help me 😭

Code

<template>
    <div class="container">
        <button @click="sendTx">Send a transaction</button>
    </div>
</template>

<script>
import { DirectSecp256k1HdWallet } from "@cosmjs/proto-signing"
import { assertIsBroadcastTxSuccess, SigningStargateClient, StargateClient } from "@cosmjs/stargate"

export default {
    name: 'TxTryout',

    methods: {
        async sendTx() {
            const mnemonic = "puzzle drift together isolate hire despair dune dish you dance caution buddy long else athlete document anger gentle wink patch radio little poverty indoor"
            // const wallet = new DirectSecp256k1HdWallet(mnemonic)

            const wallet = await DirectSecp256k1HdWallet.fromMnemonic(mnemonic)
                .catch(e => {
                    console.log(e)
                    return
                })

            console.log('wallet', wallet)
            // const [firstAccount] = await wallet.getAccounts()
            //     .catch(e => console.log(e))

            // const rpcEndpoint = "http://0.0.0.0:26657";
            // const client = await SigningStargateClient.connectWithSigner(rpcEndpoint, wallet)
            //     .catch(e => console.log(e))

            // const recipient = "cosmos1xv9tklw7d82sezh9haa573wufgy59vmwe6xxe5"
            // const amount = {
            //     denom: "token",
            //     amount: "1234567",
            // }
            // const result = await client.sendTokens(firstAccount.address, recipient, [amount], "Have fun with your star coins")
            // assertIsBroadcastTxSuccess(result)
        }
    },
    errorCaptured(err, vm, info) {
        console.log('catched by `CHILD errorCaptured`', err.toString())
    },
}
</script>

Error

TypeError: Cannot read properties of undefined (reading 'call')
    at Hash.CipherBase (index.js:7:13)
    at new Hash (browser.js:9:8)
    at createHash (browser.js:29:10)
    at deriveChecksumBits (index.js:44:18)
    at Object.mnemonicToEntropy (index.js:101:25)
    at new EnglishMnemonic (englishmnemonic.ts:31:11)
    at Function.fromMnemonic (directsecp256k1hdwallet.ts:144:29)
    at Proxy.sendTx (TxTryout.vue:19:58)
    at _createElementVNode.onClick._cache.<computed>._cache.<computed> (TxTryout.vue:3:43)
    at callWithErrorHandling (runtime-core.esm-bundler.js:6737:22)

[webmaster128]

Is this a webpack bundle? Did you see the webpack config section in https://github.com/cosmos/cosmjs/blob/main/README.md?

[Papillon6814]

@webmaster128 Hello, thank you for the reply.

Hmm... probably I don't use webpack. This is my package.json.

> cat vue/package.json
{
  "name": "@starport/template",
  "version": "0.3.5",
  "description": "A Vue 3 boilerplate project utilizing @starport/vue and @starport/vuex",
  "author": "Tendermint, Inc <hello@tendermint.com>",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "@cosmjs/launchpad": "0.27.0",
    "@cosmjs/proto-signing": "0.27.0",
    "@cosmjs/stargate": "0.27.0",
    "@starport/vue": "^0.3.5",
    "@starport/vuex": "^0.3.5",
    "buffer": "^6.0.3",
    "core-js": "^3.18.2",
    "vue": "^3.2.6",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^21.0.1",
    "@rollup/plugin-dynamic-import-vars": "^1.4.1",
    "@rollup/plugin-node-resolve": "^13.1.1",
    "@vitejs/plugin-vue": "^2.0.1",
    "sass": "^1.47.0",
    "vite": "^2.7.6",
    "vite-plugin-dynamic-import": "^0.1.1",
    "vite-plugin-env-compatible": "^1.1.1"
  }
}

[Papillon6814]

This is the screenshot of after pushing "Send transaction" button.

[webmaster128]

The package "@cosmjs/launchpad": "0.27.0", is outdated and should not be required anymore.

Can you report this to Starport? I don't know what they do here and how Vue works. Also in the log there is a deprecation warning for some Keplr integration code.

[webmaster128]

Also if you upgrade to CosmJS ^0.28 you get a hashing implementation that does not depend on Hash.CipherBase anymore. So it might help as well.

[Papillon6814]

Thanks! I'll try it!