Closed NViktors closed 2 years ago
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
Hmm, that's strange. This code should work. π€
Could you try using the global store approach to see if that's working?
<script setup>
import { initWallet } from '@solana/wallet-adapter-vue';
import { getPhantomWallet } from '@solana/wallet-adapter-wallets';
const wallets = [getPhantomWallet()];
initWallet({ wallets, autoConnect: true });
</script>
<template>
<!-- `useWallet` is available everywhere. Not just in the descendants of this component. -->
</template>
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?
Oh, and that's beside @solana/wallet-adapter-vue-ui
version 0.2.2
that has a broken package.json
.
You have to replace
"exports": {
"import": "./lib/esm/index.mjs",
"require": "./lib/cjs/index.js"
},
with
"exports": {
"import": "./lib/esm/index.js",
"require": "./lib/cjs/index.js"
},
"styles.css" is also missing from the exports.
@florentchauveau Yep, exactly the same behaviour in my side.
Ah, this looks like a problem with the build. vue-ui uses Vite to build instead of tsc, so the build isn't creating the expected .mjs file. For now, please fix your version to 0.2.1
. I'll publish a patch today.
There is no functional difference between 0.2.1 and 0.2.2, it's just the change to enable strict ESM exports.
However, there's another issue with the dependencies for your project -- you'll need to use @solana/wallet-adapter-walletsw@0.13.0
and @solana/wallet-adapter-base@0.8.1
for compatibility the Vue packages, which depend on base v0.8.1.
wallets v.0.14.x and base v0.9.x contain a breaking change to how the wallets are detected and determined to be ready, and the vue and vue-ui packages haven't been updated yet for this.
Published:
@solana/wallet-adapter-vue-ui@0.2.3
You'll still need to use:
Thank you @jordansexton for the fix on vue builds.
However, even when using
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.
@florentchauveau Yeah, looks like it's not working.
I tested with @lorisleiva suggested "global store approach" and also using wallet provider component as a wrapper - none of these work now.
@florentchauveau Have you already tested old versions?
I've reopened the issue as it sounds like it's still a problem. Can you link to a repo with a full reproduction? I don't use Vue, but if you can make it easy for me to test, I'll try to figure out what's happening (and hopefully @lorisleiva has an idea).
https://github.com/NViktors/vue-solana-wallet-adapter-test - I've created test repo here.
Clone, run yarn install
and then yarn serve
.
I've created two variants, take a look at src/App.vue
and src/AppV2.vue
.
To swap template, simply edit src/main.ts
and comment/uncomment one of last line.
<wallet-modal-provider>
<wallet-multi-button/>
</wallet-modal-provider>
Looks like this is missing the <wallet-provider>
which actually does all the work?
Take a look at second variant - https://github.com/NViktors/vue-solana-wallet-adapter-test/blob/master/src/App.vue
In this variant I tried to use
Just saw that. I admit I have no idea what's going on here haha.
Does this code work if you set the @solana/wallet-adapter-vue
version to 0.4.2
and @solana/wallet-adapter-vue-ui
to 0.2.1
?
Just trying to make sure if the issue is actually caused by the latest release.
Ok, now I'm confused..
Just created fresh Vue project using Vite, added all following packages:
"@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",
App.vue with following:
<template>
<wallet-provider :auto-connect="true" :wallets="wallets">
<wallet-modal-provider>
<wallet-multi-button></wallet-multi-button>
</wallet-modal-provider>
</wallet-provider>
</template>
<script setup lang="ts">
import {WalletProvider} from "@solana/wallet-adapter-vue";
import {getPhantomWallet, getSolflareWallet} from '@solana/wallet-adapter-wallets';
import {WalletModalProvider, WalletMultiButton} from "@solana/wallet-adapter-vue-ui";
const wallets = [
getPhantomWallet(),
getSolflareWallet()
];
</script>
And it works:
No idea, what's the issue with Vue CLI setup..
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.
@florentchauveau But does it work when you put all components in single file? Like:
<template>
<wallet-provider :wallets="wallets" auto-connect>
<wallet-modal-provider>
<wallet-multi-button></wallet-multi-button>
</wallet-modal-provider>
</wallet-provider>
</template>
@NViktors no, in this case it does not work.
I have
Uncaught Error: Wallet not initialized. Please use the `WalletProvider` component to initialize the wallet.
at useWallet (useWallet.ts?06ec:60:1)
at setup (App.vue?91a0:11:1)
at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:6737:1)
at setupStatefulComponent (runtime-core.esm-bundler.js?d2dd:6346:1)
at setupComponent (runtime-core.esm-bundler.js?d2dd:6301:1)
at mountComponent (runtime-core.esm-bundler.js?d2dd:4224:1)
at processComponent (runtime-core.esm-bundler.js?d2dd:4199:1)
at patch (runtime-core.esm-bundler.js?d2dd:3791:1)
at render (runtime-core.esm-bundler.js?d2dd:4943:1)
at mount (runtime-core.esm-bundler.js?d2dd:3179:1)
I have the exact same issue with Vite by the way, I cannot get it to work.
@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.
Sounds like this is resolved then?
Yeah, now it works as expected. Many thanks for help and fixes! ππ»
@NViktors thanks, it was a yarn mistake on my part.
However, when using all components in a single file with Vite, can you use this during setup?
import { useWallet } from '@solana/wallet-adapter-vue'
const { connected, publicKey } = useWallet()
I get the same error when I use those lines on your version.
@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?
@florentchauveau About build - I will check that tomorrow.
And about useWallet()
in single file setup:
I think the problem occurs, because setup
hook/script is called before rendering, so we are calling useWallet() before wallet-provider
initialisation.
So there's two possible ways:
<template>
<wallet-provider :wallets="wallets" auto-connect>
<my-cool-component-with-all-other-logic/>
</wallet-provider>
</template>
And then, inside <my-cool-component-with-all-other-logic/>
call useWallet()
and do all other magic
Or try to use global store approach, like (blind code tho, not tested yet):
<script setup>
...
initWallet({ wallets, autoConnect: true })
const wallet = computed(() => useWallet())
</script>
@jordansexton Hi! Sorry for the inconvenience, but I'm really stuck right now.
I have almost created project using Vite (all frontend, wallets etc..), but when I try to make production build, it's failing with an error:
β mint-vue yarn build
yarn run v1.22.17
$ vue-tsc --noEmit && vite build
vite v2.7.10 building for production...
β 105 modules transformed.
[commonjs] Complex binding patterns require an initialization value (1:6) in /Users/viktors/solana-vue/node_modules/@blocto/sdk/dist/blocto-sdk.module.js
file: /Users/viktors/solana-vue/node_modules/@blocto/sdk/dist/blocto-sdk.module.js:1:6
1: var global$1 = (typeof global !== "undefined" ? global :
^
2: typeof self !== "undefined" ? self :
3: typeof window !== "undefined" ? window : {});
error during build:
SyntaxError: Complex binding patterns require an initialization value (1:6) in /Users/viktors/solana-vue/node_modules/@blocto/sdk/dist/blocto-sdk.module.js
at Parser.pp$4.raise (/Users/viktors/solana-vue/node_modules/rollup/dist/shared/rollup.js:19599:13)
at Parser.pp$8.parseVar (/Users/viktors/solana-vue/node_modules/rollup/dist/shared/rollup.js:17461:12)
at Parser.pp$8.parseVarStatement (/Users/viktors/solana-vue/node_modules/rollup/dist/shared/rollup.js:17321:8)
at Parser.pp$8.parseStatement (/Users/viktors/solana-vue/node_modules/rollup/dist/shared/rollup.js:17069:17)
at Parser.pp$8.parseTopLevel (/Users/viktors/solana-vue/node_modules/rollup/dist/shared/rollup.js:16971:21)
at Parser.parse (/Users/viktors/solana-vue/node_modules/rollup/dist/shared/rollup.js:16744:15)
at Function.parse (/Users/viktors/solana-vue/node_modules/rollup/dist/shared/rollup.js:16794:35)
at Graph.contextParse (/Users/viktors/solana-vue/node_modules/rollup/dist/shared/rollup.js:22932:38)
at tryParse (/Users/viktors/solana-vue/node_modules/vite/dist/node/chunks/dep-76613303.js:26692:12)
at analyzeTopLevelStatements (/Users/viktors/solana-vue/node_modules/vite/dist/node/chunks/dep-76613303.js:26711:15)
[!] Error: unfinished hook action(s) on exit:
(vite:css) transform "/Users/viktors/solana-vue/src/assets/scss/main.scss"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/@solana/wallet-adapter-base/lib/esm/types.mjs"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/@toruslabs/solana-embed/dist/torus.esm.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/tweetnacl/nacl-fast.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/@solana/web3.js/node_modules/buffer/index.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/bn.js/lib/bn.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/borsh/lib/index.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/@solana/buffer-layout/lib/Layout.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/superstruct/lib/index.es.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/rpc-websockets/dist/index.browser.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/jayson/lib/client/browser/index.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/secp256k1/elliptic.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/js-sha3/src/sha3.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/eventemitter3/index.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/@ledgerhq/devices/lib/hid-framing.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/@ledgerhq/devices/lib-es/index.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/@ledgerhq/logs/lib-es/index.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/@ledgerhq/errors/lib-es/index.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/@headlessui/vue/dist/_virtual/_rollupPluginBabelHelpers.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/@headlessui/vue/dist/utils/render.esm.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/@headlessui/vue/dist/internal/stack-context.esm.js"
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I have no idea, what is this error about and google does not help at all. Looks like this happens only with Vite, tested with Vue CLI - everything is okay. I know that this error occurs when I'm importing any wallet adapter.
I will be very thankful about any idea/suggestion where to dig to get around this error.
@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
@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.
I'm still experiencing this. I created a standard vue3 project using the 'vue create' from the vue-cli and installed the latest version of @solana/wallet-adapter-vue-ui@0.2.3 (which seems to only be compatible with @solana/wallet-adapter-wallets@0.13.0 rather than 0.14.2). The logic seems okay so I'm not sure why the WalletMultiButton keeps failing on the useWallet call (https://github.com/solana-labs/wallet-adapter/blob/master/packages/ui/vue-ui/src/WalletMultiButton.vue#L19). To be fair, I'm not too familiar with the newest version of vue3 but things still crap out when I try the way suggested by @NViktors here
EDIT: I linked the wrong WalletMultiButton, should be fixed now
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
Thanks for digging into this! If you could open an issue or PR, I'm happy to review, though I don't have much knowledge of Vue.
I'm not sure how this would cause issues though. π€ @vue/runtime-core
is only a subset of vue
that does not include the Vue compiler which we don't need as we don't use templates in the components of the core/vue
package.
thanks everyone for digging into this esp @lorisleiva @jordansexton and @florentchauveau !
I havent got this to work yet with Vue CLI (tried everything mentioned above and then this AM, tried creating a Vue3 CLI project from scratch and had the same issue). It did work when I checked out @florentchauveau 's Vite project, but since I am not using Vite, not too helpful unf :(.
If there's anything I can do to debug, LMK - but at the moment, I'm stuck!
Also, can we re-open this issue since its not fixed yet?
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'm not sure how this would cause issues though. π€
@vue/runtime-core
is only a subset ofvue
that does not include the Vue compiler which we don't need as we don't use templates in the components of thecore/vue
package.
Yeah, but I think the fact that the components are using 'vue' as their dependency (and running 'setup' within that context) is causing things to act wonky. I think trying to mix the 2 is causing something to go kaput in the logic (maybe some references are different π€·ββοΈ). I'd have to look at the full code for each repo to know what exactly is going wrong but I don't think that's the intended usage of the package from what I see on the npm listing anyway.
I made a PR here that should work (I built locally and tested): https://github.com/solana-labs/wallet-adapter/pull/266
The package needs to be force installed if used with @solana/wallet-adapter-vue-ui due to a dependency conflict with @solana/wallet-adapter-wallets. Let me know if I should change anything in the PR (the dependency management for this repo seems to be hard to maintain so hopefully updating this package to the latest dependencies should simplify things)
Hey @Randy808 π
So I just tried to install all the Vue related packages in a brand new Vue CLI app and it all worked perfectly.
Could you give me some steps to reproduce your issue?
hi @lorisleiva - what versions did you use?
I used as mentioned above: "@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"
And when I put the following in my vue file, I still see the same runtime error of "wallet not initialized, please use WalletProvider component to initialize wallet"
<wallet-provider :wallets="wallets">
<wallet-modal-provider>
<wallet-multi-button/>
</wallet-modal-provider>
</wallet-provider>
Hi @karnie6, I used the following 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",
I have tried with both the <wallet-provider>
component and the global store and both approaches worked for me.
The only thing that didn't work was importing the @solana/wallet-adapter-vue-ui/styles.css
file (so I had to manually copy/paste it to test this) but that could be a Webpack 5 issue.
hi @lorisleiva - thanks for the quick reply. Hmm, something weird is happening - i updated to what you're using and still no dice.
I added my test repo on GH (which is what comes out of the box for Vue Typescript plus the solana wallet stuff I added): https://github.com/karnie6/solana-wallet-test
When you have time, do you mind cloning it and seeing if you see this issue on your end please? Thanks so much!
Hey @karnie6, I've just had a look at your repository and I think I know what's happening.
The <wallet-provider>
component uses the provide/inject
API behind the hood to initialise the store. However, it seems that the provide/inject
API doesn't work nicely with the vue-class-component
package because you get the following errors.
provide() can only be used inside setup()
inject() can only be used inside setup()
Because of that, the store is never initialised. Even if you use the initWallet
global store, you will get the errors from the <wallet-modal-provider>
which also uses the provide/inject
API.
I think this could be because the provide()
and inject()
methods from the vue
package are only available for the composition API.
I've tried to tweak some things around but I've not been able to successfully use the vue-class-component
package with the wallet adapters.
hey @lorisleiva - thanks for the quick response. So I created a new Vue repo without using the vue-class-component package (https://github.com/karnie6/solana-wallet-test-2) but I'm unf seeing the same issue :(.
Should I be trying to manually call provide() or inject() inside setup()? If so, how should I be doing that?
Thanks!
I made a repo re-creating the issue with a docker file so that the problem could be reproduced from a clean environment. Instructions on how to spin up the docker container can be found in the README.
Once the docker container spun up, the issue can be seen by opening Google Chrome and taking a look at the console in the Chrome DevTools (after navigating to http://localhost:8080/)
@Randy808 Your repo code will not work anyway. https://github.com/Randy808/solana-wallet-adapter-docker/blob/main/Dockerfile#L5 Please read about versions and compatibility at current stage in this thread. (vue ui is not ported to latest base and wallet adapters afaik) You should define versions explicitly for @solana/wallet-adapter-base and @solana/wallet-adapter-wallets
Edit: Oh ok, saw your PR, so nvm.. :D
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
Absolutely agree with that!
@Randy808 - thanks! have you got this to work by using specific versions of packages?
hey @lorisleiva - wanted to re-ping in case you missed my comment above about it still not working for me.
@Randy808 - wanted to also re-ping (see my comment directly above).
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:
vue create test-app && cd test-app
yarn add @solana/wallet-adapter-base @solana/wallet-adapter-wallets @solana/wallet-adapter-vue @solana/wallet-adapter-vue-ui