VueJS "Wallet not initialized" error

[NViktors]

Describe the bug Hello, I'm trying to implement "Connect wallet" functionality inside my Vue 3 project. All required packages are up to date and have latest versions.

How to reproduce:

1. Create fresh project using Vue CLI (with typescript enabled) - vue create test-app && cd test-app
2. Add following dependencies: yarn add @solana/wallet-adapter-base @solana/wallet-adapter-wallets @solana/wallet-adapter-vue @solana/wallet-adapter-vue-ui
3. Replace App.vue with following

   
   <template>
   <wallet-provider auto-connect :wallets="wallets">
   <wallet-modal-provider>
     <wallet-multi-button></wallet-multi-button>
   </wallet-modal-provider>
   </wallet-provider>
   </template>

4. Start development mode `yarn serve`

And after opening page in browser, there will be error in console:
![image](https://user-images.githubusercontent.com/26169825/148964166-7a679f6f-13f4-4ee8-9fd2-0418bf9274f1.png)

Any ideas about this?

[Randy808]

Hi @karnie6, I could only get it to work by making the changes I have open in the PR. To integrate it into a project I'm currently working on I used 'npm pack' on the code in the PR, then referenced the tarball as the wallet packages from my package.json

[karnie6]

hey @Randy808 - thanks! I'll wait for the PR to be merged before incorporating it. Thanks for all your help on this!

[kyleqian]

@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)

[florentchauveau]

@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)

No, I ended up using webpack (via vue-cli) for now.

[NViktors]

@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..

[NViktors]

But if I define globals without checking env, I'm getting this:

[karnie6]

hi @lorisleiva - do you believe https://github.com/solana-labs/wallet-adapter/pull/267 will fix this issue? If so, any ETA on merging it? If not, is there a path forward. This unf is still not working for me using a base Vue TS "factory build" (not using Vite). cc @Randy808 . Thank you so much!

[kyleqian]

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

[davidgiga1993]

I'm facing the same issues with an OOTB vue-cli app. Tried global state and wallet-provider. I feel like the general implementation of the wallet state is pretty unstable / not using vue patterns. Wouldn't it be easier to just use the vue plugin api?

[ghost]

Any update on this being fixed? Using the recommended versions and this is still not working for vue-cli. Any workarounds currently?

[lorisleiva]

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