wallet-adapter: VueJS "Wallet not initialized" error

Hey 👋 I’ve just extracted the Vue packages into their own repo (at the request of the maintainers of this repo). The new repo should be all functional so feel free to try it and give some feedback there. Thanks for your patience. 🙂

https://github.com/lorisleiva/solana-wallets-vue

I got it to work with vue-cli.

Both using <wallet-provider> or the global store.

My dependencies:

  "dependencies": {
    "@solana/wallet-adapter-base": "<=0.8.1",
    "@solana/wallet-adapter-vue": "^0.4.4",
    "@solana/wallet-adapter-vue-ui": "^0.2.3",
    "@solana/wallet-adapter-wallets": "<=0.13.0",
    "@solana/web3.js": "^1.31.0",
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },

App.vue

<script setup>
// import { initWallet } from '@solana/wallet-adapter-vue'
import { WalletProvider } from '@solana/wallet-adapter-vue'
import { getPhantomWallet } from '@solana/wallet-adapter-wallets'

const wallets = [
  getPhantomWallet()
]
// initWallet({ wallets, autoConnect: true })
</script>

<template>
  <wallet-provider :wallets="wallets" auto-connect>
    <nav>
      <router-link to="/">Home</router-link>|
      <router-link to="/about">About</router-link>|
      <router-link to="/mint">Mint</router-link>
    </nav>
    <router-view />
  </wallet-provider>
</template>

and then in a route, I have:

<script setup>
import { useWallet } from '@solana/wallet-adapter-vue'
import {
  WalletModalProvider,
  WalletMultiButton
} from '@solana/wallet-adapter-vue-ui'

const { connected, publicKey, wallet } = useWallet()
</script>

<template>
  <p>{{ connected }}</p>
  <p>Wallet name: {{ wallet?.name }}</p>
  <p v-if="connected">{{ publicKey.toBase58() }}</p>

  <wallet-modal-provider>
    <wallet-multi-button></wallet-multi-button>
  </wallet-modal-provider>

</template>

This works.

@kyleqian Somehow yes… Using weird hacks in vite.config.js:

import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';

const define = process.env.NODE_ENV === 'production' ? {} : {
  "global": {},
  "process.env": {},
};

export default defineConfig({
  define,
  plugins: [
    vue(),
  ]
});

Only this way I can create prod build…

I’ll have a look at it tomorrow with a brand new Vue CLI app using the latest packages and see if I can reproduce the issue.

I found the problem https://github.com/solana-labs/wallet-adapter/blob/master/packages/core/vue/src/useWallet.ts#L13, @vue/runtime-core is being used here. I’ll probably raise an issue later today, not sure why it’s being used since the npm page says “This package is published only for typing and building custom renderers. It is NOT meant to be used in applications.”

References that helped me find the problem: https://github.com/highlightjs/vue-plugin/issues/1 https://github.com/vuejs/vue-cli/issues/6327

@NViktors Vite explicitly does not support Node polyfills or any libraries that expect them. Some dependencies of the various wallet providers do expect Node built-ins to be available and, as such, make Vite fail. That’s why I currently stick to Webpack 5 for Solana development and explicitly configure the polyfills I need and discard the ones I don’t.

In general Vite does not try to support libraries that explicitly expect Node built-ins to be available in the browser. i.e. making Node libs run in the browser is explicitly a non-goal.

The lib you are using likely depends more than just a Stream shim, but as said, you’ll have to figure that out yourself or stick to webpack.

— Evan You

@NViktors and also, yarn build does not work with Vite. Also checked on your repo.

Something wrong with @blocto/sdk/dist/blocto-sdk.module.js.

[commonjs] Complex binding patterns require an initialization value (1:6)

Do you confirm?

Sounds like this is resolved then?

@florentchauveau https://github.com/NViktors/vite-wallet-test - I created repo with working example using Vite. Feel free to check if that works for you.

@NViktors Got it… yeah it still wasn’t working for me. I ended up switching completely to Next and have had no issues since.

@NViktors @florentchauveau

Did either of you ever get the vite build working? I’m running into the same issue:

[commonjs] Complex binding patterns require an initialization value (1:6)

explicitly for @solana/wallet-adapter-base and @solana/wallet-adapter-wallets

Right, the whole point is that I shouldn’t have to do that and that’s what the PR is for. The latest version of all packages should always be compatible with each other IMO

@lorisleiva thanks for helping.

I’ve never used Vite (the use of it in the vue-ui package here is all thanks to Loris) so I’m afraid I can’t help.

I used to use Webpack / Babel a lot, but these days I generally try to use build tools that are batteries-included / low config / fast like Next / Parcel / esbuild / tsc unless I know I need to customize it. It’s just not worth to deal with the hassle.

Thank you @jordansexton for the fix on vue builds.

However, even when using

• @solana/wallet-adapter-base@0.8.1
• @solana/wallet-adapter-wallets@0.13.0

I still get the Error: Wallet not initialized. Please use the WalletProvider component to initialize the wallet..

How about you @NViktors?

My package.json:

  "dependencies": {
    "@solana/wallet-adapter-base": "<=0.8.1",
    "@solana/wallet-adapter-vue": "^0.4.4",
    "@solana/wallet-adapter-vue-ui": "^0.2.3",
    "@solana/wallet-adapter-wallets": "<=0.13.0",
    "@solana/web3.js": "^1.31.0",
    "vue": "^3.2.25"
  },

I am trying old versions.

Published:

• @solana/wallet-adapter-vue@0.4.4
• @solana/wallet-adapter-vue-ui@0.2.3

You’ll still need to use:

• @solana/wallet-adapter-base@0.8.1
• @solana/wallet-adapter-wallets@0.13.0

I do not have the error with the global store approach, but another error when using the wallet:

SFC:

<script setup>
import { computed } from 'vue'
import { initWallet, useWallet } from '@solana/wallet-adapter-vue'
import { PhantomWalletAdapter } from '@solana/wallet-adapter-wallets'

import {
  WalletModalProvider,
  WalletMultiButton
} from '@solana/wallet-adapter-vue-ui'

const wallets = [new PhantomWalletAdapter()]
initWallet({ wallets, autoConnect: true })

const wallet = computed(() => useWallet())

const connect = async () => {
  try {
    const result = await wallet.value.connect()
    console.log('result', result)
  } catch (e) {
    console.error(e)
  }
}
</script>

<template>
    <p>{{ wallet.name }}</p>

    <wallet-modal-provider>
      <wallet-multi-button></wallet-multi-button>
    </wallet-modal-provider>

    <pre style="text-align:left">{{ wallet }}</pre>
    <button @click="connect">Connect</button>
</template>

However, choosing a wallet does not do anything. And using the wallet returns the error:

WalletNotSelectedError
    at Object.connect (useWallet.ts?06ec:193:1)
    at connect (MintView.vue?b05f:18:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:6737:1)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?d2dd:6746:1)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js?2725:357:1)

@NViktors can you reproduce?

I have the same issue. It seems that the Vue libraries are broken right now.

Maybe @lorisleiva can help us here 😃

@NViktors here is an working example, but with outdated libs: https://lorisleiva.com/create-a-solana-dapp-from-scratch/integrating-with-solana-wallets