Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vite support #101

Open
aorumbayev opened this issue Jan 7, 2023 · 14 comments · May be fixed by #164
Open

Vite support #101

aorumbayev opened this issue Jan 7, 2023 · 14 comments · May be fixed by #164

Comments

@aorumbayev
Copy link

Please consider addressing these two closed issues:

#4
#3

Despite being resolved, peraconnect still doesn't work with vite and its due to walletconnect bug.

How to replicate?

  1. Pick any vite starter for vue, react or any other stack that is compatible with peraconnect at the moment
  2. Run connect on perawallet class
  3. Observe ws does not work in the browser. Browser clients must use the native WebSocket object

Related issues

WalletConnect/walletconnect-monorepo#1062
@spencercap
Copy link

+1

5 similar comments
@tulustul
Copy link

+1

@Patryqss
Copy link

+1

@mploux
Copy link

mploux commented Feb 19, 2023

+1

@envin3
Copy link

envin3 commented Feb 21, 2023

+1

@marcelarutkowska
Copy link

+1

@mucahit
Copy link
Contributor

mucahit commented Mar 8, 2023

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

@MacroChip
Copy link

MacroChip commented Mar 14, 2023 •
edited
Loading

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.

@MacroChip
Copy link

Vite 4 still had the problem for me. I found a solution that does not need rollup-plugin-define.

define: {
    "global.WebSocket": "globalThis.WebSocket",
},

@MacroChip MacroChip mentioned this issue Mar 15, 2023
Closed
@MacroChip
Copy link

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!

@SilentRhetoric
Copy link

SilentRhetoric commented Jun 10, 2023 •
edited
Loading

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.

@spencercap spencercap mentioned this issue Jun 13, 2023
Closed
@MacroChip
Copy link

@SilentRhetoric Does global.WebSocket = globalThis.WebSocket work instead of replacing the entire global object?

@SilentRhetoric
Copy link

SilentRhetoric commented Aug 9, 2023 •
edited
Loading

@SilentRhetoric Does global.WebSocket = globalThis.WebSocket work 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/@WalletConnect[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/@WalletConnect[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/@WalletConnect[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/@perawallet[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/@perawallet[email protected][email protected]/node_modules/@perawallet/connect/dist/index.js (index.js:1:75)
at __require2 (chunk-W7S2ME4R.js?v=333133d0:18:50)

@spencercap
Copy link

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)

@fanksy fanksy mentioned this issue May 27, 2024
Closed
@drichar drichar mentioned this issue Jun 22, 2024
Closed
@PhearZero PhearZero linked a pull request Jun 22, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: wallet connect socket transport PhearZero/connect
10 participants
@spencercap @MacroChip @mucahit @tulustul @aorumbayev @mploux @SilentRhetoric @envin3 @Patryqss @marcelarutkowska