[Bug]: WalletConnect throws error when selected and does not resolve [SvelteKit]

[theurgi]

Current Behavior

When the wallet select modal appears and WalletConnect is selected, the view shows an unending spinner and an error is logged to the console.

The first error is thrown from:
node_modules/keccak/node_modules/readable-stream/lib/_stream_readable.js

Uncaught (in promise) ReferenceError: global is not defined...

This appears to be an issue with onboard dependencies using node builtins and vite: vitejs/vite#728

I suppose this is more of an issue with vite than onboard, but this seems to pretty much make WalletConnect (and perhaps other wallet modules) unusable in SvelteKit.

Considering that onboard is built with Svelte, I wonder if you're aware of any work arounds?

Thanks

Expected Behavior

WalletConnect to work

Steps To Reproduce

1. In a SvleteKit application
2. When await onboard.walletSelect() is called the modal appears with wallet options
3. Select WalletConnect

Onboard Version

^1.36.0

Node Version

v16.11.0

What browsers are you seeing the problem on?

Firefox, Chrome, Safari

Relevant log output

onboard-1be1a53d.js:48 Uncaught (in promise) ReferenceError: global is not defined
    at node_modules/keccak/node_modules/readable-stream/lib/_stream_readable.js (_stream_readable.js:48)
    at __require2 (chunk-4MHTNMUC.js?v=9524742a:48)
    at node_modules/keccak/node_modules/readable-stream/readable-browser.js (readable-browser.js:1)
    at __require2 (chunk-4MHTNMUC.js?v=9524742a:48)
    at node_modules/keccak/lib/api/keccak.js (keccak.js:1)
    at __require2 (chunk-4MHTNMUC.js?v=9524742a:48)
    at node_modules/keccak/lib/api/index.js (index.js:1)
    at __require2 (chunk-4MHTNMUC.js?v=9524742a:48)
    at node_modules/keccak/js.js (js.js:1)
    at __require2 (chunk-4MHTNMUC.js?v=9524742a:48)

Anything else?

No response

[theurgi]

I was able to resolve this issue with rollup-plugin-polyfill-node particularly with this configuration: FredKSchott/rollup-plugin-polyfill-node#14 (comment)

The relevant parts of my config:

// svelte.config.js
import nodePolyfills from 'rollup-plugin-polyfill-node'

const config = {
  kit: {
    vite: {
      plugins: [
        nodePolyfills({
          include: [
            '*.js',
           'node_modules/**/*.js',
            new RegExp('node_modules/.vite/.*js')
          ],
          // ↓ Not sure if this line is necessary, seems to work without it
          exclude: ['node_modules/polyfill-nodeglobal.js']
        })
      ],
      resolve: {
        alias: {
          // ↓ see https://github.com/vitejs/vite/issues/6085
          '@ensdomains/address-encoder': '@ensdomains/address-encoder/lib/index.umd.js'
        }
      }
    }
  }
}

export default config

I assume this would work for any project that uses Vite, not just SvelteKit. You might consider adding this info to the docs.

UPDATE

While rollup-plugin-polyfill-node did fix things on the dev server and allow WalletConnect to function as expected, it broke the build, so I'm currently back to square one. See: FredKSchott/rollup-plugin-polyfill-node#38

[theurgi]

Finally got everything working, it took an inordinate amount of time to figure this out.

There was no clear documentation I could find on how to properly configure Vite to handle node globals.

I think the amount of others having this issue, the many 'hack' attempted solutions I found, and the strangeness of my working configuration attests to that fact that this is uncharted territory and it may not be fully considered by the developers of Vite.

For instance this: #667 (comment) — Going as far as using Webpack (an older version at that) with Svelte, just to handle this problem, shows how ridiculous the state of JavaScript, with its incompatible module systems and its host of build tools (within build tools), is.

I don't blame anyone for this (except maybe Bill Gates) and it's a miracle that any of this stuff works at all. Anyway, rant over. Here's my solution:

import adapter from '@sveltejs/adapter-static'
import preprocess from 'svelte-preprocess'
import nodePolyfills from 'rollup-plugin-polyfill-node'

const MODE = process.env.NODE_ENV

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: preprocess(),

  kit: {
    adapter: adapter(),
    target: '#svelte',

    vite: {
      plugins: [
        // ↓ Have to check the mode here because this cant run on build
        MODE === 'development'
          ? nodePolyfills({
              include: ['node_modules/**/*.js', new RegExp('node_modules/.vite/.*js')]
            })
          : ''
      ],
      build: {
        rollupOptions: {
          plugins: [
            // ↓ Needed for build
            nodePolyfills()
          ]
        },
        // ↓ Needed for build
        commonjsOptions: {
          transformMixedEsModules: true
        }
      },
      resolve: {
        alias: {
          // ↓ see https://github.com/vitejs/vite/issues/6085
          '@ensdomains/address-encoder': '@ensdomains/address-encoder/lib/index.umd.js'
        }
      }
    }
  }
}

export default config

[taylorjdawson]

@theurgi Did this completely resolve the sveltekit build issues for you?

[theurgi]

I was able to build with this configuration, however I suspect it's very suboptimal. For instance, to successfully build on Cloudflare, I had to increase the memory on the remote Node instance with the following hack in my package.json:

{
  "scripts": {
    "build": "NODE_OPTIONS=--max-old-space-size=4096 svelte-kit build"
  }
}

I don't know if this is just a Cloudflare thing or what. But I foresee this continuing to be a problem as more build tools opt out of handling node globals by default.

If you're looking to close this issue, and asking on my behalf, by all means go ahead.

[imsys]

I was able to build with this configuration, however I suspect it's very suboptimal. For instance, to successfully build on Cloudflare, I had to increase the memory on the remote Node instance with the following hack in my package.json:

{
  "scripts": {
    "build": "NODE_OPTIONS=--max-old-space-size=4096 svelte-kit build"
  }
}

I don't know if this is just a Cloudflare thing or what. But I foresee this continuing to be a problem as more build tools opt out of handling node globals by default.

If you're looking to close this issue, and asking on my behalf, by all means go ahead.

That seems to be a Vite bug, I'm also having that problem. vitejs/vite#2433

[imsys]

@theurgi , was that enough to you get your environment working? I'm having to include @rollup/plugin-node-resolve too.

[theurgi]

@imsys Yea, the build config I posted worked for me for both dev and production builds.

[imsys]

I'm debugging a little bit deeper here, and I think I found where the problem is.
@theurgi As you said that you don't get any error message, maybe we are running different versions and this could be a regression bug.
The problem I'm having is on Vite or Rollup. But as it is a dependence of SvelteKit, just knowing the SvelteKit version would help me.

[theurgi]

@imsys 1.0.0-next.202

[taylorjdawson]

@theurgi thank you for your work on this! 🙏🏾 I am going to close but please feel free to continue commenting about the vite rollup issue as it may come in handy in the future.