connect
connect copied to clipboard
perawallet
Vite support
Please consider addressing these two closed issues:
https://github.com/perawallet/connect/issues/4 https://github.com/perawallet/connect/issues/3
Despite being resolved, peraconnect still doesn't work with vite and its due to walletconnect bug.
How to replicate?
- Pick any vite starter for vue, react or any other stack that is compatible with peraconnect at the moment
- Run connect on perawallet class
- Observe
ws does not work in the browser. Browser clients must use the native WebSocket object
Related issues
https://github.com/WalletConnect/walletconnect-monorepo/issues/1062
Hello, we couldn't find any workarounds to solve this issue with Vite 2.x and Vite 3.x. The only solution seems to upgrade to Vite 4.x
Vite 3 (maybe 2) projects can use the define plugin in your vite.config.
export default defineConfig({
define: {
"global": "globalThis",
},
plugins: [
Fixes things for when you are running vite for development.
For builds, I had problems with the replacement in my own code so I removed the top level define in favor of depending on rollup-plugin-define. So I have a new plugin.
import define from 'rollup-plugin-define';
export default defineConfig({
plugins: [
define({
replacements: {
"global": "globalThis",
},
include: "node_modules/@walletconnect/**/*"
}),
Still working on a full solution. I assume the real problem here is in WalletConnect. Barring that, it's better in perawallet/connect's rollup.config than in each of our projects.
Vite 4 still had the problem for me. I found a solution that does not need rollup-plugin-define.
define: {
"global.WebSocket": "globalThis.WebSocket",
},
I believe upgrading from walletconnect v1 to v2 would fix this issue (as you can see by my mention). There seem to be lots of changes in v2!
I was referred to this issue--I believe I may have found a workaround after much hair-pulling:
index.html
<body>
<div id="root"></div>
<script>
global = globalThis
</script>
<script
src="/src/index.tsx"
type="module"
></script>
</body>
As of right now, I have a web app working with Pera Connect & Defly Connect (which is a fork of Pera) using Vite 4.3.9 and SolidJS.
Although I did try various Vite plugins, nothing would make both dev and build both work. Simply adding that bit into the html did, though.
@SilentRhetoric Does global.WebSocket = globalThis.WebSocket work instead of replacing the entire global object?
@SilentRhetoric Does
global.WebSocket = globalThis.WebSocketwork instead of replacing the entire global object?
@MacroChip Replacing global = globalThis with global.WebSocket = globalThis.WebSocket produced the following error:
index.ts:19 Uncaught ReferenceError: global is not defined at node_modules/.pnpm/@[email protected]/node_modules/@walletconnect/socket-transport/dist/esm/index.js (index.ts:19:7) at __init (chunk-W7S2ME4R.js?v=333133d0:15:56) at node_modules/.pnpm/@[email protected]/node_modules/@walletconnect/core/dist/esm/index.js (index.ts:48:1) at __init (chunk-W7S2ME4R.js?v=333133d0:15:56) at node_modules/.pnpm/@[email protected]/node_modules/@walletconnect/client/dist/esm/index.js (index.ts:1:1) at __init (chunk-W7S2ME4R.js?v=333133d0:15:56) at node_modules/.pnpm/@[email protected][email protected]/node_modules/@perawallet/connect/dist/index-b2e0f2c4.js (index-b2e0f2c4.js:1:20) at __require2 (chunk-W7S2ME4R.js?v=333133d0:18:50) at node_modules/.pnpm/@[email protected][email protected]/node_modules/@perawallet/connect/dist/index.js (index.js:1:75) at __require2 (chunk-W7S2ME4R.js?v=333133d0:18:50)
for whomever still needs help w this one, we've successfully been using Pera in vue + vite webapps for a while now and just open-sourced a small package that helps manage wallet connections.
check out any-wallet (you can also target multiple wallet types at once if desired)