reown-com / web-examples

Wallet and dapp examples implementing WalletConnect v2
https://walletconnect.com
Apache License 2.0
431 stars 350 forks source link

There was a path error after building #665

Closed qinhua closed 3 months ago

qinhua commented 3 months ago

After connecting to walletConnect and using Vite Build to package and deploy online, I encountered the following error when clicking the Connect button. However, everything was normal during local development. How can I handle this path issue? I am currently using npm to execute package scripts(npm run build). How can I modify the Vite. config. ts file to solve this problem?

screenshot-20240804-163956.png screenshot-20240804-165116.png

my source code:

<template>
  <div>
    <button @click="connectWallet">Connect Wallet</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import { EthereumProvider } from '@walletconnect/ethereum-provider'
import { bindWallets, getSignatureText } from '@/api/user'
import Web3Modal from 'web3modal'
import { ethers } from 'ethers'

const projectId = import.meta.env.VITE_WALLETCONNECT_PROJECT_ID

export default defineComponent({
  name: 'ConnectWalletButton',
  methods: {
    async connectWallet() {
      const provider = await EthereumProvider.init({
        projectId,
        chains: [1],
        methods: ['personal_sign'],
        showQrModal: true,
        qrModalOptions: {
          themeMode: 'light'
        }
      })

      const EVMProvider = new ethers.BrowserProvider(provider)

      provider.on('display_uri', uri => {
        console.log('display_uri', uri)
      })

      provider.connect().then(async () => {
        console.log(provider)
        const address = provider.accounts[0]

        // 获取签名器
        const signer = EVMProvider.getSigner()
        console.log('signer', signer)

        // 定义要签名的消息
        const resMessage = await getSignatureText()
        const message = resMessage.text

        // 请求用户进行签名
        const signature = await signer.then(s => s.signMessage(message))
        console.log('Signature:', signature)

        const params = {
          text: message,
          signature,
          walletAddr: address
        }
        console.log(JSON.stringify(params, null, 2))

        bindWallets(params).then(res => {
          console.log('EVM 钱包成功', res)
          uni.showToast({
            title: 'Bind EVM Wallet Successfully',
            icon: 'success'
          })
          // userStore.updateUserInfo()
        })
      })
    }
  }
})
</script>

<style scoped>
button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>
qinhua commented 3 months ago

I tried to modify the Vite configuration file for walletConnect, and it seems to have been resolved so far.

      rollupOptions: {
        output: {
          // https://rollupjs.org/configuration-options/#output-manualchunks
          manualChunks(id: string) {
            if (id.includes('node_modules') && id.includes('walletconnect')) {
              return id
                .toString()
                .split('node_modules/')[1]
                .split('/')[0]
                .toString()
            }
          }
        }
      }
    }