bug: <title>如何在vue2.7 中使用呢？

Taosome commented 11 months ago

Is there an existing issue for this?

[X] I have searched the existing issues

Package Version

0.4.6

Current Behavior

composition API 测试是正常能用的。但是引入use-wagmi中的hook时控制台就会报错

Expected Behavior

能够正常使用

Steps To Reproduce

Link to Minimal Reproducible Example (StackBlitz, CodeSandbox, GitHub repo etc.)

No response

Anything else?

unicape commented 11 months ago

vue2.x 中没有 setup 要使用 composition API

另外我计划在下一大版本中取消对vue2.x的支持

Taosome commented 11 months ago

好吧，2.7是支持setup了的。我看你的源码后发现，报上面错误的原因在这里, 通过inject却无法获得provide的值。我正在想办法，让它判断若isVue2时，换个方式取值

最后，感谢您的回复

unicape commented 11 months ago

你使用 UseWagmiPlugin 了吗？

https://github.com/unicape/use-wagmi#quick-start

Taosome commented 11 months ago

使用了的。而且我这样手动使用inject是可以注入进来的，很奇怪，引入你的Hook的时候，就会报错呢

unicape commented 11 months ago

额测试都是在vue3的环境中进行的这里可能有一些问题为什么不用vue3呢

Taosome commented 11 months ago

比较久的一项目啦，车太重了不好迁移

---- 回复的原邮件 ---- | 发件人 | Unic @.> | | 日期 | 2023年11月28日 18:05 | | 收件人 | @.> | | 抄送至 | @.>@.> | | 主题 | Re: [unicape/use-wagmi] bug: 如何在vue2.7 中使用呢？ (Issue #89) |</p> <p>额测试都是在vue3的环境中进行的这里可能有一些问题为什么不用vue3呢</p> <p>— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: <strong><em>@</em></strong>.***></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/unicape"><img src="https://avatars.githubusercontent.com/u/31918458?v=4" />unicape</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <p>方便在StackBlitz上传份代码吗我抽空修一下</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Taosome"><img src="https://avatars.githubusercontent.com/u/33270865?v=4" />Taosome</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <p>好的我明天上午传。感谢</p> <p>---- 回复的原邮件 ---- | 发件人 | Unic <strong><em>@</em></strong>.<strong><em>> | | 日期 | 2023年11月28日 19:07 | | 收件人 | </em></strong>@<strong><em>.</em></strong>> | | 抄送至 | <strong><em>@</em></strong>.<strong><em>></em></strong>@<strong><em>.</em></strong>> | | 主题 | Re: [unicape/use-wagmi] bug: <title>如何在vue2.7 中使用呢？ (Issue #89) |</p> <p>方便在StackBlitz上传份代码吗我抽空修一下</p> <p>— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: <strong><em>@</em></strong>.***></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Taosome"><img src="https://avatars.githubusercontent.com/u/33270865?v=4" />Taosome</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <p>唉， StackBlitz 上面不能调整node版本，跑不起来</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/unicape"><img src="https://avatars.githubusercontent.com/u/31918458?v=4" />unicape</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <p>我抽空去测试吧</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Taosome"><img src="https://avatars.githubusercontent.com/u/33270865?v=4" />Taosome</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <p>好的麻烦了 Node version： v14.21.3 package-json:</p> <pre><code class="language-json">{ "name": "b", "version": "0.0.1", "license": "MIT", "scripts": { "dev": "vue-cli-service serve", "build": "vue-cli-service build" }, "dependencies": { "use-wagmi": "^0.4.6", "viem": "^1.19.9", "vue": "^2.7.14", }, "devDependencies": { "@babel/cli": "^7.23.4", "@babel/core": "^7.23.3", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", "@babel/plugin-proposal-optional-chaining": "^7.13.12", "@babel/plugin-transform-runtime": "^7.23.4", "@babel/preset-env": "^7.23.3", "@vue/cli-plugin-babel": "^4.5.18", "@vue/cli-service": "^4.5.18", "autoprefixer": "^9.5.1", "core-js": "^3.6.5" } }</code></pre> <p>babel.config.js:</p> <pre><code class="language-javascript">module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ], plugins: ["@babel/plugin-proposal-optional-chaining", "@babel/plugin-proposal-nullish-coalescing-operator"] };</code></pre> <p>vue.config.js:</p> <pre><code class="language-javascript"> module.exports = { ..., transpileDependencies:['use-wagmi','@wagmi','viem', '@noble', 'abitype', '@walletconnect', 'unstorage'] }</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/unicape"><img src="https://avatars.githubusercontent.com/u/31918458?v=4" />unicape</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <p>兄弟尝试一下这样去使用 <a href="https://github.com/TanStack/query/blob/main/examples/vue/2.6-basic/src/main.ts">https://github.com/TanStack/query/blob/main/examples/vue/2.6-basic/src/main.ts</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/unicape"><img src="https://avatars.githubusercontent.com/u/31918458?v=4" />unicape</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <p>长时间未回复暂时关闭</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Taosome"><img src="https://avatars.githubusercontent.com/u/33270865?v=4" />Taosome</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <p>抱歉，生病了才回来。试了你提到的办法，还是不行，报错和一开始issue截图的一致。我只有用wagmi/core来自己封装了。最后感谢大佬付出的时间。</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/unicape"><img src="https://avatars.githubusercontent.com/u/31918458?v=4" />unicape</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <p>@Taosome 你可以创建一个仓库吗？我去fork一份</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/An0nym0usAng3l"><img src="https://avatars.githubusercontent.com/u/89713041?v=4" />An0nym0usAng3l</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <p>I have the same issue and i can't read chinese!! I don't even know what to do. Am i supposed to copy the comments and pasted them in a translation api or i just stare at em until i understand😭😭😭😭</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/unicape"><img src="https://avatars.githubusercontent.com/u/31918458?v=4" />unicape</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <p>@Taosome 尝试下这样做 @An0nym0usAng3l Try this</p> <pre><code class="language-js">// main.js import { UseWagmiPlugin, configureChains, createConfig } from 'use-wagmi'; import { avalanche, goerli, mainnet, optimism } from 'use-wagmi/chains'; import { CoinbaseWalletConnector } from 'use-wagmi/connectors/coinbaseWallet'; import { InjectedConnector } from 'use-wagmi/connectors/injected'; import { LedgerConnector } from 'use-wagmi/connectors/ledger'; import { MetaMaskConnector } from 'use-wagmi/connectors/metaMask'; import { SafeConnector } from 'use-wagmi/connectors/safe'; import { WalletConnectConnector } from 'use-wagmi/connectors/walletConnect'; import { WalletConnectLegacyConnector } from 'use-wagmi/connectors/walletConnectLegacy'; import { alchemyProvider } from 'use-wagmi/providers/alchemy'; import { infuraProvider } from 'use-wagmi/providers/infura'; import { publicProvider } from 'use-wagmi/providers/public'; import { Buffer } from 'buffer'; window.global = window; window.Buffer = Buffer; import { createApp } from 'vue-demi'; import App from './App.vue'; const { chains, publicClient, webSocketPublicClient } = configureChains( [mainnet, goerli, optimism, avalanche], [ alchemyProvider({ apiKey: '' }), //TODO: your API Key infuraProvider({ apiKey: '' }), //TODO: your API Key publicProvider() ] ); const config = createConfig({ autoConnect: true, connectors: [ new MetaMaskConnector({ chains, options: { UNSTABLE_shimOnConnectSelectAccount: true } }), new CoinbaseWalletConnector({ chains, options: { appName: 'use-wagmi' } }), new WalletConnectConnector({ chains, options: { projectId: '' //TODO: your project ID } }), new WalletConnectLegacyConnector({ chains, options: { qrcode: true } }), new LedgerConnector({ chains, options: { projectId: '' //TODO: your project ID } }), new InjectedConnector({ chains, options: { name: detectedName => `Injected (${typeof detectedName === 'string' ? detectedName : detectedName.join(', ')})`, shimDisconnect: true } }), new SafeConnector({ chains, options: { allowedDomains: [/https:\/\/app.safe.global$/], debug: false } }) ], publicClient, webSocketPublicClient }); const app = createApp(App); app.use(UseWagmiPlugin, config); app.mount('#app');</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/An0nym0usAng3l"><img src="https://avatars.githubusercontent.com/u/89713041?v=4" />An0nym0usAng3l</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <blockquote> <p>@Taosome 尝试下这样做 @An0nym0usAng3l Try this</p> <pre><code class="language-js">// main.js import { UseWagmiPlugin, configureChains, createConfig } from 'use-wagmi'; import { avalanche, goerli, mainnet, optimism } from 'use-wagmi/chains'; import { CoinbaseWalletConnector } from 'use-wagmi/connectors/coinbaseWallet'; import { InjectedConnector } from 'use-wagmi/connectors/injected'; import { LedgerConnector } from 'use-wagmi/connectors/ledger'; import { MetaMaskConnector } from 'use-wagmi/connectors/metaMask'; import { SafeConnector } from 'use-wagmi/connectors/safe'; import { WalletConnectConnector } from 'use-wagmi/connectors/walletConnect'; import { WalletConnectLegacyConnector } from 'use-wagmi/connectors/walletConnectLegacy'; import { alchemyProvider } from 'use-wagmi/providers/alchemy'; import { infuraProvider } from 'use-wagmi/providers/infura'; import { publicProvider } from 'use-wagmi/providers/public'; import { Buffer } from 'buffer'; window.global = window; window.Buffer = Buffer; import { createApp } from 'vue-demi'; import App from './App.vue'; const { chains, publicClient, webSocketPublicClient } = configureChains( [mainnet, goerli, optimism, avalanche], [ alchemyProvider({ apiKey: '' }), //TODO: your API Key infuraProvider({ apiKey: '' }), //TODO: your API Key publicProvider() ] ); const config = createConfig({ autoConnect: true, connectors: [ new MetaMaskConnector({ chains, options: { UNSTABLE_shimOnConnectSelectAccount: true } }), new CoinbaseWalletConnector({ chains, options: { appName: 'use-wagmi' } }), new WalletConnectConnector({ chains, options: { projectId: '' //TODO: your project ID } }), new WalletConnectLegacyConnector({ chains, options: { qrcode: true } }), new LedgerConnector({ chains, options: { projectId: '' //TODO: your project ID } }), new InjectedConnector({ chains, options: { name: detectedName => `Injected (${typeof detectedName === 'string' ? detectedName : detectedName.join(', ')})`, shimDisconnect: true } }), new SafeConnector({ chains, options: { allowedDomains: [/https:\/\/app.safe.global$/], debug: false } }) ], publicClient, webSocketPublicClient }); const app = createApp(App); app.use(UseWagmiPlugin, config); app.mount('#app');</code></pre> </blockquote> <p>Thank you! @unicape </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/unicape"><img src="https://avatars.githubusercontent.com/u/31918458?v=4" />unicape</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <blockquote> <blockquote> <p>@Taosome 尝试下这样做 @An0nym0usAng3l Try this</p> <pre><code class="language-js">// main.js import { UseWagmiPlugin, configureChains, createConfig } from 'use-wagmi'; import { avalanche, goerli, mainnet, optimism } from 'use-wagmi/chains'; import { CoinbaseWalletConnector } from 'use-wagmi/connectors/coinbaseWallet'; import { InjectedConnector } from 'use-wagmi/connectors/injected'; import { LedgerConnector } from 'use-wagmi/connectors/ledger'; import { MetaMaskConnector } from 'use-wagmi/connectors/metaMask'; import { SafeConnector } from 'use-wagmi/connectors/safe'; import { WalletConnectConnector } from 'use-wagmi/connectors/walletConnect'; import { WalletConnectLegacyConnector } from 'use-wagmi/connectors/walletConnectLegacy'; import { alchemyProvider } from 'use-wagmi/providers/alchemy'; import { infuraProvider } from 'use-wagmi/providers/infura'; import { publicProvider } from 'use-wagmi/providers/public'; import { Buffer } from 'buffer'; window.global = window; window.Buffer = Buffer; import { createApp } from 'vue-demi'; import App from './App.vue'; const { chains, publicClient, webSocketPublicClient } = configureChains( [mainnet, goerli, optimism, avalanche], [ alchemyProvider({ apiKey: '' }), //TODO: your API Key infuraProvider({ apiKey: '' }), //TODO: your API Key publicProvider() ] ); const config = createConfig({ autoConnect: true, connectors: [ new MetaMaskConnector({ chains, options: { UNSTABLE_shimOnConnectSelectAccount: true } }), new CoinbaseWalletConnector({ chains, options: { appName: 'use-wagmi' } }), new WalletConnectConnector({ chains, options: { projectId: '' //TODO: your project ID } }), new WalletConnectLegacyConnector({ chains, options: { qrcode: true } }), new LedgerConnector({ chains, options: { projectId: '' //TODO: your project ID } }), new InjectedConnector({ chains, options: { name: detectedName => `Injected (${typeof detectedName === 'string' ? detectedName : detectedName.join(', ')})`, shimDisconnect: true } }), new SafeConnector({ chains, options: { allowedDomains: [/https:\/\/app.safe.global$/], debug: false } }) ], publicClient, webSocketPublicClient }); const app = createApp(App); app.use(UseWagmiPlugin, config); app.mount('#app');</code></pre> </blockquote> <p>Thank you! @unicape</p> </blockquote> <p>Please tell me the results later. I only went through a simple test and found no errors.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/An0nym0usAng3l"><img src="https://avatars.githubusercontent.com/u/89713041?v=4" />An0nym0usAng3l</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <p>@unicape I am using nuxt for my project so there there was really no way for </p> <pre><code>const app = createApp(App); app.use(UseWagmiPlugin, config); app.mount('#app');</code></pre> <p>Saw this one on another open issue</p> <pre><code class="language-javascript">// use-wagmi.js import { UseWagmiPlugin, configureChains, createConfig, mainnet, sepolia, } from "use-wagmi" import { arbitrum, arbitrumGoerli, avalanche, polygon, polygonMumbai, bscTestnet, } from "viem/chains" import { EthereumClient, w3mConnectors, w3mProvider } from "@web3modal/ethereum" import { Web3Modal } from "@web3modal/html" export default defineNuxtPlugin((nuxtApp) => { const config = useRuntimeConfig() const projectId = config.public.WALLETCONNECT_PROJECT_ID const chains = [ mainnet, arbitrum, arbitrumGoerli, avalanche, polygon, polygonMumbai, bscTestnet, ] const { publicClient } = configureChains(chains, [ w3mProvider({ projectId }), ]) const web3config = createConfig({ autoConnect: true, connectors: w3mConnectors({ projectId, chains }), publicClient, }) let web3Modal = null if (process.client) { const ethereumClient = new EthereumClient(web3config, chains) web3Modal = new Web3Modal({ projectId }, ethereumClient) } nuxtApp.vueApp.use(UseWagmiPlugin, web3config) return { provide: { web3Modal, }, } })</code></pre> <p>-</p> <pre><code class="language-javascript">// nuxt.config.js // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ modules: ["@use-wagmi/nuxt"], runtimeConfig: { public: { WALLETCONNECT_PROJECT_ID: "kikiki", }, }, })</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/unicape"><img src="https://avatars.githubusercontent.com/u/31918458?v=4" />unicape</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <p>@Taosome @An0nym0usAng3l add <a href="https://github.com/unicape/use-wagmi/tree/main/examples/vue2.7">2.7 example</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/unicape"><img src="https://avatars.githubusercontent.com/u/31918458?v=4" />unicape</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <p>@An0nym0usAng3l Here is the access method of nuxt. nuxt2 should have a similar method. <a href="https://github.com/unicape/use-wagmi/blob/main/examples/nuxt/plugins/use-wagmi.ts">nuxt</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/An0nym0usAng3l"><img src="https://avatars.githubusercontent.com/u/89713041?v=4" />An0nym0usAng3l</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <blockquote> <p>@An0nym0usAng3l Here is the access method of nuxt. nuxt2 should have a similar method. <a href="https://github.com/unicape/use-wagmi/blob/main/examples/nuxt/plugins/use-wagmi.ts">nuxt</a></p> </blockquote> <p>Isn't it better if this is on the documentation? Instead of just the nuxt.config setup, This part should also be added so it'd be clearer. Even the vue2.7 example too.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Taosome"><img src="https://avatars.githubusercontent.com/u/33270865?v=4" />Taosome</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <p>是vue/cli版本的原因 4.5.18 要报错换用5.x的可以</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/unicape"><img src="https://avatars.githubusercontent.com/u/31918458?v=4" />unicape</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <p>@An0nym0usAng3l Good idea, I will document it in the next big version</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

unicape / use-wagmi