web3-onboard: [Bug]: global is not defined with walletconnect - w/ SvelteKit + Vite + pnpm

Current Behavior

When clicking the WalletConnect option, an error appears: global is not defined

Expected Behavior

The WalletConnect QR code should appear

Steps To Reproduce

Clone this repo: https://github.com/beeb/lp-rescue-frontend
pnpm run build
pnpm run preview
Open preview URL in browser
Click Connect button in top right
Click WalletConnect

What package is effected by this issue?

@web3-onboard/walletconnect

Is this a build or a runtime issue?

Runtime

Package Version

@web3-onboard/walletconnect: 2.2.2

Node Version

16.19

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Anything else?

Here is where the walletconnect module is defined https://github.com/beeb/lp-rescue-frontend/blob/c1acad87df54292b622e6c2f2e634f423b89e64a/src/lib/constants.ts#L72-L94

Sanity Check

If this is a build issue, I have included my build config. If this is a runtime issue, I have included reproduction steps and/or a Minimal, Reproducible Example.

About this issue

Original URL
State: closed
Created a year ago
Comments: 22 (9 by maintainers)

Commits related to this issue

fix: implement fix as discussed in upstream issue https://github.com/blocknative/web3-onboard/issues/1568 — committed to beeb/lp-rescue-frontend by beeb a year ago

Most upvoted comments

Ok, so I had a deeper look and approached the problem methodically. The workaround is now available in main here https://github.com/beeb/repro-walletconnect

PNPM

First observation: pnpm is not supported. The dev server (pnpm run dev) throws an error related to rxjs on SSR:

Internal server error: exports is not defined
      at eval (/node_modules/.pnpm/rxjs@7.8.0/node_modules/rxjs/dist/cjs/operators/index.js:4:23)
      at instantiateModule (file:///home/valentin/temp/repro-walletconnect/node_modules/.pnpm/vite@4.1.4/node_modules/vite/dist/node/chunks/dep-ca21228b.js:52420:15)
ReferenceError: exports is not defined
    at eval (/node_modules/.pnpm/rxjs@7.8.0/node_modules/rxjs/dist/cjs/operators/index.js:4:23)
    at instantiateModule (file:///home/valentin/temp/repro-walletconnect/node_modules/.pnpm/vite@4.1.4/node_modules/vite/dist/node/chunks/dep-ca21228b.js:52420:15)

When the dependencies are installed with npm the dev server works fine.

Buffer polyfill

It seems some component or dependency requires Node’s Buffer. To polyfill this, the simplest way I could find was to install the buffer package and include the following in web3-onboard.ts:

import { Buffer } from 'buffer'
globalThis.Buffer = Buffer

Global is not defined

Finally, since global is not defined, I added the following to the app.html, according to your suggestion:

<script>
      var global = global || window
</script>

That’s it

Nothing more, nothing less is needed. I didn’t change the vite.config.ts file at all.

It’s very annoying that this library is not compatible with pnpm, since it’s much much faster and space-efficient than npm and has grown in popularity a lot.

beeb on Mar 10, 2023

@beeb interesting, thanks for sharing. It is challenging supporting many downstream deps along with newer projects like pnpm and the huge number of front end frameworks, bundlers and compilers as everything evolves. We are an open source project and we are free to use and contribute to so we rely on community members such as yourself to help with edge cases.

Adamj1232 on Mar 10, 2023